布局

布局方法

• 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 控制子元素摆放顺序