CSS布局套路

布局流程图

要支持IE8吗？

• 要！Float布局，定宽
• 不要！flex布局，弹性宽度

原则：

1. 不到万不得已，不要写死width 和 height
2. 尽量用高级语法，如calc、flex
3. 如果是IE。就全部写死

口诀:

1. float

   • 儿子全部加float: left(right)
   • 老子全部加 .clearfix

     .clearfix:after{
         content: '';
         display: block;
         clear: both;
     }
     .clearfix{
        zoom: 1;
     }
     

2. flex

   • 老子加display: flex;
   • 老子加justify-content: space-between;
     • 如果宽度不够，可以用margin: 0 -4px;

position: static;   
元素position的默认值, 即文档出现在在文档流中的正常位置.  除非要覆盖之前的定义, 否则不需要设置,
position: relative;  
相对定位 . 还在文档流之中,可以设置top, button,  left,  right来偏移.
position: absolute;  
绝对定位.  脱离文档流, 相对于窗口或者父元素有定位的元素定位(position:static除外. 常常和position: relative;一起使用)
position: fixed;  
固定定位. 固定在文档流的正常位置上,不随页面的滚动而滚动.