自驗積累（2）-css

2. css

2.1 flex佈局

• flex-direction：定義主軸方向（row | row-reverse | column | column-reverse | initial | inherit;）
• flex-wrap：定義 flex 容器是單行或者多行（nowrap | wrap | wrap-reverse | initial | inherit;）
• justify-content： 橫向對齊方式（flex-start | flex-end | center | space-between | space-around | initial | inherit;）
• 縱向對齊方式：
  • align-content：只對多行 flex 容器中內容生效（stretch | center | flex-start | flex-end|space-between | space-around | initial | inherit;）
  • align-items：加在 flex 容器上，它規定的是 flex 容器中 item 在交叉軸中的對齊方式（stretch | center | flex-start | flex-end | baseline | initial|inherit;）
  • align-self：加在 flex 容器中的 item 上，覆蓋了外部容器規定的 align-items 屬性（auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;）

2.2 四種定位的區別

• static：默認值，沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
• relative：相對定位，相對於自身原有位置進行偏移，仍處於標準文檔流中。經過 top , bottom , left , right 的設置相對於其正常（原先自己）位置進行定位。可經過 z-index 進行層次分級。
• absolute：絕對定位，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過 z-index 進行層次分級。
• fixed：固定定位，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過 z-index 進行層次分級。

relative 與 absolute 的主要區別：

• 首先，是上面已經提到過的在正常流中的位置存在與否。 其次，relative定位的層老是相對於其最近的父元素，不管其父元素是何種定位方式。以下圖：

圖中，紅色背景層爲relative定位，其直接父元素綠色背景層爲默認的static定位。紅色背景層的位置爲相對綠色背景層top、left個20元素。

而若是紅色背景層定位爲absolute，則情形以下：

能夠看到，紅色背景層依然定義top:20px；left:20px；但其相對的元素變爲定位方式爲absolute或relative的黃色背景層。

所以，對於absolute定位的層老是相對於其最近的定義爲absolute或relative的父層，而這個父層並不必定是其直接父層。若是其父層中都未定義absolute或relative，則其將相對body進行定位，如圖：

除top、left、right、bottom定位外，margin屬性值的定義也符合上述規則。

2.3 水平垂直居中

1. 第一種：

   #container{
       position:relative;
   }
   
   #center{
       width:100px;
       height:100px;
       position:absolute;
       top:50%;
       left:50%;
       transform: translate(-50%,-50%);
   }
   複製代碼

2. 第二種：

   #container{ 
       display:flex; 
       justify-content:center; 
       align-items: center; 
   }
   複製代碼

2.4 什麼是文檔流？

將窗體自上而下分紅一行行, 並在每行中按從左至右的順序排放元素,即爲文檔流。       只有三種狀況會使得元素脫離文檔流，分別是：浮動、絕對定位和相對定位。

2.5 z-index屬性

z-index，又稱爲對象的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，固然這是指同級元素間的堆疊，若是兩個對象的此屬 性具備一樣的值，那麼將依據它們在HTML文檔中流的順序層疊，寫在後面的將會覆蓋前面的。 須要注意的是，父子關係是沒法用 z-index 來設定上下關係的，必定是子級在上父級在下。