css简单布局总结 文档流与盒子模型。

文档流

网页本身是一个多层的结构,一层压着一层,通过css可以分别为每一层设置样式。
用户只能看到最上面一层(类似ps图层),这些图层,最底下的一层称为文档流。文档流是网页的基础。我们所创建的元素默认在文档流中进行排列
因此我们可以把元素分为两个状态,在文档流中和不在文档流中(脱离文档流),一个元素在文档流和不在文档流的状况不一样
元素在文档流中的特点:
块元素块元素在页面中总会独占一行,块元素在页面中自上向下排列。默认宽度是父元素的全部,会把父元素塞满,默认高度是内容(子元素)的高度。被撑大了
行内元素行内元素不会独占页面一行,只占自身内容大小。行内元素在页面中自左向右水平排列,如果一行之中不能容纳下所有的行内元素。则元素会自动换到第二行继续自左向右排列。行内元素默认宽度和高度都是被内容撑开的

盒子模型

盒子模型简述

css将页面中的所有元素都设置为了一个矩形的盒子,将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆到不同的位置。
每一个元素都是矩形,每一个盒子都由以下几个部分组成:
内容区(content)内边距(padding)边框(border)外边距(margin)
2022411-04
内容区:元素中所有的子元素和文本都在内容区排列,内容区由width height两个属性来设置。

盒子模型-边框

边框属于盒子,边框里边属于盒子内部,边框外属于盒子外部。要设置边框,至少且必须设置3个样式
边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style。
注:边框不属于内容区,边框会让盒子变大。
border-width一般有默认值3像素,可以用来指定4个方向的边框的宽度。
border-width:10px 20px 30px 40px;四个值分别为上右下左。三个值是上,左右,下。两个值是上下,左右。
除了border-width外还有border-xxx-width(border-color,border-style同样也有)
xxx是top right bottom left。用来指定某一个边的宽度。
border-color用来指定边框的颜色,同样可以分别指定四个边的边框,规则和border-width一样。
border-color:red yellow green blue;
border-color也可以省略,如果没有border-color则优先寻找兄弟元素color,如果没color则默认黑色。
border-style指定边框的样式,同样可以分别指定四个边的边框,规则的border-width一样。
四个常用值:solid表示实线,dotted表示点状虚线,dashed表示线状虚线 double表示双线。
注:color和width有默认值但solid没有默认值。
border简写属性,通过概述可以同时设置边框的相关样式并且没有顺序要求
border:10px orange solid;
除了border外还有四个border-xxx(top right bottom left),这些只指定一个边框。

盒子模型-内边距

内容区和边框之间的距离是内边距。一共有四个方向的内边距。
padding-xxx(top right bottom left)
注:内边距的设置会影响盒子的大小,背景颜色会延伸到内边距上。
一个盒子的可见框的大小,由内容区 内边距和边框共同决定。计算盒子大小时,需要三个区域加到一起计算。
padding内边距的简写属性,可以同时指定四个方向的内边距,规则和border-width一样。

盒子模型-外边距

外边距不会影响盒子可见框的大小,但外边距会影响盒子的位置。一共有四个方向的外边距:
margin-xxx(top right bottom left)
元素在页面中是按照自左向右,自上向下的顺序排列的,所以设置的是左和上外边距时,会移动元素自身,而设置其他(右下)则会移动其他元素。
margin也可以设置负值如果设置负值则元素会向相反方向移动,如果是左上则会出屏幕,右下则其他盒子可能会进入。
margin-right默认情况下设置不会产生任何效果。(原因见盒子模型-水平方向布局)
margin的简写属性可以同时设置四个方向的外边距,用法和padding一样,
注:margin也会影响盒子实际占用空间大小。

盒子模型-水平方向的布局

元素在其父元素中水平方向的位置由已下几个属性共同决定。
margin-left,border-left,padding-left,width,padding-right,border-right,margin-right。
一个元素在其父元素中,水平布局必须满足以上的值相加。其总和等于其父元素内容区的宽度(必须满足)
如果相加结果使等式不成立(称为过度约束),则等式会自动调整
如果所有值没有auto的情况,则浏览器会自动调整margin-right值使等式满足
这7个值中,有3个值可以设置auto,是width,margin-right,margin-laft。如果某个值为auto,则会自动调整为auto的那个值以使等式成立。width的值默认为auto。
如果将一个宽度和外边距设置为auto,宽度会调整到最大,外边距自动为0。
如果将两个外边距设为auto,宽度固定值,则外边距平分,我们经常用这个特点来使一个元素在其父元素水平居中。

div{
   width:xxxpx;
   margin: 0 auto;
}

注:如果上面等式左边值大于右边值,margin-right会变成负数。

盒子模型-外边距的折叠

