css--盒子模型和层叠关系

最新推荐文章于 2023-02-26 10:30:57 发布

原创最新推荐文章于 2023-02-26 10:30:57 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #盒子模型

css 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了CSS中的盒子模型，包括W3C标准盒子模型与IE的差异，以及CSS3中的box-sizing属性。此外，还详细阐述了层叠顺序（stacking level）和层叠上下文（stacking context）的概念，讲解了z-index的工作原理，以及如何创建和理解层叠上下文。

层叠样式表(英文全称：Cascading Style Sheets)

1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

1.1分类：IE盒子模型和标准W3C盒子模型

1.2盒子模型：content、padding、border、margin

1.3区别

W3C盒子模型中：元素的width=content的宽度

IE盒子模型中：元素的width=content+padding+border

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，
那么这个盒子模型占用的宽度为：20 * 2+10 * 2+10 * 2+200=280px;
高度：20 * 2+10 * 2+20 * 2+50=130px;
盒子的实际宽度大小为:10 * 2+10 * 2+200=240px;
实际高度：10 * 2+10* 2+50=90px;

用ie的盒子模型解释：盒子在网页中占据的大小为20*2+200=240px; 高：20 * 2+50=90px;

box-sizing–border-box 和 content-box

box-sizing: content-box|border-box|inherit;

我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。

（1） content-box(默认是content-box)
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

//元素宽度是250px
.test1{  
    box-sizing:content-box;  
    width:200px;  
    padding:10px;  
    border:15px solid #eee;  
}

（2）border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

//元素宽度就是200px
.test1{  
    box-sizing:border-box;  
    width:200px;  
    padding:10px;  
    border:15px solid #eee;  
}

2.层叠顺序（stacking level）和层叠上下文（stacking context）

控制元素的层级
1.z-index
2.层叠上下文
3.层叠水平(决定一个层叠上下文元素的层叠顺序)

z-index

–为整数则会创建新的层叠上下文，auto不创建新的层叠上下文

1.auto，默认值。当设置为auto的时候，当前元素的层叠级数是0，同时这个盒不会创建新的层级上下文（除非是根元素，即）；
2.。指示层叠级数，可以使负值，同时无论是什么值，都会创建一个新的层叠上下文；
3.inherit。父元素继承

z-index只在定位元素（position=static除外，因为元素默认就是static，相当于没用position样式）中作用

.top{
    width: 200px;
    height: 200px;
    background: black;
    z-index: 100;//虽然加了z-index，但是还是bottom覆盖top，因为z-index只在定位元素中起作用
}
.bottom{
    width: 200px;
    height: 200px;
    background: red;
    margin-top: -100px;
}
<div class="top"></div>
<div class="bottom"></div>

绝对定位元素覆盖普通元素的原因

元素一旦成为定位元素，其z-index就会自动生效，此时其z-index就是默认的auto，也就是0级别，根据上面的层叠顺序表，就会覆盖inline或block或float元素。

著名的7阶层叠水平–可以减少z-index的使用

层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则；

1.层叠上下文元素的边框和背景色
2.拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
3.正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
4.无 position 定位（static除外）的 float 浮动元素
5.正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
6.拥有 z-index:0 /auto的子堆叠上下文元素以及“positioned”且层叠级数为0的后代元素；
7.拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

规则有点多，但简单说，就是父元素会先绘制，接着是z-index为负值的子元素，然后是“non-positioned”元素，最后是按照层叠级数从0开始逐级绘制（这样说比较简单，省略了大量细节，因此并不是很准确）。如果层级相同，则按照元素在DOM树中的顺序来进行绘制。

例子1：
其中DIV#1和DIV#4是粉色框，position设置为absolute； DIV#2和DIV#3是粉色框，position设置为relative； DIV#5是黄色框，position为设置，默认static； <body> <div id="absdiv1">DIV #1</div> <div id="reldiv1">DIV #2</div> <div id="reldiv2">DIV #3</div> <div id="absdiv2">DIV #4</div> <div id="normdiv">DIV #5</div> </body>
层叠的效果div5肯定是在最下面。但是
是浏览器在解析HTML的时候仍然是按照HTML文档流的顺序来解析的，实际的绘制顺序仍然是DIV#1->DIV#2->DIV#3->DIV#4->DIV#5。
只不过，要绘DIV#5的时候，会对影响到的元素进行重新绘制，
其渲染的效果看上去的顺序是DIV#5->DIV#1->DIV#2->DIV#3->DIV#4，将DIV#5提到了最前。

例子2：—上面的比较是基于两个 div 都没有形成堆叠上下文这个为基础的
“`

#divA display:inline-block

#divB float:left

.container{
position:relative;
background:#ddd;
}
.container > div{
width:200px;
height:200px;
}
.float{
float:left;
background-color:deeppink;
}
.inline-block{
display:inline-block;
background-color:yellowgreen;
margin-left:-100px;
}
“`