谈谈对盒模型的理解-笔记

1、基本概念：标准模型 和IE模型

盒模型由里向外依次是concent、padding、border、margin。

盒模型是有两种标准的，一个是标准模型，一个是IE模型。

标准盒模型的宽高是concent的宽高，而IE盒模型的宽高是concent+padding+border。

2、CSS如何设置这两种模型 

使用CSS3 的属性 box-sizing属性来区分：concent-box(标准)、border-box(IE)。

3、JS如何设置获取盒模型对应的宽和高

dom.style.width/height 

　这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

dom.currentStyle.width/height   

 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到，但是这种方式仅IE浏览器支持。

window.getComputedStyle(dom).width/height

 这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。 

dom.getBoundingClientRect().width/height

 这种方式是根据元素在视窗中的绝对位置来获取宽高的

dom.offsetWidth/offsetHeight 

　最常用的，也是兼容最好的。

4、BFC

块级格式化上下文（Block Formatting Context ）：是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC布局规则：

1. 内部的box会在垂直方向一个接一个的放置。（不是BFC也同样的） 　　
2. 垂直方向上的距离由margin决定。（解决边距重叠问题）
3. bfc的区域不会与float区域重叠。 （解决文本包裹浮动元素的问题）　
4. bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。（解决边距重叠问题） 　
5. 计算bfc的高度时，浮动元素也参与计算。（清除浮动）

哪些元素会生成BFC：

1. 根元素。　
2. float属性不为none。　　
3. position为absolute或fixed。　　
4. Display:inline-block或者table-cell或者table-caption或者flex或者inline-flex。
5. overflow不为visible。

案例请移步大佬链接：https://www.cnblogs.com/chen-cong/p/7862832.html

例如：设置某元素为overflow属性为hidden，即生成了一个BFC。当然，这个元素必须符合《哪些元素会生成BFC》这个规则。

 

 

参考链接：https://www.cnblogs.com/chengzp/p/cssbox.html

参考链接：https://www.cnblogs.com/chen-cong/p/7862832.html

参考链接：https://www.cnblogs.com/pianruijie/p/7929454.html