盒模型 BFC 总结
- 盒模型由 margi border padding content -盒模型有标准模型与 IE 模型两种类型 -标准模型的 width,height 就是 content 的 width,height
- IE 模型的 width,height 就是 content+padding+border 的 width,height -两者之间转换通过 box-sizing:content-box||border-box
BFC
-
🤔BFC 是什么?
块级格式化上下文 -
🤔BFC 的原理?
float 布局不会依赖,即 bfc 不会与 float 重叠
外部与内部之间互不影响
垂直方向 margin 重叠取较大值
计算 BFC 的高度,float 也参与计算 -
🤔BFC 能解决的问题?
margin 垂直重叠问题
元素侵占剩余空间
解决浮动元素导致父级元素的 height 为 0 -
🤔BFC 创建方式?
float 不为 null
overflow 不为 visible
postion 不为 static relative
display: table 类似元素
经典语句
每天多学习一点,你就比别人多知道一点。