一、CSS简介
（1）CSS是什么
- Cascading Style Sheets 层叠样式表
- 用来定义页面元素的样式：
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
- 可以通过标签的属性来设置CSS代码：
- 通过style属性来为元素设置样式，属性值就是CSS样式；
- CSS样式也是一个名值对结构，一个样式名对应一个样式值；
<p style="color:red; font-size:50px;">人民有信仰</p>
<p style="color:aqua; font-size:20px;">民族有希望</p>
（2）CSS的使用方式
内联样式（行内样式）
<p style="color:black;">不忘初心，牢记使命</p>
- 将样式编写到标签的style属性中，涉及到优先级的问题且HTML与CSS相结合，开发中不推荐使用这种方式
内部样式表（嵌入）
- 将样式编写到head标签内的style标签里；
- 通过选择器可以同时为多个元素设置样式；
外部样式表（外链）
- 可以将CSS样式编写到外部的CSS文件中，文件以.css的后缀命名；
- 通过link标签将外部CSS文件引入到当前页面中，link标签的rel属性的属性值设为"stylesheet"，href属性设置为CSS文件的路径（一般为相对路径）；
- 外部样式表可以在不同的页面中进行复用，并且将HTML和CSS完全分离；
- 引用外部样式表之后还是可以嵌入内部样式表
- 语法：
<link rel="stylesheet" href="./style.css">
（3）CSS基本语法
- 选择器 声明块
- 选择器：用来选中要设置样式的元素；
- 声明块：用来为选择器选中的元素来设置样式（{}中包括的所有代码）；
- 声明块中放置一个个声明；
- 声明是一个名值对结构，以;（英文的）结尾；
- 注释：/CSS注释内容/
（4）CSS的布局技术
布局相关技术：
- 常规流：行级 块级 表格布局 FlexBox Grid布局
- 浮动
- 定位
二、CSS选择器
- 选择器：选择器用来选中页面中的元素，从而为其设置样式；
- 使用多种方式选择元素：
- 通配选择器（*）；
- 按标签名、类名或id名：元素选择器、类选择器、id选择器；
- 按属性：属性选择器；
- 按DOM树中的位置：关系选择器、伪元素选择器；
- 组合选择器；
（1）通配选择器
（2）元素选择器
- 作用：根据标签名选中一组元素；
- 语法：标签名 {样式名:样式值;}
- 如：div {}, p {}, h1 {}
（3）id选择器
- 作用：根据元素的id属性选中一个元素；
- 语法: #id属性名 {样式名:样式值;}
- 如: #apple {font-size:16px;}表示将id属性名为apple的标签字体大小设置为16px
<p id="apple">苹果</p>
（4）类选择器
- 作用：根据元素的class属性选中一组元素；
- 语法：.class属性名 {样式名:样式值;}
- 将元素名和class连着写时，表示元素必须满足所有的选择器才会被选中；
（5）属性选择器
- 可以根据元素的属性选中页面中的元素；
- [属性名]：选中具有某个属性的元素；
- 标签名[属性名]：选中具有某个属性的元素；
- [属性名=属性值]：选中属性值为指定值的元素；
- [属性名*=属性值]：选中属性值中含有指定内容的元素；
- [属性名^=属性值]：选中属性值以指定内容开始的元素；
- [属性名$=属性值]：选中属性值以指定内容结束的元素；
（6）关系选择器
- 父元素：直接包含子元素的元素是父元素；
- 子元素：直接被父元素包含的元素是子元素；
- 祖先元素：直接或间接包含后代元素的元素就是祖先元素，父元素也是祖先元素；
- 后代元素：直接或间接被祖先元素包含的元素就是后代元素，子元素也是后代元素；
- 兄弟元素：拥有同一个父元素的元素就是兄弟元素；
- 子元素选择器:选中指定元素的子元素
- 语法：父元素 > 子元素
- 后代元素选择器:选中指定元素的后代元素
- 语法：祖先元素 后代元素
- 兄弟元素选择器:选中指定元素的后边的兄弟元素
- 语法：兄 + 弟:选中后一个兄弟元素；
兄 ~ 弟:选中后边所有的兄弟元素；
- 语法：兄 + 弟:选中后一个兄弟元素；
（7）组合选择器
- 直接组合:
- 语法：AB
- 同时满足选择器A和B
- 示例：input.class1
- 亲子组合:
- 语法：A > B
- A的子元素B
- 示例：div > span
- 后代组合:
- 语法：A B
- A的后代元素B
- 示例：div span
- 兄弟组合:
- 语法：A + B
- A后边的第一个兄弟元素B
- 示例：div + span
- 语法：A ~ B
- A后边的所有兄弟元素B
- 示例：div ~ span
（8）选择器组
- 作用：可以同时为多个选择器对应的元素设置同样的样式；
- 语法：选择器1，选择器2，选择器n {样式名:样式值;}
（9）伪类选择器
- 伪类（pseudo-classes）
- 表示元素的特殊状态或在DOM树中的结构，包括动态伪类、结构伪类两种；
- 特殊状态如一个链接是否被访问、一个按钮是否被点击、鼠标是否移入到某个元素中等；
- DOM树中的结构如某一类元素中的第一个元素，根元素等；
- 伪类选择器
- 不是基于标签和属性来定位元素，而是通过状态或者其在DOM树中的结构来选择元素；
- 伪类选择器以:开头；
- 动态伪类
1.动态伪类是根据元素所处的状态来选择元素
2.常用伪类：
:link表示没有访问过的超链接
:visited表示访问过的超链接
:hover表示鼠标移入的元素
:active表示鼠标选中点击的元素
:focus表示选择获得焦点的输入字段
3.伪类名称对大小写不敏感 - 结构伪类
:root选中页面的根元素（html）E:empty选中页面中为空的E元素（p:empty选择页面中为空的p元素）E:first-child选择父元素中，第一个元素为E的所有E元素E:last-child选择父元素中，最后一个子元素为E的所有E元素E:nth-child(n)选择父元素第n个子元素为E的所有E元素E:nth-last-child(n)选择父元素倒数第n个元素为E的所有E元素- n 表示0到无穷大
- 2n 表示偶数
- 2n+1 表示奇数
- odd 表示奇数
- even 表示偶数
E:first-of-type选中父元素所有的子元素E中第一个E元素E:last-of-type选中父元素所有的子元素E中最后一个E元素E:nth-of-type(n)选中父元素所有子元素E中第n个E元素E:nth-last-of-type(n)选中父元素所有的子元素E中的倒数第n个E元素E:only-child选中E元素，其父元素有且仅有唯一子元素，且该子元素为E时才被选择（E元素没有兄弟元素）；E:only-of-type选中E元素，其父元素可以有多个子元素，但是只有一个E元素时该E元素被选中（E元素所在的同级元素中没有其他的E元素）
- 伪元素选择器
- 伪元素用来表示网页中的特殊位置，使用::开头
::first-letter第一个字符::first-line第一个行::selection选中的内容（比如网页中复制文本时选中的文字会变高亮）::before标签的开始位置::after标签的结束位置
三、CSS样式
（1）覆盖
- 下面设置的样式会覆盖上面的相同属性的样式
（2）继承
- 当我们为一个元素设置样式时，其后代元素也会设置上相同的样式；
- 继承的存在是简化了CSS代码的编写；
- 并非所有的样式都会继承，如布局（元素大小、位置等）和背景相关的样式都不会被继承；
- 当后代元素被显式的指定样式时，继承样式失效；
- 通过查看MDN文档可确认CSS样式是否能被继承。
（3）优先级
- 当使用不同的选择器选中相同的元素，并为其相同的样式设置不同的值时就会发生样式的冲突，此时，哪个样式生效由选择器的优先级决定。
- 选择器的优先级：
- !important设置的样式优先级最高（慎用）
- 内联样式 1,0,0,0（慎用）
- id选择器 0,1,0,0
- 类和伪类 0,0,1,0
- 元素选择器 0,0,0,1
- 通配选择器 0,0,0,0
- 继承的样式没有优先级
- 比较选择器优先级时，需要将所有的选择器的优先级加到一起再和其他的选择器进行比较，优先级高的优先显示。
- 注意：
- 分组选择器优先级都是单独计算的；
- 优先级的计算不能跨越数量级；
- 如果两个选择器的优先级相同则采用覆盖原则优先显示下边的样式。
- 特殊：对于a超链接的伪类，虽然优先级相同，但必须按照一定的顺序设置样式，否则部分样式会失效。https://blog.csdn.net/wumenglu1018/article/details/54603109
（4）CSS属性书写顺序
建议CSS书写属性时遵循以下顺序：
- 布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
- 自身属性：width/height/margin/padding/border/background
- 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient
四、盒模型
（1）CSS常用的单位
1.长度单位
- px(像素)：显示屏通过一个一个会发光的小点构成的，每一个小点就是一个像素；
- %(百分比)：百分比会参照父元素的指定值来进行计算，会根据父元素属性的变化而变化；
- em：em是相对于当前元素字体而言的，常用于设置和字体相关的样式，1em等于当前元素文字的font-size值；
- rem：1rem等于当前页面的根元素的字体大小（font-size），常用于移动端的布局。
2.颜色单位
- 颜色名
- rgb值：RGB分别表示red、green、blue；
- rgb(value,value,value),如color:rgb(0,0,0);
- value为0-255、0%-100%之间的值；
- rgba值：分别表示red、green、blue、alpha；
- alpha表示透明度，取值0-1之间，1表示不透明，0表示全透明；
- 十六进制
- HSL和HSLA：HSL指色相，饱和度，亮度，A为透明度
（2）CSS中常用的样式
- white-space：（与空格有关的）
- nowrap:不换行（且多个空格在HTML中默认为一个空格）
- pre:保留所有效果（包括多个空格）
- pre-wrap:一行内显示不下时换行
- pre-line:自动吞并空格，保留换行
- 背景设置
- backgrounnd-color:背景颜色
- background-image:背景图片
- background-repeat:背景图片是否重复
- background-position:背景方位
- background-size:背景大小
- background-attachment:背景滚动
- 简写：
- background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
- 背景颜色半透明时只是让盒子背景颜色半透明，盒子里面的内容不受影响
写法：background: rgba(0,0,0,0.6);
（3）网页的布局
- 指将元素摆放到页面中的不同位置；
- 在对网页布局前，需要先确定好元素的大小；
- 要确定元素的大小就要先确定元素的形状；
（4）盒模型 (box model)
- 在网页中每一个元素都被设计成了一个矩形；
- 每一个矩形都由如下几个部分组成：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
- 一般来说，默认的盒模型实际占用空间计算模式为：
- 水平空间大小 = margin（左右）+ border（左右）+ padding（左右）+ width
- 垂直空间大小 = margin（上下）+ border（上下）+ padding（上下）+ height
1.边框
- 指定元素的边框宽度、颜色和样式
（1）三个样式：
- border-width 宽度
- 指定四个值，则分别为上 右 下 左；
- 指定三个值，则为上 左右 下；
- 指定两个值，则为上下 左右；
- 指定一个值，则同时指定上下左右；
- 除了border-width外，还有四个border-xxx-width用来分别指定四个边框的宽度，xxx可以是top right bottom left；
- border-style 样式
- solid 实线边框
- double 双线边框
- dotted 点状边框
- dashed 虚线边框
- 也可以分别指定四个方向的边框，规则同border-width
- border-color 颜色
- 可以分别指定四个边框的颜色，规则通border-width
（2）四个方向：
- border-top
- border-right
- border-bottom
- border-left
2.内容区
- 一个盒子最内部叫做内容区
- 内容区就是元素放“东西”的地方；
- 内容区的大小决定了一个盒子能够放东西的多少；
- 一个元素的子元素、文本、图片等内容都位于内容区；
- 默认情况下，width和height就是用来设置盒子内容区的大小的。（设置某属性值可以更改默认设置）
- 常见属性
- width
- 指定content box的宽度；
- 取值可以为长度、百分数、auto；
- 当指定值为auto时，由浏览器根据盒子的其它属性决定；
- 百分数是相对于父元素的content box宽度。
- height
- 指定content box的高度；
- 取值可以为长度、百分数、auto；
- 当指定值为auto时，实际高度由其内容的高度决定；
- 百分数是相对于父元素的content box高度；
- 父元素有指定的高度时，百分数才会生效。
- width
3.内边距
- 内容区和边框之间的距离称为内边距；
- 当使用百分数时，取值是其相对于父元素的宽度；
- 默认情况下内边距也会影响盒子可见框的大小；
- 四个方向：上 右 下 左，规则同border；
4.可见框
- 元素的可见框指元素可以被直接看见的区域；
- 一个元素的可见框大小由内容区、内边距和边框共同决定；
- 默认情况下，盒模型的可见框大小为：
- 水平空间大小 = border（左右）+ padding（左右）+ width
- 垂直空间大小 = border（上下）+ padding（上下）+ height
- box-sizing用来指定盒模型的计算方式
- 默认值：content-box，此时width和height用来设置内容区的大小；
- 可选值：border-box，此时width和height将被用来设置盒子可见框的大小；此时无法设置内容区大小，内容区的大小会自动调整使等式成立；
5.外边距
- 指定元素四个方向的外边距，即元素与其他元素的距离；
- 外边距有四个方向，四个外边距的默认值为0；
- 取值可以是长度、百分数（相对父元素宽度而言）、auto；
- margin可以为负值，如果设置负值则盒子会向相反的方向移动；
- 默认情况下，元素是靠左靠上排列的，所以当设置左和上外边距时，会影响到元素自身的位置，而当设置右和下外边距时，会影响到其他元素的位置。
水平方向的外边距
- 外边距不会影响可见框的大小，但会影响盒子的实际大小；
- 盒子实际大小 = 可见框大小（内容区+内边距+边框）+ 外边距；
- 子元素的实际宽度 = 可见框宽度 + 外边距宽度
- 当等式不能满足时，浏览器会自动调整相应值使得等式成立；
- 如果width是auto，左或(和)右外边距也为auto，则取值为auto的外边距自动设置为0；
- 让元素在其父元素中居中的方法： width有值，左右外边距都设置为auto，则浏览器会自动将左右外边距设置为一个相同的值；
垂直方向的外边距
- 如果width设置为auto，浏览器会使元素的宽度尽可能⼤；
- 如果height设置为auto，元素的高度会被内容撑开；
- width和height的默认值就是auto；
- margin-top和margin-bottom设置为auto，则浏览器会将其自动设置为0, 相当于省略它们不写;
- 如果父元素的高度为auto，则子元素的垂直外边距可以把父元素给撑开。
外边距的折叠
相邻垂直外边距会发生外边距的折叠
- 兄弟元素（不是问题）
兄弟元素间相邻的垂直外边距会取最⼤值 - 父子元素（是个问题）
父子元素间相邻的垂直外边距，子元素会传递给元素
（5）CSS中的盒子
• 浏览器会根据 DOM 树生成一系列盒子
• 摆放盒子 (Layout)
◼ 盒子尺⼨和类型
◼ 定位模式 (positioning scheme )
◼ 节点在 DOM 树中的位置
◼ 其它信息 (窗⼝⼤⼩、图片⼤⼩等)
- 行级盒子
- 行内元素不能设置宽度和高度，行内元素的内容区⼤⼩由内容的多少决定；
- 行内元素可以设置内边距、边框、外边距，但是垂直方向的内边距、边框和外边距不会影响到页面的布局；
（6）文档流（normal flow）
- 文档流是一种定位机制，我们所创建的元素在默认情况下都位于文档流中，但有一些特殊操作会使得元素脱离文档流；
- 文档流中的元素会有如下特点：
- 块元素
- 块元素在文档流中自上向下垂直排列；
- 块元素在文档流中默认宽度（auto）是父元素的全部；
- 块元素在文档流中默认高度（auto）是被内容撑开。
- 行内元素
- 行内元素在文档流中自左向右水平排列，如果一行内不足以容纳所有的行内元素，则会另起一行，继续自左向右水平排列；
- 行内元素在文档流中默认宽高度是被内容撑开（无法指定）。
（7）常见属性
overflow属性
- 子元素位于父元素的内容区中时，如果子元素的大小超过父元素，会导致子元素从父元素中溢出，可以通过overflow样式来设置父元素如何来处理溢出的内容
- 可选值：
- visible 默认值 不对溢出的内容做任何处理，直接在父元素外显示
- hidden 裁剪溢出内容不予显示
- scroll 生成垂直和水平双向的滚动条
- auto 根据需要来生成滚动条
display属性
- display属性可以用来设置元素的类型
- 可选值：
- none 元素在页面中不显示
- inline 元素显示为行内元素
- block 元素显示块元素，此时会独占一行
- inline-block 元素显示为行内块元素
- 既不会独占一行，也可以设置宽度和高度
- table 元素具有table标签的特点
- flow-root 元素会具有根元素html的特点
visibility属性
- 可以用来设置元素的可见性
- 可选值：
- visible 默认值，元素在页面中正常显示
- hidden 元素在页面中隐藏，但依然会占据网页的位置
outline属性
- 用来设置元素的轮廓，设置方式和border相同
- 不同点在于，边框是可见框的一部分，它会影响页面的布局，但轮廓不属于可见框，它就是元素的描边，轮廓不会影响到页面的布局（应用：QQ邮箱中的登录框去了轮廓）
border-radius属性
- 用来设置盒子的圆角，指定的是圆角半径，半径越大，角的弧度就越大；
- 当值是可见框大小的一半时，且可见框是一个正方形时，我们得到的就是一个正圆。
- 可选值：
border-top-left-radius: ; 左上⻆
border-top-right-radius: ; 右上⻆
border-bottom-right-radius: ; 右下⻆
border-bottom-left-radius: ; 左下⻆
border-radius: 30px;
border-radius: 30px 60px 80px 100px; (左上 右上 右下 左下)
border-radius: 30px 60px 80px; (左上 右上/左下 右下)
border-radius: 30px 60px; (左上/右下 右上/左下)
border-radius: 80px / 40px; (横向半径/纵向半径)
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
（7）默认样式
- 浏览器在渲染网页时，会对元素添加一些默认样式；
- 这些样式的存在会影响到页面的布局，在正式开发前通常需要除掉网页中的默认样式。
- 三种方法去除默认样式：
- 手动清除：如通过*（通配选择器）将margin和padding全部设置为0；
- 引入外部文件reset.css，reset会除去所有的默认样式；
- 引入外部文件引入normalize.css，normalize去除掉了那些会影响布局的样式，统一了那些不影响布局的样式
五、浮动与定位
浮动
（1）什么是浮动
- 通过盒子模型可以完成网页垂直方向的布局;
- 水平方向的布局可以通过**浮动属性（float）**来实现；
- 使用float来设置元素的浮动，可选值：
- none 默认值 元素不浮动
- left 向左浮动
- right 向右浮动
（2）浮动的特点
- 设置浮动后元素会向左或向右平移；
- 设置浮动后元素会从文档流中脱离；
- 脱离文档流的元素会盖住文档流中的元素，可以为多个元素设置浮动以使其水平排列（例：ul中li浮动）；
- 脱离文档流后块元素不再独占页面的一行
- 子元素的实际宽度不再强制等于父元素内容区的宽度
- 浮动元素无法通过margin:0 auto;来设置水平居中
- 脱离文档流后，块元素的默认宽高都是被内容撑开；
- 脱离文档流后，行内元素的特点和块元素一样；
- 浮动元素不会盖住文字，文字会环绕在浮动元素的周围，可以利用浮动制作文字环绕图片的效果；
- 注意：
- 如果一行以内不能容纳所有的浮动元素，浮动元素会自动换到下一行；
- 浮动元素不会超过他上边的浮动元素，最多是一边齐；
- 浮动的主要作用就是使得块元素水平排列，如需要三个块元素水平排列一行，就可以直接为这三个元素都设置向左或向右浮动。
（3）清除浮动
- 当父元素或相邻的兄弟元素设置了浮动时，元素的位置会发生变化；
- 清除浮动指清除其他浮动元素对当前元素的影响，使用clear属性来清除浮动的影响；
- 可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中对当前元素影响最大的浮动元素
（4）高度塌陷
- 在文档流中，父元素的高度默认是被内容撑开的，即父元素会根据子元素的大小自动调整高度；
- 当子元素浮动时，会脱离文档流，此时子元素将无法撑起父元素的高度，导致父元素的高度塌陷；
- 发生高度塌陷时，后边的元素会自动上移，导致整个网页布局发生变化。
- 在一些场景中，父元素的高度是固定的，此时不会发生高度塌陷，即可以通过将父元素的高度固定来避免高度塌陷的问题；
- 在另一些场景中，我们希望父元素的高度是被内容撑开的，不能将高度固定，此时要处理高度塌陷的问题；
- 可以使用开启BFC和设置clearfix类来解决高度塌陷的问题。
（5）BFC
- BFC即Block Formatting Contexts。
- 具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
- 可以通过开启BFC来解决高度塌陷问题
- BFC（块级格式化环境）
- BFC是元素的一个隐含属性，开启BFC后，元素将成为一个独立的布局区域
- 元素开启BFC后会具有如下特点：
- 开启BFC后，元素不会被浮动元素所覆盖
- 开启BFC后，元素垂直外边距不会传递给父元素（不会发生外边距折叠）；
- 开启BFC后，元素可以包含浮动的子元素。
- 如何开启BFC？
- BFC是元素的隐含属性，无法直接开启，但是可以通过其他属性间接开启，间接开启通常会带来一些副作用：
- 设置浮动（会使元素脱离文档流）
- 设置绝对定位（会使元素脱离文档流）
- 将overflow设置为一个非visible的值，通常我们会使用overflow:hidden；来开启BFC从而解决高度塌陷的问题
- 设置display:flow-root（不兼容IE）
（6）clearfix
- 一种解决高度塌陷和外边距折叠的方法；
- 通过在元素的前后分别添加一个空元素，并将元素类型显示设置为table类型，同时清除空元素前后的浮动来达到上述效果；
- 哪个元素发生高度塌陷和外边距折叠的问题，就给哪个元素添加clearfix这个类
.clearfix::before,
.clearfix::after {
content:" ";
display: table;
clear: both;
定位
（1）什么是定位
- 定位是一种布局手段，通过定位可以将元素摆放到网页的任意位置，可以使用position属性来设置；
- 在CSS中定位一共有四种：
未开启定位（static，默认值）
相对定位（relative）
绝对定位（absolute）
固定定位（fixed）
粘滞定位（sticky）
（2）相对定位
- 通过将position设置为relative来开启元素的相对定位
- 相对定位的特点：
- 开启相对定位后要设置偏移量，不然元素不会发生任何变化；
- 开启相对定位不会使元素脱离文档流，不会改变元素的性质；
- 相对定位是参照于元素自身的位置进行定位的；
- 相对定位会提升元素的层级。
- 偏移量
- 开启了定位的元素可以通过偏移量设置其位置，在CSS中一共有四个偏移量：
- top元素顶部和定位位置顶部的距离
- bottom元素底部和定位位置底部的距离
- left元素左侧和定位位置左侧的距离
- right元素右侧和定位位置右侧的距离
- 通常只需要两个值即可确定一个元素的位置
- top left
- bottom left
- top right
- bottom right
（3）绝对定位
- 将position属性设置absolute即开启了元素的绝对定位。
- 绝对定位的特点：
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化。
- 开启绝对定位后，会使元素脱离文档流，元素的性质会发生变化。此时，行内元素变成块元素，块元素的默认宽高被内容撑开。
- 绝对定位元素是相对于离它最近的开启了定位的祖先元素进行定位。如果所有祖先元素都没有开启定位，则相对于“浏览器窗口”进行定位。（子绝父相）
- 绝对定位会使元素提升层级。
（4）包含块
- 当设置百分比单位时，元素的值是参照于包含块的指定值进行计算的。
- 包含块：指包含了当前元素的块元素，根据不同情况，元素的包含块也不同。
- 普通元素的包含块就是离它最近的祖先块元素：
body的包含块是html，html的包含块是初始包含块 - 对于设置了绝对定位的元素：
- 它的包含块就是离它最近的开启了定位的祖先元素；
- 如果所有的祖先元素都没有开启定位，则元素的包含块就是初始包含块；
- 绝对定位元素是参照于它的包含块进行定位的。
- 设置了绝对定位后，水平方向和垂直方向的计算方式发生了变化。
- 普通元素的包含块就是离它最近的祖先块元素：
（5）固定定位
- 将position属性设置为fixed即开启了元素的固定定位
- 固定也是一种绝对定位，它的大部分特点都和绝对定位相同，不同点在于它的定位的参照物不同：
· 固定定位的元素总是相对于视口（viewport）进行定位，视口就是浏览器的窗口 - 固定定位元素会固定在视口中，不会随网页一起滚动
（6）粘滞定位
- 将position属性设置为sticky即开启了元素的粘滞定位
- 粘滞定位的特点与相对定位类似
- 粘滞定位的元素是参照于离他最近的开启了滚动条的祖先元素进行定位的
- 当粘滞定位元素滚动到定位位置是，元素会保持在该位置不再滚动
（7）元素的层级
- 定位会提升元素的层级，定位元素会盖住文档流中的元素、
- 定位元素之间的层级是一样的，但下边的定位元素会盖住上边的定位元素
- 可以通过
z-index来改变定位元素的层级：- z-index需要一个整数，值越大，元素的层级越高
- 元素的层级越高越优先显示，元素层级一样时优先显示下边的
- 父元素的z-index值设置的比子元素大，其层级也无法比子元素高，子元素会盖住父元素。
【在父元素设置元素定位(absolute/fixed/relative)情况下,父元素的z-index层级越高，里面的子元素层级也就越高,侧面证明靠爹的重要性】
相关链接：https://blog.csdn.net/txtop/article/details/123733679
六、深入学习CSS
（1）CSS高级语法：动画、less语法、flex布局等等
（2）继续学习，等待大佬补充ing……
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
