CSS 傳統佈局

icyhat發表於2018-11-16
CSS

最重要的終極問題

佈局是用來幹什麼？

  • 答：改變網頁上元素的預設擺放位置，將元素們放在我想把它放在的地方。

傳統佈局是什麼？

  • 答：指以盒子模型為基礎、以 CSS display屬性和position屬性為輔助的方式。

為什麼叫傳統佈局？

  • 因為新出了很多更順手方便的佈局如 flex, grid。

例如，下面截圖中有四張圖片，四個<img>元素：

CSS 傳統佈局

  1. 整體分：上下順序：一上三下，上面的居中
  2. 下面又分：左右順序：一左二右
  3. 右邊又分：上下順序；一上一下

你們四兄弟是怎麼做到一家人整整齊齊的？

Normal flow

有選擇的閱讀。

為了解決問題而參閱查詢資料的時候，要快速瀏覽，而不是從上到下事無鉅細的像聖經一樣虔誠，找到你所需要的，解決問題，over。

  1. 佈局是誰的佈局？

    • 答：元素，也叫標籤。
    • 例：就是p、div、img等

  2. 最簡單的佈局是什麼？

    • 答：把一個個元素從左到右，從上到下襬放。
    • 例：比如你正在看到的多段文字（paragraph），p元素，和上一句話之間是從上到下襬放。

  3. 怎麼把元素和簡單的佈局聯絡起來？

    • 答：指定元素的display屬性。三個值：inline、block、inline-block。

  4. 指定完了之後呢？就行了？

    • 答：對。但是難點在於怎麼指定。
      1. inline代表該元素像同一行內的周圍的文字一起流動，而文字本身是從左到右的，滿了就換行。設定高度寬度沒有效果。設定 margin 和 padding 只有左右方向才會導致和其他文字間隔開，上下方向只存在，沒效果，除了用來改變border的高度沒啥用。
      2. block可設寬高，獨佔一行，代表這像個箱子一個個摞起來，只不過方向是從上到下。
      3. inline-block代表代表了可以設定寬高的塊，又可以在行內從左到右，而且是一個整體，不會換行分開。

  5. 為什麼我寫元素的時候沒管什麼display屬性也能從左到右、從上到下佈局？

  • 答：因為這些元素預設就自帶這個屬性和值。
  1. 這就完了？
  • 答：想得到更復雜的結果，那就只能引入更復雜的操作方式。基本就這個，更多就需要操作 CSS position屬性，他有4個值：
    1. static: 預設的文件正常流，就本來自帶該咋顯示就砸顯示。
    2. relative: 相對於文件正常流種他自己的位置進行變化
    3. absolute：從正常文件流移除，後面的會填補這個空。自己生成一個塊相對於定位
    4. fixed：相對於視窗定位
    5. sticky： 我的天，繼續刨根問底又涉及到包含塊，什麼鬼。 本文待整理。

目標

左右佈局

子元素左右浮動，父元素新增.clearfix消除浮動，

.clearfix::after {
    content="";
    display: block;
    clear:both;
}
複製程式碼

左中右佈局

子元素左右浮動，中間margin: 0 auto;

水平居中

  • inline 元素:
    • 如果不是inline 設定為display:inline-block
    • 再給父元素一個text-align:center
  • 固定寬度的塊級元素:
    • margin:0 auto;

垂直居中

父元素新增text-align:center

該元素新增vertical-align:center

相關文章