CSS佈局

div標籤

概念

<div> </div>本身是HTML4的標籤，因其特殊性而一直作為CSS佈局的核心標籤。

特點

• <div> </div>本身預設樣式極少(只有預設塊級元素這一項)
• 沒有太多預設屬性
• 預設寬度為100%

總結

本身不具有太多預設的樣式或屬性，對CSS來說，可塑性極強，可以實現任何想要的效果。比如佈局的一部分，或者模組之類的。

標準盒模型

概念

CSS會把所有標籤都當成一個個的“盒子”，通過CSS所提供的相關屬效能夠實現任意標籤的尺寸設定以及定位，由這些屬性構成的體系就是盒模型。

屬性

• width：設定盒子的內容寬度
• height：設定盒子的內容高度
• border：設定盒子的邊框
• padding：設定內邊距，即內容和border的距離。四個內邊距可統一設定也可分別設定。
• margin：設定外邊距，即設定盒子和另一個挨著的盒子之間的距離。同樣，四個外邊距可統一設定也可分別設定。
  • 給父標籤設定overflow:hidden即可防止給緊挨塊級父元素的子標籤設定margin-top時帶跑其父標籤。

需要注意的是，盒子的總寬高不只是width或height，還包括padding、border和margin。這些屬性也不僅可以作用於盒子，也可以作用於盒子中的元素。

IE盒模型(怪異盒模型)

概念

和標準盒模型一樣，使用一樣的5個css屬性來設定盒子的尺寸以及位置。

與標準盒模型的區別

IE盒模型的padding和border是計 算在width和height中的，盒子的總寬高是width或height和margin。

標準盒模型和IE盒模型的切換

在現代瀏覽器中，大多數標籤都是預設用的標準盒模型，但仍可以用box-sizing 屬性來切換，content-box為標準盒模型，border-box為IE盒模型。

需要注意的是，大部分元素都預設是content-box，但input、button元素預設border-box ，會導致尺寸問題。

CSS定位

概念

傳統的盒模型不能處理固定的標籤或者帶有層疊效果的標籤佈局，藉助CSS中的position屬效能夠實現標籤處於任意的位置，並且可以實現標籤的層疊效果，在div+CSS佈局中，CSS定位起到一個輔助作用。

position屬性

• static：預設定位，表示標籤按照頁面預設的佈局方式進行定位。

• fixed：固定定位

  • 設定固定定位的標籤會固定在螢幕上，不會隨滾動條而滾動。
  • 固定定位標籤會被視為“不佔空間”，即類似播放器固定在最上層。
  • 固定定位的標籤以body作為位置參考，分別以top、left、right和bottom設定距離body標籤上下左右的距離。

• absolute：絕對定位

  • 與固定定位相比，絕對定位會隨著頁面滾動而滾動。

  • 與固定定位相同，絕對定位標籤會被視為“不佔空間”，即類似播放器固定在最上層。

  • 絕對定位的標籤以已定位父標籤作為位置參考，分別以top、left、right和bottom設定距離已定位父標籤上下左右的距離(已定位父標籤指postion為非static的父級標籤或祖先標籤。如果沒有已定位父標籤則會直接參考body標籤進行定位)。

    • 特殊用法

      margin:auto;
      position:absolute;
      top:0;
      left:0;
      rigtht:0;
      bottom:0;
      

      • 對已設定寬高的標籤可實現相對已定位的父標籤垂直水平居中(相當於上下左右都在頂)。
      • 對於未設定寬高的標籤可實現平鋪整個相對已定位父標籤(相當於拉伸以實現四周距離為0)。

• relative：相對定位

  • 與固定定位和絕對定位相比，相對定位標籤仍會佔據原來的空間，不會被視為“不佔空間”，即設定了相對定位之後原頁面佈局不受影響。
  • 移動後仍可以類似播放器固定在最上層一樣覆蓋其他元素。
  • 分別以top、left、right和bottom設定距離原來位置上下左右的距離。

改變定位標籤的顯示層級

