布局流程图
要支持IE8吗?
- 要!Float布局,定宽
- 不要!flex布局,弹性宽度
原则:
- 不到万不得已,不要写死width 和 height
- 尽量用高级语法,如calc、flex
- 如果是IE。就全部写死
口诀:
-
float
- 儿子全部加float: left(right)
- 老子全部加 .clearfix
.clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ zoom: 1; } 复制代码
-
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;
固定定位. 固定在文档流的正常位置上,不随页面的滚动而滚动.
复制代码