面试之CSS盒模型

最新推荐文章于 2025-03-03 17:40:16 发布

ADreamF

最新推荐文章于 2025-03-03 17:40:16 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

文章标签：盒模型 BFC

本文链接：https://blog.youkuaiyun.com/weixin_38249463/article/details/82149152

本文主要介绍了CSS盒模型，包括其组成、标准盒模型和IE盒模型的区别，以及JS获取高度的方法。还阐述了边距重叠问题及解决办法，即通过创建BFC解决。同时说明了BFC的原理和创建BFC的方式，如设置float、position、display、overflow等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端架构：https://www.cnblogs.com/xiaoai-tang/p/6580951.html

   CSS盒模型
盒模型的组成：margin border padding content
   类型
标准盒模型和IE和盒模型
   类型区别
标准盒模型宽高度为content的宽高           box-sizing:content-box
IE盒模型宽高包括border padding content 之和 box-sizing:border-box;
浏览器默认是content-box
   JS如何取高度
dom.style.width/height 只能取到内联
dom.currentStyle.width/height 只有IE支持
window.getComputedStyle(dom).width/height
dom.getBoundingClientRect().width/height

边距重叠
上边界溢出在父元素加BFC
上下块级元素 margin-bottom margin-top 去最大值给子元素加个父元素，给父元素加个BFC就可以解决
空元素取最大值
   BFC的原里四点
盒子垂直方向上的距离是由margin决定的。同一个BFC里面的相邻的box 边距会重叠
浮动元素也参与高度计算
BFC是一个隔离的独立容器不会影响外面和被外面影响
BFC区域不会与浮动的元素重叠

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
如何创建BFC
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible