佈局

佈局方法

• float/position/inline-block/table/flex/grid

居中

• 水平居中
  
  • 行級元素:text-align:center
  • 塊級元素:margin:auto
• 垂直居中
  
  • 單行文字：line-height 導航欄 button
  • 行級盒子：vertical-align：middle 適合與小圖標和文字的對齊
  • 絕對定位：top：50%；left：50% 適合於塊級絕對定位

float

• 一欄固定剩下一欄自適應 書寫順序重要float固定元素需要在前 涉及到的一些問題需要給最外層盒子添加overflow:hidden理由是清除浮動，解釋原因需要聯繫BFC，然後引用知乎上的一個答案就是:
  

  因爲overflow.hidden會觸發BFC。 BFC的意思是，我這個元素裏面的子孫元素，不會影響外部元素的佈局。 計算高度是會把元素高度計算進去

• 對於渲染應該渲染重要的內容，所以，如果重要內容爲自適應內容，需要用別的float方法佈局。
  父容器用padding保留aside的寬度
  margin 負數拉到上一行，再relative定位到左邊

{
    width: 10em;
    float: left;
    margin-left: -10em;
    position: relative;
    left: -100%;
    background-color: lightblue;
    min-height: 200px
}

• (僞)等高
  相當於是用一個足夠大的padding使得盒子高度增加，在通過一個margin-bottom負值縮小高度

{
    padding-bottom:20em;
    margin-bottom: -20em;
}

position

• 等高 bottom:0 /top:0 或者height:100%

table layout

• 只能用來呈現需要table的地方
• 導航欄 可以用display：table-cell
• 一張不知道寬高的圖片可以用table-cell居中 container父元素

.container{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    width:400px;
    height:400px;
}

flexbox css3新增 爲佈局而生~聽起來好牛逼

• 水平或垂直排成一行
• 控制子元素對齊方式
• 控制子元素的寬度高度
• 控制子元素的顯示順序
• 控制子元素是否折行
  
  • flex-direction:row/row-reverse/column/column-reverse
  • flex-grow
    
    • 定義每一個子元素在盒子內的彈性
    • 拓展盒子剩餘空間的能力

.it1{
    flex-grow: 1;
    background-color: pink;
}
.it2{
    flex-grow: 3;
    background-color: lightyellow;
}

+  flex-shrink 元素收縮的能力
+  flex-wrap 元素在主軸方向擺放時，能否換行 wrap/no-wrap/wrap-reverse
+  justify-content 主軸對齊 flex-start/flex-end/center/space-between/space-around
+  align-items 側軸對齊 flex-start/flex-end/center/space-between/space-around
+  order 控制子元素擺放順序