前端基礎 (二)

position屬性

MDN總結

• 1 static 元素在文檔常規流中當前的佈局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
• 2 relative 相對原來位置移動，會保留文檔中該位置（爲元素預留空間
• 3 absolute 相對整個頁面（父元素）移動，不爲元素預留空間
• 4 fixed 素的位置在屏幕滾動時不會改變
• 5 sticky position: sticky 對 table 元素的效果與 position: relative 相同。

flex 模型

Flex 佈局教程：語法篇
inline-block的基線是最後一行文字的底部，flex裏面的基線是第一行文字的底部

display: flex;
假如你想設置行內元素爲 flexible box，也能夠置 display 屬性的值爲 inline-flex。

彈性盒子

flex-direction: column（橫向）/row-reverse（反縱） 和 column-reverse （反橫）

子代確實超出了它們的容器。 解決此問題的一種方法是將如下聲明添加到 section css 規則中：

flex-wrap: wrap

這樣任何溢出的元素將被移到下一行。

align-items 控制 flex 項在交叉軸上的位置。

• 默認的值是 stretch 時
  
• center
  
• flex-start
  
• flex-end
  

justify-content 控制 flex 項在主軸上的位置

• flex-start / flex-end
  
• center
  
• space-around （全部 flex 項沿着主軸均勻地分佈，在任意一端都會留有一點空間。）
  

• space-between（只是它不會在兩端留下任何空間。）
  

• 全部 flex 項默認的 order 值是 0。
• order 值大的 flex 項比 order 值小的在顯示順序中更靠後。
• 相同 order 值的 flex 項按源順序顯示。因此假如你有四個元素，其 order 值分別是2，1，1和0，那麼它們的顯示順序就分別是第四，第二，第三，和第一。
• 第三個元素顯示在第二個後面是由於它們的 order 值同樣，且第三個元素在源順序中排在第二個後面。

article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

咱們給按鈕設置大小，有意思的是咱們給它一個值爲1的 flex 屬性。若是你調整瀏覽器窗口寬度，你會看到這是一個很是有趣的效果。按鈕將佔用盡量多的空間，儘量多的坐在同一條線上，可是當它們再也不適合在同一條線上，他們會到下一行去。