box-sizing:border-box;怪异盒模型
他的宽度=内容(width)
实际高度=内容(height)
标准的盒模型语法;box-sizing:content-box
overflow;hidden:(溢出隐藏)
BFC(block formatting context)
web页面中盒模型布局的css渲染模式块级模式渲染上下文
它是一个独立的渲染区域里面的元素和外面的元素毫不相干
生成BFC 的条件
根元素html
float属性不属于none
position定位(属性为absoulte或者fixed)
display转行内快(inline-block 也可以触发)
overflow只要属性不为wisible都可以触发
BFC 的渲染规则
在内部的box会垂直方向,一个接着一个的排序box在垂直方向
的距离由margin决定属于同一个bfc的相邻的box的margin会发生塌陷
bfc解决什么问题
清除浮动
防止margin塌陷
避免文字 环绕
两列只适应 中间适应
中间盒子不会受到两边盒子的影响