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布局规则:
- 内部的box会在垂直方向一个接一个的放置。(不是BFC也同样的)
- 垂直方向上的距离由margin决定。(解决边距重叠问题)
- bfc的区域不会与float区域重叠。 (解决文本包裹浮动元素的问题)
- bfc就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。(解决边距重叠问题)
- 计算bfc的高度时,浮动元素也参与计算。(清除浮动)
哪些元素会生成BFC:
- 根元素。
- float属性不为none。
- position为absolute或fixed。
- Display:inline-block或者table-cell或者table-caption或者flex或者inline-flex。
- overflow不为visible。
案例请移步大佬链接:https://www.cnblogs.com/chen-cong/p/7862832.html
例如:设置某元素为overflow属性为hidden,即生成了一个BFC。当然,这个元素必须符合《哪些元素会生成BFC》这个规则。
参考链接:https://www.cnblogs.com/chengzp/p/cssbox.html