CSS 傳統佈局

最重要的終極問題

佈局是用來幹什麼？

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

傳統佈局是什麼？

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

爲何叫傳統佈局？

• 由於新出了不少更順手方便的佈局如 flex, grid。

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

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屬性也能從左到右、從上到下佈局？

• 答：由於這些元素默認就自帶這個屬性和值。

6. 這就完了？

• 答：想獲得更復雜的結果，那就只能引入更復雜的操做方式。基本就這個，更多就須要操做 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