本文详细介绍了CSS的选择器，包括关系选择器、伪类选择器及超链接伪类，探讨了选择器的优先级。接着讲解了长度单位、颜色以及文本样式。深入讨论了盒子模型，包括边框、内外边距、布局和隐藏显示。此外，还涵盖了浮动元素和高度塌陷的解决方案，以及定位机制，包括相对定位、绝对定位和固定定位。通过对这些概念的掌握，可以帮助开发者更好地理解和控制CSS布局。
文章目录
CSS 选择器
关系选择器
<body>
<div>
我是div内部的文字
<p>我是div中的p元素
<span> 我是div中的1号span元素 </span>
</p>
<span>我是div中的2号span元素</span>
<span>我是div中的3号span元素</span>
</div>
<span>我是div外的span</span>
</body>
<!--将 “我是div中的1号span元素” 改成红色字体-->
<!--父子元素-->
div > p > span{
color: red;
}
<!--或者使用不带 > 号的方法，这中方法选取的范围更广-->
div p span{
color: red;
}
<!--将 div中所有的span元素（1号、2号、3号span）改成蓝色字体-->
div span{
color: blue;
}
<!--将 2号span元素 的字体颜色改成 greenyellow-->
<!--兄弟元素 选择下一个兄弟用 + ， 选择下面所有兄弟用 ~ -->
p + span{
color: greenyellow;
}
<!--将 2号、3号span元素 的字体颜色改成 greenyellow-->
p ~ span{
color: greenyellow;
}
伪类选择器
第一部分：伪类
<!--
伪类（不存在的类）描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移动时所指示的元素
伪类一般情况下都是使用冒号 ：开头
:first-chil
:last-child
:nth-child() 选中第n个子元素
特殊值：
n 选中所有 0~n
2n或even 选中偶数位
2n+1或odd 选中奇数位
-以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能和上述的类似，不同点是它们在同类型元素中进行排序
类似于大家庭中子女的排序：大儿子、二闺女、三儿子、四闺女；
换个排序：大儿子、二儿子；大闺女、二闺女
:not() 否定伪类
-将符合条件的元素从选择器中去除
-->
<style>
ul > li:first-child{
background: #bbffaa;
}
ul > li:nth-child(4){
background: #3F3F3F;
}
<!--
ul > li:not(:nth-child(2)){
background: orange;
} -->
</style>
<body>
<ul> <!-- ul>li*5 按下tab键 自动生成 -->
<li> 一 </li>
<li> 二 </li>
<li> 三 </li>
<li> 四 </li>
<li> 五 </li>
</ul>
</body>
第二部分：伪元素
<!--
伪元素：表示页面中一些特俗的并真实不存在的元素（特殊位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示被鼠标选中的内容
::before 元素的开始 行内元素
::after 元素的最后 行内元素
before 和 after 必须结合content属性来使用
-->
<style>
div::before{
content: "无法被选中";
color: red;
}
div::after{
content: "无法被选中";
background: orange;
}
</style>
<body>
<div>
Something just like this!
</div>
</body>
超链接的伪类
<!--
超链接的伪类：
:link 表示没访问过的链接（正常的链接）
:visited 表示访问过的链接
:hover 表示鼠标移入的状态
:active 表示鼠标点击
-->
<style>
a:link{
color: blue;
}
a:visited{
color: red;
}
a:hover{
font-size: 30px;
}
</style>
<body>
<p> <a href="https://www.baidu.com/"> 百度首页 </a> </p>
<p> <a href="https://www.qq.com/"> 腾讯首页 </a> </p>
<p> <a href="https://www.game.163.com/"> 网易首页 </a> </p>
<p> <a href="https://www.baidu.com/"> 百度首页被访问过，所以我变红了 </a> </p>
</body>
选择器的优先级
样式的冲突：
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时就发生了样式的冲突。
发生样式冲突时，应该用哪个样式由选择器的权重决定：
- 内连样式 优先级 1000； 如
<h1 style="color: red; font-size: 66px">一号标题</h1> - id 选择器 优先级 100
- class 选择器 优先级 10
- 元素选择器 优先级 1
- 通配选择器 优先级 0；如
* { }选择所有元素 - 继承的样式没有优先级
特殊情况：
- 如果是两种相同优先级为同一个元素、同一个属性设置的话，优先选择代码位置靠后的样式；
- 交集选择器的优先级，所有优先级加起来运算，然后比较。交集指的是如
div.className{}这类写法的选择器
可以在某个样式的后边添加 !important ,此时该样式获得最高优先级。慎用
样式的继承：
- 我们为一个元素设置的样式同时也会应用到它的后代元素
- 并不是所有的样式都会被继承，比如 背景相关的、布局相关等这些样式都不会被继承
长度单位 和 颜色
长度单位：
- 像素 px
- 屏幕（显示器）实际上是由一个一个的点构成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 百分比 %
- 可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使得子元素跟随父元素的改变而改变
- em
- em是相对于元素的字体大小来计算的
- 1 em = 1 font-size
- em会根据字体大小的改变而改变
颜色：
- 在CSS中可以直接使用颜色名来设置各种颜色
- RGB （red、green、blue）
- 每一种颜色的范围在 0-255 （0-100%）；如
rgb(50,60,70) - rgba 在rgb的基础上增加了一个a[0~1]表示不透明度；1表示完全不透明，0表示完全透明，.5表示半透明；如
rgba(255, 100, 200, .5) - 十六进制的rgb值；如
#ffff00
- 每一种颜色的范围在 0-255 （0-100%）；如
文本 text/font
字体大小和字体类型
<!--
font-size 字体大小
px 像素
em 相当于当前元素的一个font-size 2em相当于2个font-size
rem 相对于根元素的一个font-size
font-family 字体族
三种典型的字体：
serif 衬线字体 （带勾）
sans-serif 非衬线字体
monospace 等宽字体
以上三个是指定字体的类别，浏览器会自动使用该类别下的字体
font-family 可以同时指定多个字体，多个字体间使用逗号隔开
字体生效时优先使用第一个
-->
<style>
div {
font-size: 30px;
font-family: "华文彩云",serif,monospace,sans-serif;
}
</style>
<body>
<div>
Something just like this!
</div>
</body>
还有一个字体简写的样式 font，font 可以设置字体相关的所有属性，相当于使用 font 代替了 font-weight、font-style、font-size、line-height、font-family：
<!--
font:
blod/normal 加粗/不加粗 可省略
italic/normal 斜体/正常 可省略
20px/3 指的是 字体大小/行高 字体大小不可省略，行高可省略（被当成normal）
字体族 不可省略
-->
<style>
div {
font:bold italic 20px/3 "微软雅黑",serif;
border: 1px solid black;
}
</style>
行高
关键：要把 字体的高度 及其 所在行的行高 区分开。
字体的高度是通过 font-size 设置的，而字体所在行的行高可以通过 line-height 设置：
- line-height 可以直接指定一个大小（px em）；如
line-height: 40px; - 也可以直接为行高设置一个整数，这个整数指的是 font-size 的整数倍；如
line-height: 2; - 行间距 = line-height 减去 font-size
注意：未设置行高时，默认 line-height 是 normal。
<style>
div {
font-size: 20px;
line-height: 1.5;
/* line-height: 30px;*/
background: red;
border: 1px solid black;
}
</style>
<body>
<div>今天，也是充满希望的一天!今天，也是充满希望的一天!今天，也是充满希望的一天!今天，也是充满希望的一天!今天，也是充满希望的一天!今天，也是充满希望的一天!今天，也是充满希望的一天!今天，也是充满希望的一天!</div>
<div>明天，也是充满希望的一天</div>
</body>
文本的水平对齐和垂直对齐
<!--
text-align 文本水平对齐
可选值：left、right、center、justify
左 右 居中 两端 对齐
vertical-align 垂直对齐
可选值:
baseline 默认值 基线对齐 基线指小写字母 x 的底部水平线
top 顶部对齐
bottom 底部对齐
middle 居中对齐 此居中指的是相对于 x 交叉的中点对齐
-->
div {
font: 20px/30px "微软雅黑",serif;
border: 1px solid red;
text-align: center;
vertical-align: middle;
}
其它文本样式
<!--
text-decoration 文本修饰
可选值
none 不设置文本修饰，常用于去除超链接下划线
underline 下划线
line-thro 删除线
overline 上划线
white-space 设置网页如何处理空白
通常用于文本框，当一行文字超出了文本框的长度，设置如何处理超出的部分
可选值
normal
nowrap 不换行
pre 保留空格，即代码中的文本是怎样，网页中显示的就是怎样
-->
div{
width: 300px;
white-space: pre;
overflow: hidden;
text-overflow:ellipsis;
}
列表、表格和表单
列表
list-stule-tupe:
- disc : 实心圆
- circle : 空心圆
- square : 实心方块
- decimal : 阿拉伯数字
- lower-roman : 小写罗马数字
- upper-roman : 大写罗马数字
- lower-alpha : 小写英文字母
- upper-alpha : 大写英文字母
<style>
ul li{
list-style-type: circle;
}
ol li{
list-style-type: lower-roman;
}
</style>
表格
<table border="1" width="50%" align="center">
<th>表头1</th><th>表头2</th><th>表头3</th><th>表头4</th>
<tr>
<td>A1</td><td>A2</td><td>A3</td><td>A4</td>
</tr>
<tr>
<!-- rowspan 纵向合并单元格 -->
<td>B1</td><td>B2</td><td>B3</td><td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td><td>C2</td><td>C3</td>
</tr>
<tr>
<!-- rowspan 横向合并单元格 -->
<td>D1</td><td>D2</td><td colspan="2">D3</td>
</tr>
</table>
上面代码的效果时 “B4和C4合并成一个单元格”，“D3和D4合并成一个单元格”。
| 表头 1 | 表头 2 | 表头 3 | 表头 4 |
|---|---|---|---|
| A1 | A2 | A3 | A4 |
| B1 | B2 | B3 | B4 |
| C1 | C2 | C3 | |
| D1 | D2 | D3 |
表格的样式：
<style>
table {
width: 30%; /* 宽度根据内容的大小而改变 */
border: 1px black solid;
/*border-spacing: 10px; 指定边框之间的距离*/
border-collapse: collapse; /* 设置单线边框 */
}
td {
border: 1px black solid; /* 给内部的单元格设置边框 */
height: 50px;
text-align: center;
vertical-align: middle; /* 垂直居中，默认值 */
}
tr:nth-child(2n){ /* 给偶数行的单元格设置背景颜色 */
background: #bbffaa;
}
</style>
表单
表单 form：用于将本地数据传送到远程服务器，可选属性有：
- action ： 表单要提交的服务器地址
- method： 提交表单时使用的HTTP方法（get, post）
- get：提交的数据会显示在浏览器上
- post：提交的数据不会显示出来
- name： 表单名称。该属性可对提交到服务器后的表单数据进行标志，服务器通过此标记获取数据
- value： 为input元素设定值
- target 指示提交表单后在何处显示响应
- _self：默认值
- _blank：新建窗口
<body>
<form action="test.html" target="_blank" method="post">
用户名： <input type="text" name="username"> <br/>
用户密码： <input type="password" name="password"> <br/>
<input type="submit" value="登录">
<!-- 不指定value时默认就是“提交” -->
</form>
</body>
盒子
两个重要的概念：文档流、盒子模型。
文档流：网页实际上是一个多层的结构，作为用户来将只能看到最顶上一层；通过CSS可以分别为每一层设置样式，这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。
元素主要有两个状态：在文档流中和脱离文档流。
元素在文档流中具备如下特点：
- 块元素
- 块元素在页面中独占一行
- 默认宽度是父元素的width
- 默认高度是被内容（子元素的总高度）撑开
- 行内元素
- 行内元素不会独占页面行，只占自身的大小
- 行内元素的默认宽度和高度都是被内容撑开
盒子模型：CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。
每一个盒子都由以下几个部分组成：
- 内容区（content）：盒子的内容，显示文本和图像；通过width和height设置宽高。
- 内边距（padding）：清除内容周围的区域，内边距是透明的。
- 边框（border）：围绕在内边距和内容外的边框。
- 外边距（margin）：清除边框外的区域，外边距是透明的。决定盒子在页面中的位置。
对 content 设置背景颜色，这个背景会延申到 padding 上，而 border 可以自行设置颜色，唯独 margin 是透明、看不见的，所以一个盒子可见区域就是：content + padding + border。
默认样式:
- 通常情况,浏览器都为为元素设置一些默认样式
- 默认样式的存在会影响到页面的布局,
- 通常情况下编写网页时必须要去除浏览器的默认样式(PC端)
<!-- 例如：-->
body{
margin: 0%;
}
p{
margin: 0%;
}
<!-- 或者使用通配符 -->
* {
margin: 0%;
padding: 0%;
}
边框和内外边距
<!--
边框：border 有4个方向 left right top bottom
边框的宽度 border-width (单独设置上边框用 border-top-width)
边框的颜色 border-color (每个方向的边框都可单独设置)
边框的样式 border-style (solid 实线；dashed 虚线)
如：border-width:30px; border-color: red; border-stayle：solid
单独使用 border 简化边框样式
如： border: 30px red solid;
若想设置左边框，则：border-left: #bbffaa 50px dashed;
-->
<!--
内边距：padding 也有四个方向 顺序是 top right bottom left
如：padding: 100px 200px; 效果是上下100px，左右200px
注意：内边距的设置会影响到盒子的大小
背景颜色会延申到内边距上
-->
<!--
外边距：margin 也有四个方向 顺序是 top right bottom left
如：margin: 10px 20px; 效果是上下10px，左右20px
特别注意：内边距不会影响盒子的位置，但是外边距会影响盒子的位置
****** margin-top 和 margin-left 是移动自身，margin-bottom 是移动其它元素 ******
margin 也可以设置负值
-->
一个盒子的总大小有如下几个组成：
盒子总宽 = 左外边距 + 左边框 + 左内边距 + 内容区的width + 右内边距 + 右边框 + 右外边距 = 父元素内容区的width
盒子总高 = 上外边距 + 上边框 + 上内边距 + 内容区的height + 下内边距 + 下边框 + 下外边距 = 父元素内容区的height
盒子的水平布局和垂直布局
元素水平方向的布局：
<!--
某个元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-lefg 1
border-left 2
padding-left 3
width 4
padding-right 5
border-right 6
margin-right 7
一个元素在其父元素中，水平布局必须满足以下的等式
1 + 2 + 3 + 4 + 5 + 6 + 7 = 其父元素content的width
以上等式必须成立，如果等式不成立，则称为过度约束，等式会自动调整
如： 200 + 0 + 0 + 200 + 0 + 0 + 0 = 600
会被自动调整为 200 + 0 + 0 + 200 + 0 + 0 + 200 = 600
如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式成立
这七个值中有三个值可设置为 auto
width
margin-left
margin-right
-如果某个值设置为 auto，则会自动调整auto的那个值以使等式成立
-如果将两个外边距设置为auto，width固定，则会达到水平居中的效果
-->
元素的垂直布局原理同水平方向。
元素溢出：子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
使用 overflow 属性来设置父元素如何畜栏里溢出的子元素：
<!--
overflow 可选值：
visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出的内容将会被裁剪不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容（垂直和水平方向）
auto 根据需要生成滚动条
overflow-x： 单独设置水平方向
overflow-y： 单独设置垂直方向
-->
外边距的折叠：
<!--
垂直外边距的重叠（折叠）
-相邻的垂直方向外边距会发生重叠现象
-兄弟元素 有利
兄弟元素间的相邻垂直外边距会取两者之间的较大值（正值）
特殊情况：相邻外边距是一正一负，则取两者的和
兄弟元素之间的外边距的重叠，对开发是有利的，开发过程中不需要管
-父子元素 影响整体布局
父子元素间相邻外边距，子元素的会传递给父元素
-->
<header>
<style>
.box1,.box2{
width: 200px;
height: 200px;
font: size 100px;;
}
.box1{
background-color: #bbffaa;
margin-bottom: 200px;
}
<!-- box1 和 box2 这两相邻的兄弟元素 重叠的外边距取大值200px -->
.box2{
background-color: cadetblue;
margin-top: 100px;
}
.box3{
width: 400px;
height: 400px;
background-color: chartreuse;
margin-top: 50px;
padding-top: 200px;
}
.box4{
width: 200px;
height: 200px;
background-color: cornflowerblue;
<!--margin-top: 600px; 子元素 box4 的外边距会影响父元素 box3 的布局 -->
}
div{
text-align:right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
<div class="box4"></div>
</div>
</body>
盒子的显示和隐藏
行内元素不支持设置 width 和 height，即使代码里强行写入，在网页中也不会起作用。
行内元素可以设置 padding、border、margin，但是在垂直方向不会影响布局，一般情况下不要对行内元素进行这几个属性的设置。
通过 display 可以转换元素的显示类型，可选值有：
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 将元素设置为行内块元素；既可以设置宽高，又不会独占一行
- table 将元素设置为一个表格
- table-cell 将元素设置为一个表格单元格，可以使用 td 的属性 vertical-align: middle; 达到垂直居中的效果
- none 元素不在页面中显示，即隐藏元素，且元素不占据位置
通过 visibility 可以设置元素的是否隐藏，可选值有：
- visible 默认值，元素在页面中正常显示
- hidden 元素不在页面中显示 ，即隐藏元素，但是占据位置
<style>
.one {
width: 200px;
height: 200px;
background: #bbffaa;
<!--display: block;-->
}
.two {
visibility: hidden;
}
</style>
<body>
Hi! <span class="one">我是行内元素，我想转变成块元素</span> OK？
<span class="two">看不见我看不见我看不见我</span>
</body>
盒子的尺寸
盒子可见框的大小由内容区、内边距和边框共同决定。
box-sizing 用来设置盒子尺寸的计算方式（设置width 和 height 的作用域），可选值有:
- content-box 默认值，内容区的大小
- border-box 可见框的大小，包括内容区、内边距和边框
<style>
body{
font-size: 13px;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
box-sizing: border-box;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
/*box-sizing: content-box; 默认值 不用设置*/
}
</style>
<body>
<div class="box1">盒子的大小：border-box</div>
<br><br>
<div class="box2">盒子的大小：默认值 content-box</div>
</body>
/* box1 可见框大小是 100 * 100 px ； box2 可见框大小是 140 * 140 px */
轮廓、阴影和圆角
outline：用于设置轮廓，和boder的用法一模一样，区别在于outlin不会影响到可见框的大小。
用法：
div {
outline: 10px red solid;
}
box-shadow：用来设置元素的阴影效果，阴影不会影响页面布局。
用法：
/* box-shadow:水平偏移量 垂直偏移量 阴影模糊半径 color */
div {
box-shadow: 10px 10px 50px rgb(0, 0, 0, .5);
}
border-radius: 用于设置盒子的圆角。
/* 将盒子设置成圆形 */
div {
border-radius: 50%;
}
浮动
浮动（float）目前来讲主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。
float 用于设置元素的浮动，可选值有：
- none 默认值，元素不浮动
- left 元素向左浮动
- right 元素向右浮动
浮动后的元素有以下特点：
- 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
- 对于浮动元素来说，已经脱离了文档流，没有块元素和行内元素的区分，会在父元素内水平排列
- 浮动元素默认不会从父元素中移出
- 浮动元素向左向右移动时，不会超过它前边的其它浮动元素
- 父元素内的文字会自动环绕在浮动元素的周围
高度塌陷及其解决方法
开发过程中会碰到这样的需求：我们希望某一块元素的高度不能固定，而是随着内容的多少随之变化。
在浮动布局中，父元素的高度默认所被子元素撑开的。当子元素浮动后，会完全脱离文档流，这将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，下面的元素会自动上移，导致页面混乱。这种现象被称为“高度塌陷”。
解决高度塌陷问题有如下几种方法：
一、为元素开启 BFC
BFC (Block Formatting Context) 块级格式化：是CSS中的一个隐含属性，开启BFC后该元素会变成一个独立的布局区域。
元素开启BFC后的特点：
- 开启BFC的元素不会被浮动的元素所覆盖
- 开启BFC的元素 子元素和父元素外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素
可以通过特殊方式开启元素的BFC：（开启BFC的方法有非常多，每种方法都有缺陷）
- 设置元素的浮动 (不推荐，脱离文档流，页面混乱)
- 将元素设置为行内块元素 (不推荐，宽度丢失)
- 将元素的overflow设置为一个非visible的值 （推荐方式，缺陷较小）
常用的方式：为元素设置 overflow：hidden 开启BFC 。
二、为元素设置 clear 属性
clear ：清除其它浮动元素对当前元素所产生的影响。可选值：
- left 清除左侧浮动元素对当前元素的影响
- right 清除右侧浮动元素对当前元素的影响
- both 清除两侧中最大影响的那侧
clear 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距（margin-top），以使该元素的位置不受其他元素的影响。
三、对伪元素 after 设置 clear 属性
在第二种方法的基础上，进行改良：
<style>
.box1{
border: 10px red solid;
/*float: left;*/
/*display: inline-block;*/
overflow: hidden;
}
.box2{
width: 200px;
height: 200px;
background: #bbffaa;
float: left;
}
.box3{
height: 300px;
width: 300px;
background: #777777;
clear: both;
}
</style>
<body>
<div class="box1">1
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
上面这段代码中，box2浮动后，原本box1会塌陷，但是box3清除了浮动元素box2的影响，而box1的高度又是被子元素box3撑起的，所以box1没有塌陷。
现在，把box3用行内元素 ::after（行内元素）代替掉：
.box1:after{
content: "";
clear: both;
display: block;
}
这样就相当于box1内的另一个没有内容的子元素（高度为空），消除了浮动元素box2的影响，支撑起了box1。
clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，请记住下面这个样式：
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
定位
现在有3个垂直相连的的块元素，希望把box2移动到box1的旁边，且box3位置不发生改变。
<style>
div{
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
最简单的方式是通过margin属性移动盒子，更好的方法是利用 position（定位）属性。
position：是一种更加高级的布局手段，可以将元素摆放到页面的任意位置；可选值：
- static 默认值，元素是静止的没有开启定位
- relative 开启元素的相对定位
- absolute 开启元素的绝对定位
- fixed 开启元素的固定定位
- sticky 开启元素的粘滞定位
相对定位 relative
当元素的position属性设置了relative时，会开启相对定位，有如下特点：
- 素开启相对定位以后，如果不设置偏移量元素不会发生任何变化
- 相对定位是参照于元素在文档流中的位置进行定位的
- 相对定位会提升元素的层级
- 相对定位不会使元素脱离文档流
- 相对定位不会改变元素的性质，块还是块，行内还是行内
总的来说就是：“灵魂出窍，肉体未动”。
偏移量（offset），当元素开启了相对定位后，可以通过偏移量设置元素的位置，元素的偏移量通过以下几个属性设置：
- top 定位元素和定位位置上边的距离；如 top: 20px; 元素会往下移动20px
- bottom
- left 定位元素和定位位置左边的距离； 如 left: 20px; 元素往右移动20px
- right
.box2{
position:relative;
top: -200px;
left: 200px;
}
绝对定位 absolute
当元素的position属性设置了absolute时，会开启绝对定位，有如下特点：
- 启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
- 开启绝对定位后，元素会从文档流中脱离
- 开启绝对定位后元素性质改变，行内变成块，块的宽高被内容撑开
- 绝对定位会使元素提升一个层级
- 绝对定位元素是相对于其包含块进行定位的
包含块（containing block）
- 正常情况下：包含块就是离当前元素最近的祖先块元素
- 决定定位的包含块：包含块就是离它最近的开启了定位的祖先元素；如果所有的祖先元素都没有开启定位，则包含块是根元素html
.box2{
position: absolute;
top: 0;
left: 0;
}
<!-- 通过设置top和left为0，查看移动的 参照点 -->
固定定位 fixed
固定定位（fixed）是一种特殊的绝对定位，唯一不同点：固定定位永远参照浏览器的视口（viewpoint）进行定位。
粘滞定位 sticky 京东右侧导航条会随着滚动条移动，但是当导航条碰到了浏览器视口顶部时就像被粘住了一样。
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在滑动滚动条时固定住该元素。
元素的层级：对于开启了定位的元素，可以通过z-index属性来指定元素的层级；
- z-index需要一个整数作为参数，值越大元素层级越高，高层级优先显示
- 如果元素的层级一样，元素靠下的优先显示
- 祖先元素的层级再高也不会盖住后代元素
<head>
<style>
body{
font-size: 60px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
position: relative;
z-index: 1;
}
.box2{
width: 200px;
height: 200px;
background-color: rgb(192, 95, 211,.3);
position: relative;
bottom: 150px;
left: 50px;
z-index: 2;
}
.box3{
width: 200px;
height: 200px;
background-color:orange;
position: relative;
bottom: 300px;
left: 100px;
z-index: 3;
}
.box4{ /* box4 没有设置层级，但是它不会被高层级的 box3盖住 */
width: 100px;
height: 100px;
background-color: rgb(230, 106, 137);
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3
<div class="box4">4</div>
</div>
</body>
扫一扫
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
