Chrome调试工具下的盒子模型
CSS盒模型的知识点
- 基本概念：CSS盒模型分成标准盒模型和IE模型
- 标准模型和IE模型的区别
- CSS如何设置这两种模型
- JS如何设置获取盒模型对应的宽和高
- 解释边距重叠
- BFC（边距重叠解决方案）
答：
基本概念（略）
标准模型和IE模型 height 和 width 计算方式不同
标准模型：只包括content
IE模型：content+padding+border标准模型(默认)：
box-sizing: content-box
IE模型：box-sizing: border-box-
JS如何设置获取盒模型对应的宽和高
- dom.style.width/height
只能获取到内联样式的宽和高，获取不到style节点和外链CSS样式的宽和高 - dom.currentStyle.width/height
三种方式通过浏览器得到的是一个即时运行的结果，是渲染之后的CSS，但是只有IE支持。 -
window.getComputedStyle(dom).width/height
支持浏览器兼容，通用性更好。 -
dom.getBoundingClientRect().width/height
应用：计算一个元素的绝对位置，以视窗（Viewport）左上角为顶点，返回4个值topwidthheightleft。
- dom.style.width/height
-
边距重叠
纵向 margin 重叠- 父子元素重叠：添加
overflow:hidden相当于给父元素添加了一个BFC - 兄弟元素重叠：取两个属性中较大的值
- 空元素设置上下边距：把
margin-top和margin-bottom取最大值设为边距
垂直margin的合并在同一个BFC中才会发生，如果两个BFC就算它们的margin相遇了，也不会重叠融合的。
- 父子元素重叠：添加
-
BFC（边距重叠解决方案）
基本概念
BFC（块级格式化上下文）
IFC（内联格式化上下文）BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。
BFC原理
- 内部的box会在垂直方向，一个接一个地放置
- box垂直方向的距离由margin决定。
属于同一个BFC的两个相邻box的margin，边距垂直方向会发生重叠 - BFC区域不会与浮动元素的box重叠
- BFC在页面上是一个独立的容器，内外元素互不影响
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- 计算BFC高度的时候，浮动元素也会参与计算
浮动清理利用的主要是第六条规则，只要将父容器触发为BFC，就可以实现包含的效果。
如何创建BFC
- float的值不为
none - position的值不为
static（默认）relative
可设置为absolute或fixed - display的值为
inline-block或table相关属性table-cell,table-caption,table-column,table-row,flex,inline-flex - overflow的值不为
visible
可为hidden,scroll,auto,inherit
以上四个条件都是针对父元素设置的，满足其一就可以生成BFC，即可清除浮动。
BFC使用场景
- 清除浮动：BFC子元素即使是float也会参与高度计算
- 解决垂直方向边距重叠
- 内容增高导致侵染
盒子模型拓展问题
- 为什么看起来content-box更合理，但是还是经常使用border-box？
答：有时候在content-box元素的基础上添加内边距padding或border会将布局撑破，但是使用border-box就可以轻松完成。
