CSS盒模型和BFC

最新推荐文章于 2024-11-05 20:00:00 发布

L_smwy

最新推荐文章于 2024-11-05 20:00:00 发布

阅读量89

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/L_smwy/article/details/115463604

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS盒模型及深度思考和BFC

题目：谈一谈你对CSS盒模型的认识

对于这个题目，相关知识点有以下几个方面：
（1）基本概念：标准盒模型和IE盒模型的区别及设置；
（2）JS如何设置、获取盒模型对应的宽和高；
（3）根据盒模型解释边距重叠；
（4）BFC（边距重叠解决方案）或IFC。
总结：以上几点，从上到下，知识点逐渐递增，知识面从理论、CSS、JS，又回到CSS理论。

基本概念

标准盒模型：总width/height=width/height+padding+border+margin;
其中：width/height=content的宽/高
怪异盒模型（IE盒模型）：总width/height+width/height+margin;
其中：width/height=content的宽/高+padding+border

    /* 设置当前盒子为 标准盒模型（默认） */
    box-sizing: content-box;
    /* 设置当前盒子为 IE盒模型 */
    box-sizing: border-box;

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

JS设置dom元素的宽高样式（一般有三种方法）：

内联样式
style标签
通过link标签引入

JS获取对应宽高（方法有如下4个）：

通过DOM节点的 style 样式获取
dom.style.width/height;
缺点：通过这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式。
IE独有
dom.currentStyle.width/height;
获取到的是运行完之后的宽高（三种css样式都可以获取）。但这种方式只有IE独有。
通用型
window.getComputedStyle(dom).width/height;
方式三和方式二一样。只不过，方式三能兼容 Chrome、火狐。是通用型方式。
dom.getBoundingClientRect().width/height/top/left;
拿到的是123中渲染以后的样式（同2），还可以计算元素的绝对位置(距离视口viewport左顶点的距离)。

margin塌陷/margin重叠

概念

在CSS中，两个或多个毗邻的普通流（我们常说的文档流可以分为定位流、浮动流和普通流三种）中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。
深入理解CSS外边距折叠（Margin Collapse）

水平方向没有塌陷现象，margin是可以叠加的；
浮动、inline-block或绝对定位的margin，不会和垂直方向上其他margin折叠；
创建了块级格式化上下文元素，不会和其子元素margin折叠；

外边距叠加存在的两种情况

一是父子外边距叠加；二是兄弟外边距叠加。

盒子的top margin和它第一个普通流子元素的top margin；
盒子的bottom margin和它下一个普通流兄弟的top margin；
盒子的bottom margin和它父元素的bottom margin；
盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素。

如何避免

其实只要破坏上面讲到的四个条件中的任何一个即可：毗邻、两个或多个、普通流和垂直方向。

浮动元素不会与任何元素发生叠加，也包括它的子元素；
创建了BFC的元素不会和它的子元素发生外边距叠加；
绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素；
inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素；
普通流中的块级元素的margin-bottom永远和它相邻的下一个块级元素的margin-top叠加，除非相邻的兄弟元素clear；
普通流中的块级元素（没有border-top、没有padding-top）的margin-top和它的第一个普通流中的子元素（没有clear）发生margin-top叠加；
普通流中的块级元素（height为auto、min-height为0、没有border-bottom、没有padding-bottom）和它的最后一个普通流中的子元素（没有自身发生margin叠加或clear）发生margin-bottom叠加；
如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素，那么它自身的外边距会发生叠加。