z-index：用於控制定位標籤的顯示順序，以數字為單位。預設級別為0，數字越大，層級越高，層級高的優先顯示，可以設定為負數，但只對非static 的定位標籤有效果，且子元素的顯示層級受限於父元素的顯示層級。

總結

• 固定定位：需要固定在頁面的標籤，程式碼建議放在</body>之前。
• 絕對定位：位置比較特殊並且不固定的標籤。
  • 特殊位置：有層疊效果的標籤，是參考父標籤，本身不佔空間
  • 一般情況，絕對定位會搭配相對定位使用。子絕父相
• 相對定位：有層疊效果的標籤，同時自己需要佔空間的。

文件流

概念

指HTML頁面中標籤的預設排列方式(從上往下、從左往右，行內和行內塊級會同行顯示，塊級元素會獨行顯示)，預設情況下所有標籤都處於文件流。

脫離文件流

當我們給標籤設定固定定位或絕對定位或浮動時，該標籤會脫離文件流，不受文件流的限制，也不屬於文件流。文件流的標籤會忽略脫離文件流的標籤，當成不存在。在頁面中脫離文件流的標籤會表現為浮在文件流上面，就可能會擋住文件流中的標籤。

需要注意的是，相對定位沒有脫離文件流，只不過可以藉助top等四個位置屬性改變自己的位置，也可以有層疊的效果。

浮動

概念

90年代設計了CSS屬性float來實現文字圍繞圖片的效果，譯為浮動。目前在頁面中表現為設定勒浮動的標籤具有很多額外的特性，配合div可以實現頁面佈局，20年在國內普及的佈局方式就是盒模型+浮動。

語法

float: left | right  |none(預設);

特性

• 浮動標籤會和其他浮動標籤同行顯示，如果父標籤寬度不夠，浮動標籤會自動換行顯示。
• 浮動標籤會盡量向左對齊(左浮動 )或向右對齊(右浮動)。
• 會脫離文件流(會覆蓋)。
• 當上一個標籤浮動後，下一個緊挨標籤的空間已經頂上去了，但是該標籤的內容會認為浮動元素還在，所以才會有標籤空間移動但內容不動的情況。

清除浮動標籤帶來的影響

• 給受影響的非浮動標籤設定CSS屬性:clear。clear專門用於清除浮動標籤帶來的影響。

  clear:left | right |both;
  

• 通過空白div新增clear屬性將浮動元素和非浮動元素給分隔開。

• 通過< br clear="all" >將浮動元素和非浮動元素分隔開。

• 父元素新增偽元素可以動態新增一個子元素，完成清除浮動的操作。

浮動子標籤帶來的父標籤的的高度塌陷問題

當父標籤高度自適應，子標籤浮動時，因子標籤脫離文件流，父標籤認為沒有該子標籤，高度會塌陷。給父標籤設定overflow:hidden;。

dispaly:inline-block和float的異同

• 相同點：

  • 都可以讓塊級元素同行顯示，根據父標籤的寬度自動換行

• 不同點：

  • dispaly:inline-block需要考慮行內塊級元素之間的空隙、垂直對齊。

  • display:inline-block標籤會留在文件流，float標籤會脫離文件流(因脫離文件流，float需注意父標籤高度塌陷問題)。

  • float標籤需考慮對其他非浮動標籤的影響問題。

  • float標籤換行需注意float標籤高度要一致，不然有換行問題。

    ​

  • float可以直接實現右對齊或左對齊。

div+CSS佈局

概念

以CSS盒模型為核心，以div來設計和實現頁面的一種佈局技術。把頁面所有內容都換分到不同的盒子中藉助CSS盒模型完成頁面佈局。

流程

1. 對psd原稿進行切片

2. 進行框架分析，確定頁面大致有幾個模組

3. 實現框架

   • 寬高

   • 邊框或背景

   • 間距

4. 從上往下依次填充模組內容以及對應的樣式

   • 建議每個模組都有一個id，對其子標籤設定樣式儘量用組合選擇器

5. 細微調節

   • 盒子間的距離
   • 文字字型大小
   • 文字和邊框間的距離

彈性佈局

概念

div+CSS佈局沒有自適應、大量時間花在水平或垂直居中、需要清理浮動。彈性佈局是CSS第三代佈局技術，具有自適應特點，用於替代div+CSS佈局或起到輔助作用。彈性佈局能夠使元素適應不同的容器寬度，比如瀏覽器寬度，且可以實現內容快速的居中。

彈性佈局的標準使用模式

• 將富餘空間作為彈性子專案的空隙進行對齊處理，彈性子專案寬高固定，間隙自適應。
• 將富餘空間按比例分配給彈性子專案作為其尺寸的一部分，尺寸自適應，間隙可使用margin。

語法

給容器標籤設定display:flex |inline-flex都可以將該容器變為彈性容器，通過設定彈性佈局提供的CSS屬效能夠對彈性容器的直接子標籤進行佈局的控制。直接子標籤也稱為彈性子專案。

• display:flex：其兄弟標籤會將該彈性容器視作一個普通的塊級元素。
• display:inline-flex：其兄弟標籤會將該彈性容器視作一個普通的行內塊級元素。

另外，一般不會對彈性容器設定高度，因為自適應。

主軸和側軸

預設情況下，水平方向為其主軸，垂直方向為其側軸。也可通過相關屬性進行設定。

彈性佈局相關CSS屬性

• flex-direction：設定彈性容器的主軸，預設是row，即水平。

  flex-direction:row | row-reserve | column | column-reserve;
  

  • row和row-reserve將主軸設定為水平，row-reserve是水平向左，側軸是主軸的垂直方向。

• flex-wrap：對彈性容器設定是否允許直接子標籤換行。

  flex-wrap:nowrap | wrap;
  

• justify-content：設定彈性子專案在主軸上的對齊方式(是給彈性容器設定)。

  justify-content:center | flex-start | flex-end | space-between | space-around | space-evenly;
  

  • center：水平居中。
  • flex-start：從主軸開頭進行排列。
  • flex-end：從主軸結尾處進行排列。
  • space-between：彈性子專案中間均分主軸上的空餘空間。
  • space-around：彈性子專案兩邊均分主軸上的空餘空間。
  • space-evenly：彈性子專案所有空隙均分主軸上的空餘空間。

• align-content：設定彈性子專案在側軸上的對齊方式(是給彈性容器設定)。

  align-content:center | flex-start | flex-end | space-between | space-around | space-evenly | stretch;
  

  • 必須保證彈性子專案可以換行。
  • 如果設定為stretch，彈性子專案的預設高度就是彈性容器的高度。

• align-items：設定彈性子專案之間的對齊方式。

  align-items:stretch | baseline | flex-end | flex-start | center;
  

  • stretch：當彈性子專案高度為auto或沒設高度時，會自動拉伸高度，高度會剛好容得下內容。

彈性空間

彈性空間指的是一個彈性子專案本身的尺寸與通過分配所得到的富餘空間的總和。對主軸或側軸的富餘空間的處理不再是對齊，而是直接分配給彈性子專案作為其空間的一部分，間隙可使用margin。

相關CSS屬性

• flex-grow：彈性子專案的成長因子，簡稱彈性因子，指的是分配到賦予空間的 比例。彈性因子越大，分配的空間越多。給彈性子專案設定。如果因子都為1，那麼富餘空間平均分配。 如果因子不一樣，那麼直接按比例進行分配。

彈性佈局細節處理

• order：能夠改變某個彈性子專案的顯示順序。數字越小，顯示越靠前。
• flex-shrink：控制彈性子專案的收縮比例，如果彈性子專案所需要的寬度超過了彈性容器的寬度，那麼預設情況下，彈性子專案會收縮同樣的尺寸來匹配彈性容器的寬度。如果某個子專案收縮比例大，那麼被分攤的尺寸也更多，即會讓出更多的空間(是給彈性子專案設定)。
• flex-basis：彈性子專案的預設寬度。

彈性佈局的應用場景

• 水平導航
• 帶有重複標籤的列表，比如商品列表、課程列表
• 標籤的快速水平垂直居中