CSS-包含块

古城微笑少年丶 2022-05-24 03:49 145阅读 0赞

包含块:是视觉格式化模型的一个重要概念，它与盒模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

可以把包含块理解成一个参考系。

那么怎么确定包含块的所属关系了，简单的说谁是谁的包含块，谁是谁的参照系。

1：根元素所在的包含块被成为初始包含块，在xhtml中根元素是html,对于连续媒体设备，初始包含块的大小等于视口的大小（这个与后面的display:fixed有关系）。对于分页媒体，初始包含块是页面区域。初始包含块的direction属性与根元素相同，direction属性决定了块的书写方法，布局方向还有水平溢出方法。

2：对于设置有position属性的元素，若position:fixed那么包含块由视口建立。

html body{
        padding:0px;
        margin:0px;
    }
    .head{
        border:1px solid red;
        width:100px;
        height:100px;
        /*没有开启 position*/
       /*加上这句话 对下面三个div没有影响 position: relative;*/
        top :100px;
        left:100px;
    }
    .test1{
        border:1px solid red;
        position :fixed;
        top:30px;
        left:30px;
        width:50px;
        height:50px;
    }
    .test2{
        border:1px solid green;
        position :fixed;
        top:20px;
        left:20px;
        width:50px;
        height:50px;
    }
    
    .test3{
        border:1px solid black;
        position :fixed;
        top:10px;
        left:10px;
        width:50px;
        height:50px;
    }

![70][]![70 1][]三个div和它的父级元素没有撒关系，position:fixed绝对定位，包含块为视口。

3：对于设置有position属性的元素，若position:relative或者static那么包含块为最近的块级祖先元素的内容区域（这里需要特别注意咯）

html body{
        padding:0px;
        margin:0px;
    }
    .head{
        border:1px solid red;
        width:100px;
        height:100px;
        /*注意加上这句话的区别 padding-top:10px;*/
    }
    .test1{
        border:1px solid red;
        position :relative;
        top:0px;
        left:30px;
        width:50px;
        height:50px;
    }

![70 2][]仅仅加上padding-top:10px; ![70 3][]应该很明显了，是内容区域咯。（颜色是谷歌浏览器查看元素带的）

3：对于设置有position属性的元素，若position:absolute那么包含块由离此元素最近的设置有position属性（但非static)的祖先元素

如果祖先元素是块级元素，那么包含块是padding的ege围成的区域，和上面的有所不同。

html body{
        padding:0px;
        margin:0px;
    }
    .head{
        border:1px solid red;
        width:100px;
        height:100px;
        position:relative;
        top:0px;
        left:0px;
        /*注意加上这句话的区别 padding-top:10px;*/
        
    }
    .test1{
        border:1px solid red;
        position :absolute;
        top:0px;
        left:30px;
        width:50px;
        height:50px;
    }

![70 4][]加上padding-top:10px; ![70 5][]位置没有改变了，只有大的div长高10px。

如果祖先元素是内联元素，那么情况变得复杂一下，这个取决与它的direction属性

如果 direction 是 ltr，祖先产生的第一个盒子的上、左内容边界是 包含块 的上方和左方，祖先的最后一个盒子的下、右内容边界是  包含块 的下方和右方

看一下如下代码：

![70 6][]span里面文本内容比较多，就不给html代码了，dom结构是这样的

html body{
        padding:0px;
        margin:0px;
    }
    .head{
        margin: 0px;
        line-height: 1.5em;
        height: 3em;
        word-break:break-all;
        background:green;
    }
    .test1{
        position :relative;
    }
    .inner{
        position:absolute;
        bottom:0px;
        right:0px;
        color:red;
    }

![70 7][]

如果把bottom:0px;改成top:0px;

![70 8][]

体会一下就可以了，包含块就是左上角到下面的3333右下角。

如果 direction 是从右到左，祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方，祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。

html body{
        padding:0px;
        margin:0px;
    }
    .head{
        margin: 0px;
        line-height: 1.5em;
        height: 3em;
        direction:rtl;
        word-break:break-all;
        background:green;
    }
    .test1{
        position :relative;
    }
    .inner{
        position:absolute;
       bottom:0px;
        left:0px;
        color:red;
    }

![70 9][]前面一些没有截取，太长了。看一下就明白了吧。

如果不存在这样的祖先元素，那么就以根元素的内容边界为包含块

[70]: https://img-blog.csdn.net/2018052009162781?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220524/0bb23e60ba164dc2a25517eb6bed3dac.png
[70 2]: https://img-blog.csdn.net/20180520093917534?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220524/a450ab9b6495460d8aa6fce9aacab835.png
[70 4]: https://img-blog.csdn.net/20180520095327218?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: /images/20220524/2b84e2b4daf5465281e58ff41adcfc13.png
[70 6]: /images/20220524/ae988d5ecff347e096c655f85c5ecbca.png
[70 7]: /images/20220524/fcabd6b796e34b3da1a2d123b76a9af9.png
[70 8]: /images/20220524/c25fc6bec19247a2a8ae9b9fec81f9c6.png
[70 9]: /images/20220524/4e441e6cafbe4a9cb2bbd367233b716c.png