一.CSS概述
1.什么是css
Cascading style sheets
层叠样式表，级联样式表，简称样式表
2.css的作用
修饰html
html：负责网页结构的搭建，内容的承载
css:负责网页的修饰，美化页面
3.html属性和css的使用原则
html属性，代码没有可重用性
css有一定的可重用性，但是没有达到极致(scss帮助css的重用性达到了极致)
W3C建议我们使用css的方式来取代html的属性
二.css的语法规范
1.使用css样式
样式属性:样式值;
color:red; 设置文本颜色
font-size:50px; 设置字号大小
background-color:yellow; 设置背景颜色
①内联样式（行内样式）
跟html属性一样，只能作用在一个html标签，不可重用
使用元素的style属性来定义样式
<any style="样式声明"> any代表任意元素
内联样式没有可重用性，
默认优先级最高，
项目中基本不用，只在学习和测试的时候使用
②内部样式
在同一个html页面中可以重用
在<head></head>中编写<style></style>标签
在style标签中编写样式
选择器{样式声明1;样式声明2.。。。。。。。。。。。。。。}
项目中使用较少，学习和测试使用较多
③外部样式
单独创建一个css文件，
在需要使用的html中
head>link来引用这个css文件
<link rel="stylesheet" href="my.css">
rel="stylesheet":rel是关联的意思，关联的是一个样式表文档，必须得要
2.css样式的特性
①继承性
一些样式可以被后代元素继承
但是有一些样式是不能继承，尺寸，内外边距，定位，动画，过渡
一般，关于字体的设置都可以继承
例外，a标签不继承字体颜色
②层叠性
可以给一个元素设置多个样式，如果设置的样式不发生冲突
那么所有样式都会应用这个元素上
③优先级
如果为一个元素定义多个样式，样式发生了冲突，按照css默认优先级显示（css在f12中按照默认优先级从上往下排列）。
默认优先级
高 内联
就近原则 内部和外部
低 浏览器默认样式（user agent stylesheet）
④调整优先级
color:yellow !important;
!important会提升样式的优先级，比内联都高
如果多个冲突的样式属性，都设置了!important。那么按照就近原则
内联style属性中不允许加!important
三.基础选择器（重点，8种选择器）
1.选择器的作用
规范了页面中哪些元素能够使用定义好的样式
选择器就是一个条件，页面中符合这个条件的元素都会应用这个样式
2.选择器详解
①通用选择器
让页面中所有的元素都应用这个样式
*{样式声明}
项目中很少使用
*{margin:0;padding:0} 所有元素内外边距清0，做样式的统一，css reset样式重置
把浏览器给的默认样式，统一或者清除
不同的浏览器厂商，定义的默认样式不同
在真正的开发之前，都要做css reset
②.元素选择器，标签选择器
页面中所有对应元素应用这个样式，设置某元素的公共样式
div{样式声明}
p{样式声明}
元素的关键字{样式声明}
③ID选择器，私人订制
匹配使用这个id的元素，同一个页面中只匹配一个元素
#id值{样式声明}
④类选择器
把常用样式封装进类选择器中，谁想用就用class引用
.类名{样式声明;样式声明;…}
分类选择器
.类名1.类名2{同时引用了这个两个类的元素应用此样式}
元素选择器.类名{引用了这个类名的这个元素才能应用此样式}
类名的命名规范 1.不能以数字开头
2.只能包含字母，数字，- _
3.尽量见名知意
⑤群组选择器
多个选择器之间使用逗号分隔，同时定义一个样式
选择器1，选择器2，选择器3…{样式声明}
相当于
选择器1{样式声明}
选择器2{样式声明}
选择器3{样式声明}
⑥后代选择器
通过多个元素的后代关系，匹配元素
后代关系：一级以及大于一级的嵌套关系
选择器1 选择器2 选择器3…{样式声明}
⑦子代选择器
通过元素的子代关系，匹配元素
子代关系：一级嵌套关系
选择器1 > 选择器2 >选择器3…{样式声明}
子代选择器和后代选择器可以混写
div p > span{background-color:pink}
div >p span{background-color:pink}
⑧伪类选择器
匹配元素的某种状态下，应用的样式
:link{} 匹配链接未被访问过的状态
:visited{} 匹配链接已被访问过的状态
:hover{} 匹配元素鼠标悬停的状态
:active{} 匹配元素被激活时的状态
3.选择器的权值
权值：标识当前选择器的重要程度，权值越大，优先级越高
默认权值，高--->低
!important >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
*通用选择器 0
继承的样式 无
权值的总结：
1.当一个选择器中包含多个选择器的时候，需要将所有选择器的权值进行相加，然后比较，权值大的优先显示
2.权值相同时，遵循就近原则
3.群组选择器的权值要单独计算，不能无脑相加
4.添加!important直接获取最高权值，内联样式不能写important
5.选择器的权值计算，不能超过本身的最大数量级
（100个1加一起也小于10）
四.尺寸和边框
1.尺寸
改变元素的宽度和高度
width：
取值：1.px为单位的数字
2.% 父元素的宽度的百分比
height：
取值：1.px为单位的数字
2.% 父元素的尺寸的百分比
但是如果父元素是body，因为body无限高，就没有高度
min-width 最小宽度
max-width 最大宽度
取值1.px为单位的数字
2.% 元素本身尺寸的100%； max-width:100%经常在图片上使用
这张图片可以变小显示
但是最大不能超过本身原始尺寸
min-height
max-height
ps：附加知识点-----------尺寸单位
1.px像素
2.in 英寸 1in=2.54cm
3.pt 磅值，设置字号大小 1pt=1/72in
4.cm
5.mm
相对单位
6.% 父元素的%
7.em 以父元素定义值为一个基准单位，1em就是父元素设置值的1倍， 2.5em就是父元素定义值的2.5倍
但是由于父元素不同，导致很难统一大小
8.rem 以html定义的值为一个基准单位，可以做到整个页面的数值统一
默认缺省值为16px 默认情况1rem=16px
2.html中允许设置尺寸的元素
| 块级元素 | 行内元素 | 行内块 input |
|---|---|---|
| 独立成行 | 与其他行内和行内块共用一行，一行放不下自动折行 | 与其他行内和行内块共用一行，一行放不下自动折行 |
| 设置宽高有效 | 设置宽高无效 | 设置宽高有效 |
| 不设置宽高 宽是父元素100%， 高靠内容撑开 | 宽高靠内容撑开 | 浏览默认给行内块设置宽高 ，但是不同浏览器设置的不同， 行内块是各个浏览器默认样式差异最大的元素 |
所有有width和height的属性的元素都可以设置宽高(img,table)
3.溢出
当内容比较大，尺寸比较小的时候，会发生溢出
html默认情况下，溢出是纵向溢出
overflow: visible; 默认值，显示
hidden；隐藏
scroll； 不管是否溢出，都添加滚动条
auto；不溢出没有滚动条，溢出了只在溢出方向添加滚动条
overflow-x
overflow-y 专门设置x轴y轴有没有滚动条
溢出的问题：1.溢出在css和html中的底层很麻烦，
导致溢出可以解决很多特殊情况，但是都不推荐
2.如何完成水平溢出效果
内部容器宽度比外部容器宽度大，
给外部元素设置overflow
ps：合法颜色值
1.颜色的英文单色
2.#rrggbb 6个16进制
3#rgb #rrggbb的简写方式，#aabbcc---->#abc
4.rgb(r,g,b) 0~255
5.rgba(r,g,b,alpha) alpha透明度 0~1 1不透明，0全透明
6 颜色的关键字transparent 透明,同rgba(0,0,0,0)
4.边框
①边框的简写方式
同时设置4个方向的边框
border:width style color;
width 边框的宽度
style 边框样式
solid 实线
dotted 点点的虚线
dashed 短线的虚线
double 双实线
color 颜色,合法的颜色值和transparent透明
最简方式 border:style;
取消边框 border:0;
②单边的定义
单独设置某个一方向的边框
border-top:
border-right:
border-bottom:
border-left:
③单属性的定义
单独设置某一个方向边框的某一个属性
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
5.边框的倒角
把直角倒成圆角
4个角一起设置
border-radius:圆角的圆的半径。
50% 就是一个圆
单角设置
border-top-left-radius: 100px;
border-top-right-radius: 10px;
border-bottom-right-radius: 140px;
border-bottom-left-radius: 10px;
6.边框的阴影
box-shadow:h-shadow v-shadow blur spread color;
h-shadow 阴影水平偏移距离
v-shadow 垂直偏移距离
blur 阴影的模糊程度
spread 阴影大小
color 眼影颜色
inset 可以添加inset让阴影内部扩散
阴影的最简方式 box-shadow:h-shadow v-shadow；
7.轮廓
绘制在边框以外一圈线条，一般我们清除它
outline:width style color;
outline:0;
五.框模型，盒子模型
所有元素皆为框----所有元素默认在页面上都占据空间
框模型，就是元素在页面上实际占地大小的计算公式
元素实际占地宽度：左外边距+左边框+左内边距+width+右内边距+右边框+右外边距
元素实际占地高度：上外边距+上边框+上内边距+height+下内边距+下边框+下外边距
项目中更多的关注实际占地宽度，高度相对而言关注较少
外边距，边框以外的距离（和其它元素之间的距离）
内边距，边框到内容区域之间的距离
1.外边距
外边距是透明的，
外边距发生改变，视觉上是改变了元素的位置
使用场合：元素在页面上做位置的微调
元素之间的间距
margin:v1; 设置4个方向的外边距
外边距左右冲突，以左为准
上下冲突，以上为准
单独设置某个方向的外边距
margin-top:
margin-right:
margin-bottom:
margin-left:
取值：1.px为单位的数字
2.% 不管上右下左，都是父元素宽度的百分比
3.auto auto对上下外边距无效
作用，让设置了宽度的块级元素水平居中显示
margin:auto;
margin-left:auto;
margin-right:auto;
注意: 外边距左右冲突,以左为准
上下冲突,以上为准
外边距的简写方式
margin:v1; 同时设置4个方向外边距
margin:v1 v2; v1:上下 v2:左右
margin:0 auto; margin:100px auto;
margin:v1 v2 v3; v1:上 v2:左右 v3:下
margin:v1 v2 v3 v4; 上右下左
2.外边距发生的特殊效果
①外边距合并
当两个块级元素的垂直外边距相遇时，他们会合并成一个
最终取值以大的为准
解决方案，单独写一个div的外边距，另外一个不写
设置的时候要规避发生这种情况
②关于块级元素，行内元素，行内块的总结
| 块级元素 | 行内元素 | 行内块 input |
|---|---|---|
| 独立成行 | 与其他行内和行内块共用一行，一行放不下自动折行 | 与其他行内和行内块共用一行，一行放不下自动折行 |
| 设置宽高有效 | 设置宽高无效 | 设置宽高有效 |
| 不设置宽高,宽是父元素100%,高靠内容撑开 | 宽高靠内容撑开 | 浏览默认给行内块设置宽高,但是不同浏览器设置的不同,行内块是各个浏览器默认样式差异最大的元素 |
| 4个方向外边距都有效 | 上下外边距无效 | 4个方向外边距有效,但是如果上下外边距发生改变，导致行内块上下位移，它会带着同一行的其它行内元素和行内块一起移动 |
③默认自带外边距的元素
body，form,h1,h2,h3,h4,h5,h6,hr,ol,p,pre，ul
body自带8px外边距
ul 上下16外边距，左内边距40px
④外边距溢出
例如：
两个div #d1 #d2 宽高200*200 不同背景色
#d2中有个儿子div #d3 宽高100，有不同背景色
给#d3设置上外边距，观察效果
外边距溢出的原理
子元素的内容区域上沿和父元素内容区域上沿重合，会发生外边距溢出
解决方案 1.给父元素添加上边框，会增加父元素的实际占地高度
2.给父元素添加上内边距，会增加父元素的实际占地高度
3.给父元素添加overflow:hidden/auto,如果父元素想溢出显示，就冲突了
4.给父元素添加一个空的table，当做大儿子
浏览器页面上看不到这个空table元素，但是浏览器判定父元素内容区域的上沿和子元素 内容区域的上沿分离了
3.内边距
内边距是边框到内容区域之间的距离
改变内边距视觉上是改变元素大小，但是元素的内容区域大小并没有变化
内边距颜色与元素背景颜色相同
内边距的使用场合，把元素撑开的时候使用
当width设置为%,配合border-box来设置内部元素之间的缝隙
padding:v1;设置4个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
取值 1.px为单位的数字
2.% 都是父元素宽度的百分比
3.padding没有auto
简写
padding:v1; 设置4个方向
padding:v1 v2; v1:上下 v2：左右
padding:v1 v2 v3; v1:上 v2左右 v3下
padding:v1 v2 v3 v4; 上右下左
4. 设置盒子模型的计算方式
box-sizing:
取值 1.content-box 默认缺省值，我们设置的width就是content(内容区域)的位置
盒子模型计算公式：左右外边距+左右边框+左右内边距+width
2.border-box 我们设置的width包含 border+padding+内容区域宽度
所以盒子模型计算公式：左外边距+width+右外边距
一般当元素设置了%尺寸的时候，都是用border-box
这样设置的好处，不用计算，直接用%和padding完成元素排列，与元素之间的空隙
六 . 背景
1. 背景颜色
background-color: #aaf; transparent
注意内边距的颜色就是当前元素的背景颜色
2. 背景图片
background-image: url(09.png);
3. 背景图的平铺
background-repeat:
repeat 默认值，平铺
no-repeat 不平铺
repeat-x
repeat-y
4. 背景图片的定位
background-position:
取值 1个值，只设置x轴的位置，y轴默认居中
两个值，分别设置x和y轴
取值范围 1.px为单位数字
2.%
3.关键字 x:left/center/right
y:top/center/bottom
5. 背景图片的尺寸
background-size:
取值 1.取一个值，同时设置x，y轴的大小
2.取两个值，分别设置，x,y轴大小
具体取值 1.px为单位的数字
2.%
3. cover 要求背景图铺满整个元素，哪怕背景图显示不全
4.contain 要求元素完整的包含图片，就是要图片显示完全，如果不符合比例，有大量的空白，也无所谓
6. 背景图片的固定
background-attachment:
scroll 背景图片随着页面滚动条滚动
fixed 背景图片固定在body的某个位置，不随着页面滚动条滚动
但是，只会在原本的元素内显示
设置了fixed之后，background-position也会改变，会相对于body去改变位置
7. 背景的简写方式
background:color img repeat atachment position;
没有size
最简方式 background：color/url();
七. 渐变
1. 什么是渐变
多种颜色平缓变化的一种效果
渐变的主要因素，色标
色标的组成，一种颜色，以及这种颜色出现的位置
一个渐变效果，最少2个色标，最多无限多
色标的取值: 1颜色 位置% #ff0 50%
2 颜色 px #00f 25px
2.渐变的分类
1.线性渐变，以直线的方式来填充渐变色
2.径向渐变，以圆的方式来填充渐变色
3.重复渐变，将线性和径向渐变重复的实现
3. 线性渐变
background-image: linear-gradient(方向，色标，色标........)
方向取值 1.关键字，写终点
to bottom, to top ,to left, to right
2.角度 0deg
色标： 颜色 位置可以用px
也可以用%
不写位置
4. 径向渐变
background-image: radial-gradient(半径 at 圆心，色标1,色标2.......)
半径，如果色标中使用的是%，那么意味着半径的百分比位置
但是如果色标中使用px，半径就没有意义了
圆心， x,y 以px为单位的数字
x%,y%
关键字 x:left/center/right y:top/center/bottom
5. 重复渐变
重复的线性渐变
background-image: repeating-linear-gradient(方向，色标1，色标2.....）
重复的径向渐变
background-image: repeating-radial-gradient(半径 at 圆心，色标1，色标2.......）
6. 线性渐变的浏览器兼容问题
在代码之前添加浏览器内核
-webkit- chrome/safari
-moz- firefox
-o- opera
-ms- IE
浏览器会自动的执行匹配内核的代码，其它代码自动屏蔽
background-image: -webkit-linear-gradient(top,#000,#f00);
如果添加内核，那么方向必须使用起点，不能加to
to bottom-----top
to right--------left
八. 文本相关的样式
1. 字体属性
1. 字号font-size:
取值 px/pt为单位的数字
rem/em
2.字体系列font-family:字体1,字体2，...... 从前往后找，使用第一个在字体库有的字体
3.字体权重font-weight:normal;默认值
关键字：lighter(300) normal(400) bold(600) bolder(700)
无单位100的整倍数，最大1000,1100失效
4.字体的样式 font-style: normal; 默认值
italic 斜体
5.小型大写字母 font-variant: small-caps;
6.字体属性简写方式 font：style variant weight size family;
最简方式： font:size family;
2. 文本属性
①文本的颜色
color:合法的颜色值
②水平对齐方式
设置内部的文本，行内元素，行内块的水平对齐方式
text-align:
left 默认缺省值
center
right
justify两端对齐
text-align:center和margin:0 auto的区别
margin:0 auto让块级元素水平居中
text-align:center设置内部的文本，行内元素，行内块的水平居中
但是内部的块级子元素会继承父级的text-align:center;
导致子元素内部的文本，行内元素，行内块水平居中
总结: 1 让块级元素水平居中，给当前元素设置margin:0 auto;
2 让行内，行内块，普通文本水平居中，给父级设置text-align:center;
3 子块级元素会继承父元素的text-align属性
③行高
如果设置的行高大于字号大小，文本会在行高的范围内垂直居中显示
line-height:
取值，可以取px为单位的数字，一般定义为容器的高度
无单位的数字，行高为字号的倍数
很多时候，会把行高设置为容器高度，让文本在容器垂直居中显示(多行文本不这样设置)
注意，对于多行文本，行高的垂直居中不适用
④文本线条
text-decoration:
overline 上划线
underline 下划线
line-through 删除线
none 去掉线条
⑤首行缩进
text-indent: 取值px为单位的数字
⑥文本的阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow 水平偏移
v-shadow 垂直偏移
blur 模糊程度
color 颜色
九. 表格的样式属性
1.表格的常用样式
table，之前学习的样式基本都可以使用，宽高，边框，背景，内外边距，文本
但是边框只有最外层的边框，内部没有边框
td/th, 宽高，边框，背景，内边距，文本有效
外边距无效
vertical-align 设置td/th中文本的垂直对齐方式，其他元素无效
top/middle(默认)/bottom
table是一种特殊的元素表现形式
实际尺寸是根据内容的多少而决定
内容多，尺寸小，以内容为准
内容小，尺寸大，以尺寸为准
某一行，所有列的高度一致
不同行的，同一列宽度一致
导致table的默认渲染方式，需要先全部加载到内存中，之后再一次性渲染到页面，渲染效率低
2.表格的特有属性
1.边框的合并
border-collapse:
separate 分离状态
collapse 合并状态
2.由于td的外边距无效，边框边距
要保证边框是分离状态border-collapse: separate;
border-spacing: 20px;
3.标题的位置
caption-side: top/bottom;
4.设置表格的显示规则
table自动布局,默认布局方式
单元格大小会自动适应内容
表格复杂的时候，加载速度很慢
比较灵活
适用于不确定每列大小，并且不复杂的表格
table-layout:auto
table的固定布局
单元格大小不会再自适应内容
任何情况下，表格都会快速加载
不够灵活
适用于，确定每列大小的表格
table-layout:fixed
十. 定位
改变元素在页面中的位置
1.定位的分类
①普通文档流
②浮动定位
③相对定位
④绝对定位
⑤固定定位
2. 普通流定位（默认文档流）
默认文档流定位-----------所有元素页面中都占据空间，----元素不能发生堆叠
行内元素，行内块共用一行，一行放不下自动换行（从左往右）
块级元素单独成行（从上往下）
3. 浮动定位(重点*******************************)
让块级元素横向显示
float：
none 默认值，不浮动
left 让元素浮动之后，停靠在父元素的左侧或者其他左浮动元素的后面
right 让元素浮动之后，停靠在父元素的右侧或者其他右浮动元素的后面
浮动的特点
1.元素一旦浮动，将脱离文档流
2.浮动元素最终，会停靠在父元素的最左/右，或者其他已浮动的元素的后面
3.当父元素横向显示不下所有浮动元素时，显示不下的浮动元素会自动换行
4.浮动元素就是为了解决块级元素横向显示的问题
元素一旦脱离文档流，会发生4件事
1.页面不占据空间
2.后续元素上前补位（文本，行内元素，行内块除外）
3.元素如果没有宽度，一旦脱离文档流，元素的宽度靠内容撑开
4. 元素一旦脱离文档流，将变为块级元素(可以设置尺寸，上下外边距有效)
4. 浮动的特殊情况
①浮动元素如果没有设置宽度，浮动之后，宽度靠内容撑开
②元素一旦浮动，将变为块级元素(可以设置尺寸，上下外边距有效)
③浮动元素占位问题
浮动元素会在浮动方向上占位，这个占据位置不会让被挤下去的其它浮动元素占据
④文本，行内元素，行内块不会被已浮动元素压在下面，而是避开浮动元素显示
5. 清除浮动元素带来的影响
浮动元素带来的影响：
一个块级元素之前的元素如果浮动，
这个块级元素会钻到浮动元素的下面去补位
设置 clear:left;
right;
both;
6. 高度坍塌
高度坍塌发生的原因：
父元素没有定义高度，内部所有元素浮动，父元素在文档流里就认为内部没有元素，找不到高度
解决方案：
1.给父元素定义高度，在子元素数量比较少的情况下，可以使用
子元素的数量不确定,适用
2.父元素也浮动，会影响到父元素的兄弟元素和爷爷元素
3.给父元素overflow:hidden/auto; 但是父元素如果想溢出显示，就不行了
4.在父元素内部追加一个块级元素，不设置高，不设置宽，添加clear:both;
十一. 其他常用css属性
1.显示方式
设置元素的显示规则(块级，行内，行内块，table)
display:
取值 block 块级
inline-block 行内块
inline 行内
table
none 不占据页面空间的隐藏
2.显示效果
visibility:
visible 默认缺省值，显示
hidden 隐藏，但是看不见，却占着位置
面试题，visibility:hidden和display:none的区别
visibility:hidden 隐藏，占空间
display:none 隐藏，不占空间
3. 透明度
rgba(0,0,0,.5) 只会让当前颜色透明
opacity：0~1 1不透明 0全透明
会让元素内部与颜色相关的所有值，都透明
4. 垂直对齐方式vertical-align
①table/td中使用
vertical-align:top/middle/bottom
设置内部文本的垂直对齐方式
②给行内块设置
vertical-align:top/middle/bottom
设置行内块前后的文本,行内元素，行内块与这个行内块的垂直对齐方式
默认值为middle
③给img设置
vertical-align:
baseline 基线，默认值
top/middle/bottom
设置img前后的文本,行内元素，行内块与这个img的垂直对齐方式
一般项目中，会把img中vertical-align的默认值改为非基线，因为基线太丑
5.光标的设置
会调用系统的光标图案
cursor: default;默认箭头
pointer；小手
wait；等待加载
help；帮助
text 文本输入
crosshair 十字
6. 列表
设置列表的标识
list-style-type:
disc/circle/square/none
自定义图片为列表标识
list-style-image: url(care1.png);
设置列表项的位置
list-style-position: outside/inside; 默认在li的外部，可以设置为在li的里面
简写方式
list-style:type img position;
最常用的最简方式 list-style:none; ul去除点
现在的项目风格，一组样式一致的元素，会使用ul>li来当成结构
十二. 定位
相对定位，绝对定位，固定定位
position：static 静态，默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
一旦元素被定义了position,并且取值为relative、absolute、fixed其中的一种
那么元素被称为已定位元素
会解锁5个属性，位置偏移属性 top/right/bottom/left
取值为px为单位的数字
%
左右冲突听左边，上下冲突听上边
堆叠顺序属性 z-index
1. 相对定位
position:relative;
不脱离文档流，
不写偏移属性，或者偏移属性设置为0的时候，用户看不出来是定位元素，不会影响其他元素位置
相对于自己原本的位置进行偏移
使用场合：1.类似于margin,给元素做位置的微调
2.经常作为绝对定位元素的"祖先级""已定位"元素
2. 绝对定位
position：absolute；
绝对定位脱离文档流
①不占页面空间
②后续元素上前补位
③元素脱离文档流，如果没设置宽度，宽度靠内容撑开
④脱离文档流的元素都变成块级
绝对定位位移的参照物
①body的左上角为参照物，此元素的祖先元素都不是已定位元素
②祖先级有已定位元素，此元素相对于"最近的""已定位的""祖先级"元素左上角为参照物
使用场合，配合祖先已定位元素，把元素移动到页面任何位置
3.固定定位
用于是相对body左上角定位
脱离文档流
position:fixed;
4. 设置定位的堆叠顺序
z-index:
后写的元素，堆叠顺序高，以html编写顺序为准
z-index:0 默认值为0
取值范围:实际使用 -999 ~ 999
只有已定位元素可以设置z-index
定位的堆叠和浮动的堆叠：定位元素的堆叠只要>=0，都会比浮动高
堆叠顺序对父子关系无效，永远儿子压着爹
1003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