只有相邻的垂直方向外边距会发生折叠现象。分为兄弟元素之间和父子元素之间。
兄弟元素:
兄弟元素之间的相邻垂直外边距会取两者之间的最大值。(两者都是正的)如果相邻的外边距一正一负,则取两者的和。如果相邻的外边距都是负值,则取两者中绝对值大的。
注:兄弟元素之间的外边距的重叠,对于开发是有利的,所以不需要进行处理。
父子元素:
父子元素之间的相邻外边距,子元素的会传递给父元素(上外边距)父子外边距的折叠会影响到页面的布局,需要处理。
解决方案(临时):1.用padding 2.加边框border-top.(以后会有其他方法)

盒子模型-行内元素

行内元素不支持设置宽度和高度,行内元素可以设置padding,border,margin。但垂直方向不会影响页面布局。
注:水平方向margin不会合并
display用来设置元素现实的类型。
可选值:inline 将元素设置为行内元素 block 将元素设置为块元素
inline-block 将元素设置为行内块元素(既可以设置宽度高度又不会独占一行,虽然包含优点但同样有缺点)。
table 将元素设置为表格 none 使元素不在页面中显示。
visibility用来设置网页的显示状态
可选值:visible 默认值 元素在页面中正常显示 hidden元素在页面中不显示但占位置。
注:display:none;的隐藏就相当于抹去它的存在。visibility:hidden;仍然占据页面中的位置。

盒子模型-盒子大小

默认情况下,盒子可见框的大小由内容区,内边距和边框共同决定。
box-sizing用来设置盒子尺寸的计算方式。
可选值:content-box 默认值,宽度和高度用来设置内容区的大小。
border-box 宽度和高度用来设置整个盒子可见框的大小,width和height的值是内容区,内边距和边框的总大小。

轮廓和圆角

outline用来设置轮廓线,用法和border一样,轮廓不会影响到可见框的大小
阴影box-shadow:用来设置元素的阴影效果,阴影不会影响页面布局默认情况下,阴影大小和元素一样大,且在元素下方。
box-shadow:10px 20px 20px orange;
第一个值 水平偏移量 设置阴影水平位置,正值向右,负值向左。
第二个值 垂直偏移量 设置阴影垂直位置,正值向下,负值向上。
第三个值 阴影的模糊半径。 第四个值 阴影的颜色
border-radius:用来设置圆角,圆角的半径大小,border-xxx-xxx-radius(top right bottom left)
border-top-left-radiu:50px 100px;(第一个值为水平方向,第二个值为竖直方向)
border-radius:10px 20px 30px 40px(左上 右上 左下 右下)。三个值(左上 右上/左下 右下)
两个值(左上/右下 右上/左下)。一个值就是四边一样。
border-radius:20px/40px;(四个椭圆 水平20 垂直40)
将元素设置为圆形:border-radius:50px;(height:100px;width:100px;)

浏览器的默认样式

