CSS3是什么
CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。
CSS3如何学习
学习方向：从css代码书写位置、css选择器和css具体样式设置三部分进行学习
学习目的：完成页面样式布局和位置布局
1、css代码书写位置
css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。
① 行间式
css样式书写在标签的style全局属性中，一条样式格式为 样式名: 样式值 单位;，可以同时出现多条样式
<!-- 关键代码 -->
<!-- 给div标签设置宽高背景颜色 -->
<div style="width: 200px; height: 200px; background-color: orange;"></div>② 内联式
css样式书写在head标签内的style标签中，样式格式为 css选择器 { 样式块 }，样式块由一条条样式组成
<!-- 关键代码 -->
<head>
<style>
/* css语法下的注释语法 */
/* 设置页面中所有h2标签宽高背景颜色 */
h2 {
width: 50px;
height: 50px;
background-color: orange;
}
/* 设置页面中所有h3标签宽高背景颜色 */
h3 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<h2></h2>
<h2></h2>
<h3></h3>
<h3></h3>
</body>③ 外联式
css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）
- css文件夹下的my.css
/* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */
p {
width: 50px;
height: 50px;
background-color: orange;
}- 根目录下的first.html
<!-- 关键代码 -->
<head>
<!--
rel="stylesheet"：引入的是层级样式表，也就是css文件
type="text/css"：引入文件采用的是css语法书写文本类型代码
href="css/my.css"：采用相当路径引入目标css文件
-->
<link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
<!-- 该页面中的p标签样式都被my.css文件控制 -->
<p></p>
<p></p>
</body>- 根目录下的second.html
<head>
<link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
<!-- 该页面中的p标签样式也都被my.css文件控制 -->
<p></p>
<p></p>
</body>总结：
行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差；
内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护；
外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。
在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢？答案就是用于建立css与html之间联系的css选择器。
扫描二维码关注公众号，回复：
6938488 查看本文章
2、css选择器
css选择器本质就是css与html两种语法建立关联的特定标识符：
就是在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们
而表示标签名字的方式有多种，每一种名字在css语法中都对应这一种特定标识符，下面我们就来详细介绍：
① 基础选择器
- 通配选择器
/* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */
/* 通配选择器控制页面中所有的标签(不建议使用) */
* {
/* 样式块 */
}<!-- 页面中所有标签都能被匹配 -->
<html></html>
<body></body>
<div></div>
<p></p>
<i></i>- 标签选择器
/* 特定标识符 标签名 */
/* 标签选择器控制页面中标签名为标签选择器名的所有标签*/
div { /* 控制页面中所有div标签的样式 */
/* 样式块 */
}<!-- 页面中所有的div标签都能被匹配 -->
<div></div>
<div class="sup">
<div id='inner'></div>
</div>- class选择器（提倡使用）
/* 特定标识符 点(.) */
/* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/
.box { /* 控制页面中所有标签全局属性class值为box标签的样式 */
/* 样式块 */
}<!-- 页面中class属性值为box的标签都能被匹配 -->
<div class="box"></div>
<p class="box">
<i class="box"></i>
</p>- id选择器
/* 特定标识符 井号(#) */
/* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/
#box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */
/* 样式块 */
}<!-- 页面中id属性值为box的唯一标签备匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名 -->
<div id="box"></div>补充：基础选择器优先级
在一个页面中，难免会出现页面中的某一个标签的某一个样式被不同的选择器下的样式同时控制，也就是出现了多种方式下对目标标签的同一样式出现了重复控制，那到底是哪种选择器下的样式最终控制了目标标签，一定会有一套由弱到强的控制级别规则，这种规则就叫做优先级，下面的例子就很好的解释了各种基础选择器的优先级关系：
<head>
<style>
* {
width: 50px;
height: 50px;
background-color: red;
color: pink;
}
div {
width: 60px;
height: 60px;
background-color: orange;
}
.box {
width: 70px;
height: 70px;
}
#ele {
width: 80px;
}
</style>
</head>
<body>
<div class="box" id="ele">文字内容</div>
</body>
<!--
1. 四种选择器都控制目标标签的宽度，最终目标标签宽度为80px，所以id选择器优先级最高
2. 三种选择器都控制目标标签的高度，最终目标标签宽度为70px，所以class选择器优先级其次
3. 二种选择器都控制目标标签的背景颜色，最终目标标签背景颜色为orange，所以标签选择器优先级再次。
4. 只有一种选择器控制目标标签的字体颜色，目标标签字体颜色一定为pink
优先级：通配选择器 < 标签选择器 < class选择器 < id选择器
-->② 复杂选择器
- 群组选择器
/* 连接标识符 逗号(,) */
/* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */
div, p, .box, #ele {
/* 样式块 */
}<!-- 页面中所有div标签、所有p标签、所有class属性值为box、唯一id属性值为ele的标签都能被匹配 -->
<div>
<div></div>
</div>
<p></p>
<p></p>
<i class="box"></i>
<span class="box"></span>
<b id="ele"></b>- 后代选择器
/* 连接标识符 空格( ) */
/* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body .box i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
/* 样式块 */
}<!-- body标签内部的class属性值为box内部的i标签们都能被匹配，所以只匹配i标签，其他都是修饰 -->
<body>
<div class='box'>
<span><i> </i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，能被匹配 -->
</div>
<div>
<span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，能被匹配 -->
</div>
</body>
<!-- 标签的嵌套结构形成父子代标签，后代选择器可以匹配直接父子关系或间距父子关系形成的层次，所以两个i标签均能被匹配 -->- 子代选择器
/* 连接标识符 大于号(>) */
/* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body>.box>i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
/* 样式块 */
}<!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 -->
<body>
<div class='box'>
<span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，不能被匹配 -->
</div>
<div>
<span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，不能被匹配 -->
</div>
<div class='box'>
<i></i><!-- body与.box是直接父子关系，.box与i是直接父子关系，能被匹配 -->
</div>
</body>
<!-- 子代选择器只能匹配直接父子关系，所以只能匹配最后一个i标签 -->- 兄弟选择器
/* 连接标识符 波浪号(~) */
/* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele~div~i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
/* 样式块 */
}<!-- #ele~div~i：同理#ele和div都是修饰位，i才是目标匹配位 -->
<h3 id="ele"></h3>
<div></div><!-- #ele与div是直接兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<div></div><!-- #ele与div是间距兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<!-- 标签的上下结构形成兄弟标签，兄弟选择器可以匹配直接兄弟关系或间距兄弟关系形成的层次，所以两个i标签均能被匹配 -->- 相邻选择器
/* 连接标识符 加号(+) */
/* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele+div+i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
/* 样式块 */
}<!-- #ele+div+i：同理#ele和div都是修饰位，i才是目标匹配位 -->
<h3 id="ele"></h3>
<div></div><!-- #ele与div是直接兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<div></div><!-- #ele与div是间距兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，不能被匹配 -->
<!-- 相邻选择器只能匹配直接兄弟关系，所以只能匹配第一个i标签 -->- 交叉选择器
/* 连接标识符 紧挨着(没有任何连接符) */
/* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */
div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/
/* 样式块 */
}<!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开
<!-- class属性拥有多个值时，多个值之间用空格隔开 -->
<div class="box tag" id="ele"></div>补充：基础选择器优先级
简单选择器存在优先级，优先级的前提就是不同选择器同时控制同一标签的同一属性，那么在复杂选择器下，一定会出现这种同时控制同一标签的同一属性情况，那复杂选择器的优先级又是如何来规定的呢？
1. 复杂选择器的种类并不会影响优先级
-- 后代：div #ele | 兄弟：div~#ele | 交叉：div#ele 优先级一样
2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级
-- 三层标签选择器后代：body div i 大于 两层标签选择器后代：div i | body i
3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器
-- id选择器：#i 大于 n层class选择器：.box .i
-- class选择器：.box 大于 n层标签选择器：body div总结：
选择器是一个庞大的家族，还有很多css选择器等待大家自己去挖掘，掌握已上选择器也已足够帮助我们完成简单前端开发了
我们有了css与html建立联系的选择器基础，那么建立联系后，css语言除了控制标签的宽高背景颜色字体颜色外，还有哪些丰富的样式控制呢？下面我们就一起来学习一下具体的样式设置。
3、具体的样式设置
① 文字样式
文字样式是用来控制字体或文本的显示方式的。
/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";
/*字体大小*/
font-size: 40px;
/*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/
font-weight: 900;
/*行高: 字体文本默认在行高中垂直居中显示*/
line-height: 200px;
/*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线) */
text-decoration: overline;
/*字间距*/
letter-spacing: 2px;
/*词间距*/
word-spacing: 5px;
/*首行缩进：1em相当于一个字的宽度*/
text-indent: 2em;
/*字体颜色*/
color: red;
/* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) */
text-align: center;② 背景样式
标签的背景除了背景颜色还可以有背景图片，而背景图片又有很多相关设置。
/*背景图片：url函数可以链接网络或本地图片*/
background-image: url('https://www.baidu.com/favicon.ico');
/*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺)
background-repeat: no-repeat;
/*x轴背景图片位置偏移：正值往右偏移，负值往左偏移*/
background-position-x: 10px;
/*y轴背景图片位置偏移：正值往下偏移，负值往上偏移*/
background-position-y: 10px;③ 显示样式
HTML5预定义了很多系统标签，大家学习了html标签部分的时候，肯定注意到了，不同的标签在页面中的显示效果是不一样的，比如两个div之间默认会换行显示，而两个span标签却在一行来显示，到底是什么样式控制着标签这种显示效果呢，那就是显示样式display来控制的。
- display: block;
<div style="display: block;"></div>
<span style="display: block;"></span>
<i style="display: block;"></i>
<!--
1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示
2. block方式显示的标签，默认会换行
3. block方式显示的标签，支持所有的css样式
4. block方式显示的标签，可以嵌套所有显示方式的标签
注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签
-->- display: inline;
<div style="display: inline;"></div>
<span style="display: inline;"></span>
<i style="display: inline;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示
2. inline方式显示的标签，默认不会换行
3. inline方式显示的标签，不支持所有css样式(如：不支持手动设置该标签的宽高)
4. inline方式显示的标签，建议只用来嵌套所有inline显示方式的标签
-->- display: inline-block;
<div style="display: inline-block;"></div>
<span style="display: inline-block;"></span>
<i style="display: inline-block;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示
2. inline-block方式显示的标签，具有inline特性，默认不换行
3. inline-block方式显示的标签，也具备block特征，支持所有css样式
4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签
-->④ 盒模型
我们学习完display属性后，知道了标签在页面中都是有显示方式的，虽然display属性值决定了标签的不同显示方式（inline显示方式下标签的宽高不能手动设置），但是标签还是可以拥有宽高的（内容多宽多高，标签就会有多宽多高），所以显示的标签都具有宽和高。
那么标签其实除了宽(width)和高(height)，还拥有内边距(padding)、边框(border)以及外边局(margin)的，这些由内到外组件在一起，就相当于一个盒子，所以我们有把页面中显示的标签称之为盒模型。
创建一个新的box.html页面来学习盒模型的四个区域部分
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>盒模型</title>
<style>
/* 去除系统默认样式对我们学习的干扰，body标签系统默认提供了外边局，且外边局的上右下左四个方位的值都是默认8px，我们写margin: 0;的意思是同时将四个方位的初始值都设置为0，这样我们可以只用关心class值为box的div盒模型的变化，从而更好的学习盒模型的四个区域 */
body {
margin: 0;
}
/* 填写盒模型四个区域的样式代码块 */
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>- content区域
/* 效果：在最左上角显示一个100*100区域面积的橘色正方形 */
.box {
width: 100px;
height: 100px;
background-color: orange;
}
/* content区域就是width x height的面积区域，是用来显示标签内容的区域 */- padding区域
/* 效果：在content区域设置的基础上，再设置padding的四个方位值，就会在最左上角显示一个200*200区域面积的橘色正方形 */
.box {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
/* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */- border区域
/* 效果：在padding区域设置的基础上，再设置border的样式、颜色及宽度，最左上角显示一个橘色正方形外会接着多出20px宽度的红色区域 */
.box {
/*solid:实线 | dashed:虚线 | dotted:点状线*/
border-style: solid;
border-color: red;
border-width: 20px;
}
/* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */- margin区域
/* 效果：在至少所有设置的基础上，再设置margin的四个方位值，橘色正方形就会出现在居屏幕上方150px，屏幕左侧150px地方显示 */
/* 而且修改margin-top的值，盒模型就会上下改变位置，修改margin-left的值，盒模型就会左右改变位置，当出现负值时，盒子会溢出屏幕边缘 */
.box {
margin-top: 150px;
margin-right: 150px;
margin-bottom: 150px;
margin-left: 150px;
}
/* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */问题：
在盒模型除了修改margin-right与margin-bottom的值时，盒模型都会出现显示效果的上的改变，而修改margin-right与margin-bottom的值时，盒模型的并没有任何改变，那margin-right与margin-bottom又是怎样控制着盒模型的呢？
- margin-bottom是控制默认上下显示的两个盒模型之间的间距
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>margin-bottom案例</title>
</head>
<body>
<div style="margin-bottom: 100px">上下显示的【上】盒模型</div>
<div>上下显示的【下】盒模型</div>
<!-- 显示效果：两个div上下间距100px -->
</body>
</html>- margin-right是控制默认zzu左右示的两个盒模型之间的间距
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>margin-right</title>
</head>
<body>
<span style="margin-right: 100px">左右显示的【左】盒模型</div>
<span>上下显示的【右】盒模型</span>
<!-- 显示效果：两个span默认初始左右是有间距的，增加margin-right后，间距在原来基础上扩大了100px -->
</body>
</html>⑤ 浮动
我们学习完了display与盒模型后，仍然不方便处理以下这个问题：多个可以手动设置宽高的盒模型如何快速的左右排列显示？
我们一起来看看：
display：inline;下的盒模型，不支持手动设置宽高，pass
display: inline-block;下的盒模型，支持手动设置宽高，且左右排列显示，但是之间有默认间距，且这个间距存在浏览器间的适配问题，不可控，pass
display: block;下的盒模型，支持手动设置宽高，但默认上下排列显示，于是我们想到了采用margin-left与margin-top两个可以改变位置的盒模型属性帮我们完成，显然是可以达到左右排列显示的，但是很明显是一个非常庞大的布局任务量
那有没有一种可以快速帮助block显示的盒模型左右排列显示的样式布局方式呢，有的，就是我们马上学习的浮动
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>盒模型</title>
<style>
/* 清除body默认外边距带来的影响 */
body { margin: 0 }
/* 浮动布局的开始 */
.red { background-color: red }
.blue { background-color: blue }
.box {
width: 50px;
height: 50px;
}
/* 以上设置后，红蓝正方形从左上角依次上下排列显示 */
.box {
float: right;
}
/* 以上设置后，红蓝正方形依次从右上角(从右往左)左右排列显示 */
.box {
float: left;
}
/* 以上设置后，红蓝正方形依次从左上角(从左往右)左右排列显示 */
.wrapper {
width: 150px;
}
/* 以上设置后，父级提供的显示宽度为150px，所以一行最多能显示三个box，所以从左往右依次排列成了两行 */
</style>
</head>
<body>
<div class="wrapper">
<div class="box red">1</div>
<div class="box blue">2</div>
<div class="box red">3</div>
<div class="box blue">4</div>
<div class="box red">5</div>
<div class="box blue">6</div>
</div>
</body>
</html>
<!--
总结：
1. 浮动样式布局就是设置float属性的值，可以快速让默认上下显示的盒模型左右排列显示
2. float可以设置left与fight两个值，决定了起始排列的位置与方向
3. 父标签的宽度决定了一行可以排列的子标签个数
-->- 清浮动
我们学习了浮动样式布局，很明显感觉其给我们带来的布局便利，但是大家先写出下面的列子，看会出现什么样的布局问题？
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>盒模型</title>
<style>
body { margin: 0 }
.red { background-color: red }
.blue { background-color: blue }
.box {
width: 50px;
height: 50px;
float: left;
}
.wrapper {
width: 300px;
}
/* 层级关系上，wrapper与ele属于同一层级的上下兄弟标签 */
.ele {
width: 100px;
height: 100px;
background-color: orange;
}
/* 设置ele的样式后，很明显会发现ele与wrapper的子标签发生了显示区域的重叠，并没有出现在wrapper子标签显示区域的下方，且ele显示区域被遮盖(具体原因可以搜索学习 浮动布局不完全脱离文档流 ) */
</style>
</head>
<body>
<div class="wrapper">
<div class="box red">1</div>
<div class="box blue">2</div>
<div class="box red">3</div>
<div class="box blue">4</div>
<div class="box red">5</div>
<div class="box blue">6</div>
</div>
<div class="ele"></div>
</body>
</html>很显然，上面案例中的情况在实际开发过程中非常常见：一个标签的所有子标签采用浮动布局，该标签的下方兄弟标签会与子标签出现显示重叠问题，那么清浮动就是用来解决这样的问题的。
清浮动：就是让父标签在子标签浮动的情况下，根据子标签整体所需最大的显示高度，为父级设置固定格式的样式属性，系统就会默认提供给父标签这个所需最大的显示高度，具体格式如下：
/*清浮动固定格式样式代码*/
.wrapper:after {
content: "";
display: block;
clear: both;
}
/* 测试修改父级标签的宽度，让子标签以不同行数来显示，查看子标签与ele标签之间还会不会出现显示区域的重叠？显然不会了 */
.wrapper {
width: 150px; /* 子标签两行显示 */
width: 100px; /* 子标签三行显示 */
width: 50px; /* 子标签六行显示 */
}
/*总结：以后哪个标签的子标签采用了浮动样式布局，一定要为该标签提供清浮动操作*/⑥ 定位
学习完盒模型样式后，可以完成盒模型位置的改变，学习了浮动样式布局后，又能让默认上下排列显示的盒模型快速左右排列，但是仍然不好或不能完成一下两种样式布局需求：
需求1：在页面可以发生滚动的时候，盒模型能不能相当页面窗口是静止的，不会随着页面滚动而滚动（页面小广告）
需求2：父标签已经规定死了宽和高，多个子标签之间不相互影响位置布局，每个子标签自身相对于父级宽高提供的显示区域进行独立的位置布局
- 固定定位：解决需求1
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>固定定位</title>
<style>
/* 页面滚动的样式准备 */
body {
height: 3000px;
}
.tag {
width: 120px;
height: 240px;
background-color: orange;
}
/* position: fixed; 代表采用固定样式定位进行对tag位置的布局操作 */
/* 设置完成后，tag就相对于页面屏幕左侧30px屏幕上侧200px位置静止，不会随着屏幕的滚动而滚动 */
/* 定位样式布局下，不仅可以采用top、left进行布局的位置调整，还可以采用bottom、right进行布局的位置调整，大家可以自我尝试一下，进入固定定位布局总结 */
.tag {
position: fixed;
top: 200px;
left: 30px;
}
</style>
</head>
<body>
<div class="tag"></div>
</body>
</html>
<!--
总结：
1. 固定定位的盒模型参照页面屏幕四个边缘进行位置布局，top、right、bottom、left分别控制着距离页面屏幕上右下左四个边缘的距离
2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果
3. 固定定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠（因为页面滚动，固定定位盒子的位置相对于页面永远是静止的），固定定位的盒模型会在上方显示
-->- 绝对定位（重点）：与相当定位一同解决需求2
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>绝对定位</title>
<style>
/* 清除body默认外边距带来的影响 */
body { margin: 0 }
/* 根据需求2，优先设置好outer的显示区域 */
.outer {
width: 400px;
height: 400px;
background-color: yellow;
}
/* 所有的inner采用一样的大小，绝对样式定位进行布局 */
.inner {
width: 150px;
height: 150px;
position: absolute;
}
/* 想让box1在outer的左上角显示 */
.box1 {
background-color: red;
top: 0px;
left: 0px;
}
/* 想让box2在outer的正中央显示 */
.box2 {
background-color: green;
top: 125px;
left: 125px;
}
/* 想让box3在outer的右下角显示 */
.box3 {
background-color: green;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner box1"></div>
<div class="inner box2"></div>
<div class="inner box3"></div>
</div>
</body>
</html>
<!--
结果：
进行上方布局设置后，并没有达到预期的显示效果，子标签我们已经采用了绝对样式定位完成了指定的布局，那么父标签又需要做什么样的定位样式布局处理呢？
-->- 相对定位（了解）：辅助绝对定位解决需求2
.outer {
/* 父标签设置完相对样式布局后，再观察绝对定位中的案例显示效果 */
position: relative;
/* 如果父标签也需要改变自身位置，也可以修改left、top或是margin-left、margin-top来完成 */
}
/*
总结：
1. 父标签采用相对定位(relative)来辅助于子标签绝对定位(absolute)布局，这样每一个子标签都独立参考父标签的四个边缘进行位置布局，top、right、bottom、left分别控制着距离父标签的上右下左四个边缘的距离
2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果
3. 绝对定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠，一般都是布局所需，不用处理；但是同时采用绝对定位的标签们之间也可能发生重叠，此时往往需要处理谁在上在下显示，z-index属性就是解决这样的问题
*/- z-index：接着需求2的案例
z-index的属性值为大于0的任意正整数，值大的标签显示区域就会覆盖值小的标签显示区域来显示
.box1 {
/* 显示层级中等 */
z-index: 10;
}
.box2 {
/* 显示层级最高 */
z-index: 100;
}
.box3 {
/* 显示层级最低 */
z-index: 1;
}
/*
总结：
1. z-index属性值不需要从1依次叠加，随意设置
2. z-index属性值越大显示层级越高，显示层级不同的发生显示区域重叠时，显示层级高的显示区域覆盖显示层级低的显示区域
*/