1、BFC(Block Formatting Context 块级格式化上下文):
指页面中一个指定的区域,并且给一套渲染规则,他会去决定子元素如何去定位;
触发BFC机制:
- overflow:非visiable;
- display:inline-block;
- float:left/right;
- position:absolute/fixed;
解决什么样的问题:
(1)防止外边距合并的情况
(2)解决浮动造成的高度坍塌的情况
2、外边距合并
(1)给父级加border隔开
(2)加padding
3、为什么要强调书写顺序?
渲染过程中需要讲究的,如果书写顺序不规范,会造成回流的情况;
书写顺序:
(1)布局定位属性:
display,position,float,clear,overflow,list-style
(2)元素自身属性:
width,height,margin,padding,border,background
(3)字体,文本属性:
line-height,color,font,text,vertical-align…
(4)其他(css3)
border-radius,cursor,transition,background:liear-gradient(线性渐变);animation,box-shadow;