通常情况下,浏览器会为元素设置一些默认样式,默认样式的存在会影响页面的布局。一般情况下,编写网页时必须要去除浏览器的默认样式。(pc端)
在浏览器用f12打开开发者工具,查看元素是否有默认值,之后改margin,改padding等等即可。
ul前边的点可以通过list-style属性。list-style:none;用于去除列表前的符号。
最简单的去除方法*{margin:0;padding:0;}不过这么去,有些元素会有残留(漏网之鱼)。
一般会引入一个重置样式表。注:因为引入的时候从上往下引入,所以重置样式表要放在最上面。
下面提供一个reset.css(网上找的)

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video{
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   font-weight: normal;
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section{
   display: block;
 }
 ol, ul, li{
   list-style: none;
 }
 blockquote, q{
   quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after{
   content: '';
   content: none;
 }
 table{
   border-collapse: collapse;
   border-spacing: 0;
 }
  
 /* custom */
 a{
   color: #7e8c8d;
   text-decoration: none;
   -webkit-backface-visibility: hidden;
 }
 ::-webkit-scrollbar{
   width: 5px;
   height: 5px;
 }
 ::-webkit-scrollbar-track-piece{
   background-color: rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:vertical{
   height: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:horizontal{
   width: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 }
 html, body{
   width: 100%;
   font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
 }
 body{
   line-height: 1;
   -webkit-text-size-adjust: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 html{
   overflow-y: scroll;
 }
  
 /*清除浮动*/
 .clearfix:before,
 .clearfix:after{
   content: " ";
   display: inline-block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
 .clearfix{
   *zoom: 1;
 }
  
 /*隐藏*/
 .dn{
   display: none;
 }

还有一个normalize.css用于对默认样式进行统一。

/*官网:http://necolas.github.io/normalize.css/ (目前v8.0.1) */

/* 译者:无数  欢迎加入全栈技术开发QQ群 300567032 */

/*!normalize.css v8.0.1 | MIT许可证| github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 1. 修正所有浏览器中的行高.
 * 2. 防止在iOS中切换横竖屏时调整字体大小.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 * 删除所有浏览器body的margin值。
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 * 在IE中保持 `main` 元素的一致性。
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 * 修正`section`和`article`中`h1`元素的font-size和margin值
 * (在chrome、Firefox、Safari中)
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 1. 修正Firefox的box-sizing
 * 2. Show the overflow in Edge and IE.
 * 2. 在Edge和IE中显示溢出
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 1. 修正所有浏览器中字体大小的继承和缩放。
 * 2. Correct the odd `em` font sizing in all browsers.
 * 2. 修正所有浏览器中奇怪的`em`字体大小。
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics:文本级别的语义
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 * 删除IE 10中活跃链接的灰色背景。
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 1. 移除Chrome 57- 的border-bottom
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 * 2. 在Chrome、Edge、IE、Opera和Safari中添加正确的text-decoration。
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 * 在Chrome、Edge和Safari中添加正确的font-weight
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 1. 修正所有浏览器中字体大小的继承和缩放。
 * 2. Correct the odd `em` font sizing in all browsers.
 * 2. 修正所有浏览器中奇怪的`em`字体大小。
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 * 在所有浏览器中添加正确的字体大小
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 * 防止`sub`和`sup`元素影响所有浏览器的行高。
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content:嵌入的内容
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 * 删除IE 10中链接(`a`)内`img`的边框。
 */

img {
  border-style: none;
}

/* Forms 表单
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 1. 更改所有浏览器的字体样式
 * 2. Remove the margin in Firefox and Safari.
 * 2. 删除Firefox和Safari的margin
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 在IE中显示溢出
 * 1. Show the overflow in Edge.
 * 1. 在Edge中显示溢出
 */

button,
input { /* 1 */
  overflow: visible;
}

浮动

通过浮动可以使一个元素使其向父元素的左侧或右侧移动.
使用float属性来设置元素的浮动
可选值:none 默认值,元素不浮动。left 元素向左浮动 right 向右浮动。
:元素设置浮动以后,水平布局的等式不需要强制成立。元素设置浮动以后,会完全从文档流中脱离,不在占用文档流的位置。所以元素下边还在文档流中的元素会自动向上移动。
浮动目前来讲,主要作用让页面中元素水平排列,通过浮动可以制作一些水平方向的布局。

浮动的特点

1.浮动元素会完全脱离文档流,不在占据文档流中的位置。2.设置浮动以后元素会向父元素的左侧或右侧移动。
3.浮动元素默认不会从父元素中移出。4.浮动元素向左向右移动时不会超过他前边的其他的浮动元素。
5.浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移。
6.浮动元素不会超过他上边的浮动的兄弟元素,最多最多就是和它一样高(不会比上边的高)。
浮动元素不会盖住文字:文字会自动环绕在浮动元素的周围。所以我们可以利用浮动来设置文字环绕图片的效果。
元素从文档流中脱离后,元素的一些特点会发生变化。

脱离文档流的特点:

块元素:1.不再独占一行。2.宽度和高度默认都被内容撑开
行内元素:行内元素脱离文档流就会变成块元素,特点和块元素一样
简单地说就是,脱离文档流以后,不需要区分块和行内元素了。

高度塌陷和BFC

在浮动布局中,父元素的高度默认是被子元素撑开的
形成原因:当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离,将会无法撑起父元素的高度,导致父元素的高度丢失。父元素高度丢失以后,其下的元素会自动上移,导致页面布局混乱。
高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须进行处理。

BFC

BFC(block formatting context)BFC是css中的一个隐含的属性,可以为一个元素开启BFC。
开启BFC该元素会变成一个独立的布局区
元素开启BFC之后
1. 开启BFC的元素不会被浮动元素所覆盖
2. 开启BFC的元素子元素和父元素的外边距不会重叠。
3. 开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式开启BFC:(注:所有BFC开启都会有副作用,要找副作用小的(影响小的)
1. 设置元素的浮动(不推荐)
2. 将元素设置为行内块元素(不推荐)
3. 将元素的overflow设置为一个非visible的值。(常用的方式)
为元素设置overflow:hidden;开启其BFC以使其包含浮动元素。

clear属性

如果我们不希望某个元素因为其他元素浮动的影响而改变位置,可以通过clear属性来清除浮动元素对当前元素所产生的影响。
clear 作用:清除浮动元素对当前元素产生的影响。
可选值:left 清除左侧浮动元素对当前元素所产生的影响。right 清除右侧浮动元素对当前元素产生的影响 。both是清除两侧中最大影响的那侧。
:设置清除浮动以后,其本质是浏览器会自动为元素添加一个上外边距,以使其位置不会受到其他元素的影响。

after伪类

通过在父元素的后面添加一个after,再使用clear:both;来添加上边距达到解决高度塌陷的方法。(非常常用的方法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            border:10px red solid;
            /* 添加一个边框,让box1的大小看的到 */
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: #66ccff;
            float:left;
            /* 设置一个宽高100向左浮动的子元素 */
        }
        .box1::after{
            content:'';
            /* 在box1的最后添加空符号 */
            display:block;
            /* 因为content本身是行内元素,所以要转换为块元素才会生效 */
            clear: both;
            /* both选取之中最高的 */
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

clearfix

解决外边距重叠问题,clearfix只是一个类名,display:table;既可以解决高度塌陷,也可以解决外边距重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            border:10px red solid;
            /* 添加一个边框,让box1的大小看的到 */
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: #66ccff;
            float:left;
            /* 设置一个宽高100向左浮动的子元素 */
        }
        .clearfix::after,.clearfix::before{
            content:'';
            /* 在clearfix的最后添加空 */
            display:table;
            /* table将元素设置为表格 */
            clear: both;
            /* both选取之中最高的 */
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

通过定位可以将元素摆到页面中的任意位置,使用position属性来定位。
可选值:static默认值,元素是静止的没有开启定位。
relative 开启元素的相对定位。 absolute 开启元素的绝对定位。
fixed 开启元素的固定定位。 sticky 开启元素的粘滞定位。

相对定位

当元素的position属性设置为relatibe则开启了相对定位。
相对定位特点:1.元素开启相对定位以后,如果不设置偏移量,元素不会发生任何变化。
2.相对定位是参照元素在文档流中的位置进行定位的。
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流,不会改变元素的性质(块还是块,行内还是行内)。

偏移量(offset)

当元素开启了定位以后,可以通过偏移量来设置元素的位置。偏移量只会动自己
四个值(top right bottom left)
top定位元素和定位位置上边的距离,bottom定位置下边的距离。通常我们只用其中一个。
left定位元素和定位位置左边的距离,right定位元素和定位位置右边的距离。通常我们也只用其中一个。注:有负数。
例:top:100px; left:100px;

绝对定位

当元素的position属性值设置为absolute时,则开启了元素的绝对定位。
绝对定位的特点
1.开启绝对定位后,如果不设置偏移量元素的位置不会发生改变
2.开启绝对定位后,元素会从文档流中脱离。会改变元素的性质
3.绝对定位会使元素提升一个层级。
4.绝对定位元素是相对于其包含块进行定位的。

包含块:

普通元素(文档流)包含块就是离当前元素最近的祖先块元素
注:这里是祖先块元素,父元素是行内元素的时候,则不是父元素。

绝对定位的包含块:

包含块就是最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位,则根元素就是它的包含块。(html)
当元素开启绝对定位时,水平方向的布局等式需要添加left+right两个值,规则和之前一样,只是多添加了两个值。如果9个值没有auto,则自动调整right值以使等式满足。如果有auto则自动调auto使等式满足。
水平布局:此时可设置auto的值有margin width left right
注:因为left和right的值默认为auto,所以如果不知道left和right值时,等式不满足,会自动调整left和right。

垂直方向布局:

垂直方向布局的等式也必须满足
top+margin-top/bottom+padding-top/bottom+border-top/bottom+height=包含块的高度
因此,我们可以用这个特点来垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
            /* 开启相对定位让box1成为box2的包含块 */
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;

            margin-top: auto;
            margin-bottom: auto;
            top: 0;
            bottom: 0;
            /* 因为top和bottom的默认值为auto,所以这里一定要设置为0 */
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            /* 开启水平居中 */
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>
</html>

固定定位:

将元素的position属性设置为fixed则开启了元素的固定定位。
固定定位也是一种绝对定位,所以固定定位大部分特点和绝对定位一样。
如:脱离文档流,改变元素性质,提高层级等等,唯一不同的是,固定定位永远参与浏览器的视口进行定位。网页旁边的小广告
固定定位的元素不会随网页的滚动条滚动。

粘滞定位

当元素的position属性社会为sticky属性时,则开启了元素的粘滞定位。
粘滞定位和相对定位的特点基本一致,不同的是粘滞定位可以在元素到达某个位置时将其固定
:该定位的兼容性并不是很好。某I开头的浏览器

元素的层级

对于开启了定位的元素,可以通过z-index来指定元素的层级。z-index需要一个整数作为层数,值越大元素层级越高。元素层级越高越先显示。
如果元素的层级一样,则优先选择靠下的元素。
祖先元素的层级再高也不会盖住后代元素。

Q.E.D.