css自我总结

---

css3总结

一、css概括

 css:Cascading style Sheets 层叠样式表,级联样式表,简称样式表

1.作用

 修饰html元素的样式

2.HTML和css的关系

html负责页面的结构的搭建,数据的承载
css,负责让html元素变得好看
以html为基准,一层层的编写样式

3.html的属性和css的样式选择谁好?

   W3C建议我们尽量使用css的方式来取代html的属性
css样式,可以让代码进行重用(重用效果有限)提供了可维护性

二.css的语法规范

1.使用css样式

①内联样式(行内样式)

   任意任意元素都有style属性,在style中定义的样式,叫内联样式
如果style中有多个样式,使用 ; 来分割

<div style="color:red;background-color:pink"></div>  内联样式
特点:1.不能重用
     2.内联样式优先级最高项目中一般不用

②内部样式

  在head标签中,定义styel标签
在style标签中,定义样式
选择器{样式声明;样式声明;.....}
特点:1.代码可以重用
     2.重用只能在当前页面重用
     项目中用的少

③外部样式

  单独创建一个css文件编写样式
在html中的head标签中,调用这个样式
<link rel="stylesheet" href="名称.css"/>

2.css特性

①继承性

  多数样式是可以被子元素继承
(尺寸,边框,内外边距.....)
div {
color: red;
}
a标签不能继承父级的字体颜色

②层叠性

  可以为一个元素定义多个样式规则
如果这些样式规则不冲突,那么都可以应用到元素上

③优先级

   当为一个元素设置很多样式
其中样式发生了冲突,要按照样式的优先级来应用样式
默认优先级规则: 最高----内联样式
               内部样式和外部样式,就近原则(谁距离元素目标标签近使用谁)
               最低---浏览器默认样式

④使用关键字调整样式的优先级

  !important 提升优先级
  h4{color:#069 !important}
  注意:1.!important比内联优先级还高
       2.内联中,语义要求,不允许添加!important;

三.基础选择器(重点*****)

1.选择器的作用

规范了页面中哪些元素能够使用定义好的样式
选择器就是一个条件,符合这个条件的元素,都可以使用定义好的样式

2.选择器的详解

①通用选择器

*{样式声明} 所有元素都要匹配这个样式
要求尽量少用*,因为效率非常低
*{margin:0;padding:0;}所有元素的内外边距清空
css rest 样式重置 
  由于浏览器对同一篇代码的样式有可能不同
我们写代码的时候,需要把一些样式进行统一,或者清除
这种行为就叫做css rest

②标签选择器,元素选择器

一般用于定义某种元的公用样式
元素名称{样式声明}  div{color:red;}
页面中所有对应元素,都要应用这个样式

③id选择器

只对当前页面中,一个标签生效
一般项目中id选择器,单独使用比较少
项目中#id选择器通常用于后代和子代选择器的第一部分
<p id="p1">
#p1{样式声明}

④类选择器

定义页面上的一个样式片段,哪个元素想用,就使用class调用,可以不停的被重用
.类型{样式声明}   声明类名有点
<any class="类名">  调用类名没有点
类选择器的特殊使用方式
1.多类选择器,一个class中,引用多个类名
<h4 class="text-red bg-yellow">类选择器</h4>
2.分类选择器
 1.标签选择器.类选择器{样式声明}
 调用这个类名的这个标签,应用这个样式,提升权值
 2  .类选择器.类选择器{样式声明}
 同时引用了这两个类选择器的标签,应用这个样式
 注意类名的定义规则
 1.定义类选择的时候,点不能省略
 2.类名不能以数字开头
 3.只能包含- _
 4.见名知意  

⑤群组选择器

选择器1,选择器2,选择器3....{样式声明}

⑥后代选择器

元素的后代关系,匹配元素
后代关系,一级或多于一级的嵌套
选择器1 选择器2 选择器3 ... {样式声明}

⑦.子代选择器

通过元素的子代关系,匹配元素
子代关系,一级的嵌套
选择器1>选择器2>选择器3....{样式声明}
后代选择器和子代可以混写
#d1 p>span{}
#d1 >p sapn{}

⑧伪类选择器

匹配元素不同状态下的样式
1.链接未被访问时的状态
:link{样式声明}
2.链接已访问的状态
:visited{样式声明}
3.鼠标悬停时的状态
:hover{样式声明}
4.元素被激活时的状态
:active{样式声明}
5.元素获取焦点时的状态
:focus{样式声明}

⑨选择器权值问题

!imprtant    >1000
内联样式      1000
id选择器      100
类选择器      10
伪类选择器     10
元素选择器     1
通用选择器*    0
继承的样式     无
权值:便是当前选择器的重要程度,权值越大优先级越高
特点:
1.当一个选择器中含有多个选择器时,需要将所有选择器的权值进行相加,结果越大优先级越大
2.权值相同时,使用就近原则
3.群组选择器权值不能相加,单独计算
4.样式后面添加!important直接获得最高权值,内联样式不能添加!important
5.权值计算结果不能超过这个权值的最大数量级(1万个1相加,也比10小)

四.尺寸和边框

1.尺寸(绝对单位 相对单位 宽高)

设置元素在页面中的宽高
width:
取值:以px为单位的数字
      rem为单位的数字
      %,父元素宽度百分比
height:
取值:以px为单位的数字
     rem为单位的数字
     %,父元素没有定义高度,就失效
       父元素定义高度,就是这个高度的百分比
max-width  限制元素最大的宽度
min-width 限制元素最小的宽度
max-height
min-hieght
注意,如果给img设置max-width:100%
这里的100%是图片原始尺寸的100%
意味着,这张图片可以缩放,但是最大不能超过本身原始尺寸的100%
尺寸的单位
1.px像素
2.in尺寸  1 in=2.54cm
3.pt磅值,多于用定义字号大小
        1pt=1/72in
4.cm
5.mm
6.em:以父元素设置的值为一个基本单位,1.5em 就是1.5个基本单位
7.rem:以html标签设置的值为一个基本danwei
       如果html没有设置值,1rem 默认为16px
8.% 多数是父元素设置值的百分比

2.页面中可以设置尺寸的元素

1.所有块级元素都可以设置尺寸
2.大多数行内元素不能设置尺寸
3.所有行内块可以设置尺寸(input)
4.所有自带宽高属性的元素，都可以设置宽高(img，table)

3.元素默认的宽高值是多少

块级	行内	行内块
不写宽度，默认宽度是父元素的100%不写高度，高度靠内容撑开，如果没有内容，高度为0	不写宽高时，宽高都是靠内容撑开。没有内容就为0	不写宽高，浏览器会给一个默认的宽高。但是，不同浏览器给的默认宽高，大小不同。input是不同浏览器差异最大的元素，需要写css reset

4.溢出的处理+合法的颜色值

当内容较大，元素区域较小，就会发生溢出效果
默认都是纵向溢出
overflow: visible; 默认值，溢出部分可见
         hidden； 溢出部分不显示
         scroll；  显示滚动条
         auto；不溢出就没有滚动条，溢出才有
overflow-x: 设置水平轴的滚动条
overflow-y: 设置水平轴的滚动条
实现横向溢出的方式
需要在比较宽的容器上，添加一个窄的父元素，给这个父元素写溢出属性
溢出的底层很特殊很复杂，可以解决很多css中的特殊问题
但是，最佳方案都不是用溢出解决

1.英文单词(red ,green,yellow.......)
2.#rrggbb 6个16进制的值 #000000 黑色  #ffffff 白色
3.#aabbcc--->#abc   #069--->#006699  #36d--->#3366dd
  #f00 #0f0 #00f #ff0 #0ff #f0f  #ddd #000 #fff  #999  #eee
4.十进制 rgb(r,g,b)  每一个数的取值范围 0~255   0~ff
5.rgba(r,g,b,a) alpha透明度0~1  1为不透明，0为全透明
不常用的颜色取值
6.rgb(r%,g%,b%)  0~100%   0~255的百分比
7.hsl(h,s,l) 色段，饱和度，亮度 

5.边框

①边框的简写方式

border: width  style  color;
width: 边框的宽度
style: 边框的样式
      取值：solid 实线
            dotted 虚线(点)
            dashed 虚线(线)
            double 双实线
color:边框的颜色,可以取合法的颜色值，transparent（rgba(,,,0)）
细节：1.最简方式 border:style;
      2.去除边框  border:0;     border:none;

②边框单边的定义

单独定义一条边的3个属性
border-top/right/bottom/left: width  style  color;

③单属性的定义

同时设置4条边的某一个属性
border-width
border-style
border-color

④单边单属性定义

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

⑤边框的倒角

把边框倒成圆角
一次性过设置4个角
border-radius:
取值:以px为单位的数字
     %   50%就是圆
单角的设置
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;

⑥边框阴影(跟边框没关系)

box-shadow:h-shadow  v-shadow  blur  spread  color；
h-shadow  阴影水平偏移量
v-shadow      垂直偏移量
blur        阴影的模糊程度
spread     阴影大小
color       阴影的颜色
阴影的最简方式  box-shadow:h-shadow  v-shadow；
内部阴影 box-shadow:h-shadow  v-shadow  blur  spread  color  inset；

⑦轮廓

绘制于边框外的线条
outline:width style color;
outline:0;取消轮廓

五.框模型—盒子模型

1.框模型是什么

框模型----元素在页面上实际占地空间的计算方式(计算公式)
默认的盒子模型
元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素实际占地高度=上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

2.外边距+外边距的特殊效果

改变外边距，元素会发生位移效果
当4个方向外边距发生了冲突，保证左和上准确
①语法
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:20px auto;
margin:v1 v2 v3;  v1:上   v2:左右    v3:下
margin:v1 v2 v3 v4;  上右下左
margin的使用时机：元素位置的微调

外边距的特殊效果
1.外边距合并  
两个垂直(纵向)相遇的外边距会合并成一个，值以大的为准
2.自带外边距的元素  body有8px
  写样式刚开始 就清空所有元素的内外边距 ----->css  reset
3.块级，行内，行内块的差异
4.外边距溢出  在父元素的第一个儿子的位置处，添加空的<table></table>

3.内边距

边框到内容区域之间的距离
改变内边距，视觉上是改变元素的大小，但是元素的尺寸并没有改变
内边距的颜色，就是元素的背景色
内边距的使用场合，撑开元素
padding没有auto
padding:v1; 设置4个方向内边
padding-top
padding-right
padding-bottom
padding-left
简写方式
padding:v1;
padding:v1 v2;   v1:上下   v2:左右
padding:v1 v2 v3; v1:上  v2:左右  v3:下
padding:v1 v2 v3 v4;  上右下左

4.设置框模型计算方式

默认
元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
改变框模型的计算方式
box-sizing:content-box;  默认的框模型计算方式
           border-box；设置width包含内容区+padding+border
                   元素实际占地宽度公式：设置width+左右外边距
当内部元素的尺寸使用百分比设置的时候，一般都要使用border-box

六.背景

1.背景颜色

background-color:合法颜色值  transparent

2.背景图片

background-image: url(09.png);  资源添加双引号，单引号，不加引号都正确

3.背景图片的平铺

background-repeat: repeat; 默认值，平铺
                   no-repeat 不平铺
                   repeat-x  x轴平铺
                   repeat-y  y轴平铺

4.背景图片的定位

background-position:
取值 1.x  y 以px为单位的数字
     2.x% y%
     3.关键字  x:left/center/right   y:top/center/bottom
注意，当background-position:20%;只取一个值，设置的x，y轴默认居中

5.设置背景图片的尺寸

background-size:
取值，1个值，同时设置x,y轴大小
      2个值，分别设置x,y轴大小
      3.以px为单位的数字
      4.%
其他取值
     5.cover 覆盖，背景图等比例缩放，完全充满容器，背景图有可能显示不完整！
     6.contain,包含，背景图等比缩小，让容器显示一张完整背景图，容器可能有空白！

6.背景图片的固定

background-attachment: 
scroll； 默认值，背景图随着页面滚动条，滚动
fixed; 背景图相对于body固定，不随着页面滚动条滚动
      但是只会显示在本容器当中
      当图片进行定位时，相对于body去定位

7.简写方式

background:color  url()  repeat  attachment  position;
注意，简写方式中没有size
最简方式  background：color
          background：url（）
使用简写方式要注意，不要用简写方式去替换之前的部分样式

七.渐变 gradient

1.什么是渐变

渐变是指多种颜色,平缓变化的一种效果

2.渐变的主要因素

色标： 一种颜色，这种出现的位置
一个渐变至少2个色标

3.渐变的分类

1.线性渐变，以直线的方式填充渐变色
2.径向渐变,以圆的方式填充渐变色
3.重复渐变，将线性，径向，反复的实现

4.线性渐变

属性 background-image:
取值：linear-gradient(方向,色标1,色标2,..........);
方向：1.关键字,写终点   to top  ↑
                       to right  →
                       to  bottom  ↓
                       to left   ←
     2.角度值   0deg   to top
                90deg  to right
               180deg  to bottom
               270deg  to left
色标  1.位置%
      2.位置px
      3.不写位置，默认每个元素平均分配

5.径向渐变

background-image: radial-gradient(半径 at 圆心x 圆心y,色标1,色标2,..........);
半径，以px单位的数字
圆心，1.关键字 x:left/center/right  y:top/center/bottom
      2.以px为单位的数字
      3.%
色标，1.位置使用%，是半径的百分比
      2.位置使用px，使用px跟半径没关系了

6.重复渐变

①重复的线性

background-image:repeating-linear-gradient(方向,色标1,色标2,...)

②重复的径向

background-image: repeating-radial-gradient(半径 at 圆心x 圆心y,色标1,色标2,..)

7.线性渐变的浏览器兼容性问题(IE8.0以下不考虑)

写css兼容的行为，叫做写css hack
在代码中添加，代表内核的前缀,使用不同浏览器打开，会自动执行对应内核的代码
-webkit-  chrome/safari
-moz-    firefox
-o-       opera
-ms-     IE
如果线性渐变，添加了前缀做兼容，方向一定写起点(不能有to)，不能写终点
              不添加前缀，方向要加to，写终点
如果想做兼容，至少写4套
background: -moz-linear-gradient(top, #27b1f6 0%, #0aa1ed 100%);
background: -webkit-linear-gradient(top, #27b1f6 0%, #0aa1ed 100%);
background: -o-linear-gradient(top, #27b1f6 0%, #0aa1ed 100%);
background: -ms-linear-gradient(top, #27b1f6 0%, #0aa1ed 100%);

八.文本格式化(*******)

1.字体属性(字体大小,加粗,样式,简写)

1.设置字号的大小
font-size: 
取值，px/pt为单位的数字
      em/rem
2.font-family    
font-family:微软雅黑,"mv boli",chiller;
3.字号的加粗
font-weight:
  取值,1关键字   lighter  normal  bold  bolder
      2.100的整倍数  100~~1000 超过1000就失效了
                 400---normal    600---bold   700--bolder
4.字体的样式
font-style:  italic    斜体
           normal   普通，没有样式
5.小型大写字母
font-variant: small-caps;
6.字体设置的简写
font:style variant weight size family;
最简方式  font:size family;

2.文本属性(文本颜色,对齐方式,行高,文本线条的修饰,首行缩进,文本阴影)

1.文本颜色
color：合法的颜色值
2.文本对齐方式
text-align: left/center/right/justify
详细说明：块级水平对齐不能使用text-align：center.  只能用margin:0 auto;
          text-align只对内部的文本，行内，行内块有效
3.文本的垂直对齐方式,行高
定义一行文本的高度
特点：如果行高大于文本本身的大小，文本会在行高范围内，垂直居中显示
line-height: 以px为单位的数字
            不带单位的数字，代表字号的倍数
通常会把行高设置为与容器高度相同，让文本在容器垂直居中
但是，如果文本超过一行，不建议使用(使用内边距去调整)
4.文本线条的修饰
  text-decoration: none;  a标签去除下划线
                 underline 添加下划线
                 overline   添加上划线
                 line-through  添加删除线
5.首行的缩进
text-indent:  取值以px为单位的数字
6.文本阴影
text-shadow: h-shadow  v-shadow  blur   color;
h-shadow  水平偏移量
v-shadow  垂直偏移量
blur       模糊程度
color      颜色

九.表格的样式

1.表格的常用属性

①table

尺寸，边框，背景，文本，内外边距，都有效
但是，注意border只会设置table的边框，只有最外边的一圈

②td/th

尺寸，边框，背景，文本，内边距，都有效
外边距无效
vertical-align:  设置文本垂直对齐方式
             取值  top/middle/bottom

2.table是一种特殊的显示方式

table的真正大小，设置的尺寸和内容，谁大听谁大
同一行中，所有列的高度，以最高的为准
不同行中，相同列的宽度，以最宽的为准
table在浏览器的渲染方式，先把所有内容读取到内存中，再一次性渲染。效率低

3.表格特有属性

①边框合并

border-collapse:separate ;  默认缺省值，边框分离状态
                collapse  边框合并状态

②边框的边距(td不能设置margin,所以使用边框边距来设置)

border-spacing: 以px为单位的数字;
前提，边框是分离状态的时候才有效

③标题的位置

caption-side: top;默认 在表格的上方
bottom  在表格的下方

④设置表格显示规则

table-layout:auto；默认值 自动布局表格 fixed; 固定布局的表格

自动布局表格
单元格的大小会自动适应内容
表格复杂时，表格的加载速度较慢
自动布局比较灵活
适用于不确定每列大小，并且不复杂的表格

固定布局表格
单元格大小，严格遵循设置的尺寸
任何情况下，都会加速表格加载
不够灵活
适用于确定每列大小的表格

十.定位(*****)

1.什么是定位

控制元素在页面中的位置

2.分类

1.普通流定位
2.浮动定位
3.相对定位
4.绝对定位
5.固定位

3.普通流定位(默认文档流定位)

1.每个元素在页面上都有自己的空间(所有元素皆为框)
2.每个元素都是从父元素的左上角开始渲染
3.块级元素是按照从上往下的方式，逐个排列，单独成行
4.行内和行内块是多个元素在一行中显示，从左往右排列，一行放不下就换行

4.浮动定位

让块级元素横向显示
float:  none;默认值，无任务浮动效果---->默认文档流
       left;让元素浮动之后停靠在父元素的最左边，或者其他已浮动的后面
      right;让元素浮动之后停靠在父元素的最右边，或者其他已浮动的后面
浮动特点：
1.元素一旦浮动，脱离文档流（不占页面空间，后面没有脱离文档流的元素会上前补位）
2.浮动元素，会停靠在父元素的最左边/最右边，停靠其他已浮动元素的边缘上
3.父元素横向放不下所有的已浮动元素，最后显示不下的部分，会自动换行
4.浮动用于解决块级元素横向显示的问题

5.浮动引发的特殊情况

①浮动元素有占位问题
当父元素显示不下所有浮动元素时，显示不下的元素会自动换行
但是，已浮动元素，会根据自己的浮动方向发生占位。不让换行的元素占据自己的位置。
②元素一旦浮动，如果次元素没有设置宽度，浮动元素的宽度靠内容撑开
③元素一旦浮动，都会变为块级元素（设置尺寸有效，垂直外边距有效）
④文本，行内，行内块元素，table，是不会被浮动元素压在下面，而是避开浮动元素显示
ps:元素脱离文档，会发生4件事
1.元素不占页面空间
2.后续未脱离文档流的元素上前补位
3.如果脱离文档流的元素未设置宽度，宽度靠内容撑开
4.元素一旦脱离文档流，会自动变成块级元素

6.清除浮动元素带来的影响

浮动元素，会给后面不脱离文档流的元素带来影响，后续元素会上前补位
clear: left；清除左浮动带来的影响
     right;清除右浮动带来的影响
     both；左浮动和右浮动，都清除
     none;不清除，默认值

7.高度坍塌

发生高度坍塌的原因
父元素没有设置高度，靠子元素撑开高度，但是所有子元素都浮动，父元素在文档流中失去了所有儿子，就认为自己没有高了
解决方案
1.给父元素设置高度，可行！！但是很多时候，不知道整体是多少！！！
2.父元素也浮动，弊端，会影响其他元素结构
3.给父元素设置overflow：hidden/auto;弊端，父元素想溢出显示，就不行了，不推荐！！
4.给父元素添加一个不设置高不设置宽的空块级元素，当做小儿子
  这个小儿子，设置clear:both.
5.使用伪类
   ::after{
 content: "";
 display: block;
 clear: both;
}

8.浮动

元素一旦浮动，会脱离文档流
脱离文档流的元素会发生4件事
1.不占页面空间
2.后续元素上前补位
3.如果脱离文档流的元素，未定义宽度，元素脱离文档流后，宽度是靠内容撑开
4.元素一旦脱离文档流，会变成块级元素

9.其他样式属性(display visibility vertical-align 光标的设置)

1.显示方式

①什么是显示方式
决定了元素在网页中的表现形式(块级，行内，行内块，table....)
②语法
display:block     让元素按照块级元素的规则去显示
        inline     让元素按照行内元素的规则去显示
        inline-block  让元素按照行内块级元素的规则去显示
        table      让元素按照table元素的规则去显示
        none     隐藏，脱离文档流的隐藏

2.显示效果

visibility：visible； 默认值，可见的
          hidden；隐藏
考试题，和面试
visibility：hidden和display：none；
答：visibility：hidden 的隐藏，是不脱离文档流的隐藏，占空间
    display：none； 是脱离文档流的隐藏，不占空间

3.透明度

gba(r,g,b,alpha)
opacity:0~1   0全透明，1不透明
问题，rgba(r,g,b,alpha)的区别opacity
rgba()只会改变当前颜色的透明度
opacity要是跟元素相关的颜色，都会改变，包括后代元素的所有颜色

4.垂直对齐方式

vertical-align
①表格中使用td tr table
取值：top/middle/bottom
②给img或者行内块定义vertical-align
改变的是元素前后的文本/行内元素，与本元素的垂直对齐方式
img--->top/middle/bottom /  baseline（默认值） 同常，会把默认的baseline修改成其他值
行内块 没有baseline 的取值  只有top/middle(默认值)/bottom /

5.光标的设置

cursor:
取值：1.default 默认值，箭头
      2.pointer 手指头
      3.crosshair  十字
      4.wait  等待
      5.help  帮助
      6.text   文本

6.列表的样式

1.设置列表项的样式
list-style-type: disc/circle/square/none;
2.把列表项设置成图片(图片需要小)
list-style-image: url(sinablog.png);
3.列表项的位置   ul自带上下外边距16px。左内边距40px
list-style-position:outside(默认)在li外，在ul的左内边距中
                  inside; 在li内部
4.简写方式
list-style:type  image  position;
项目中最常用的写法  list-style:none;  给ul去点
项目，经常使用ul>li替代div布局

10.相对 绝对 固定 定位

1.公共语法

position
取值：static 默认值，静态（默认文档流）
      relative 相对定位
      absolute 绝对定位
      fixed   固定定位
注意，当一个元素被position修饰，并且取值为relative,absolute,fixed其中一种时
1.这个元素被称为已定位元素
2.这个元素解锁了4个偏移属性 
  top：元素到顶端的距离
  right:
  bottom:
  left: 元素到左边的距离
3.同时定义top/bottom，听top
  同时定义left/right   听left

2.相对定位

position:relative;配合偏移属性使用
1.相对定位是不脱离文档流
2.相对定位参照物,相对自己原来的位置做偏移
3.如果相对定位元素，不写偏移属性，效果和没写定位一样
使用相对定位的场合
1.元素位置的微调，类似于margin
2.相对定位，一般作为绝对定位元素的祖先级已定位元素，使用！！！！

3.绝对定位

position:absolute
1.绝对定位脱离文档流
2.相对谁偏移
①如果该元素，没有已定位的祖先级元素，相对body左上角做偏移
②相对于最近的，已定位的，祖先级元素做偏移
3.祖先级，已定位元素，用什么定位好
项目中，经常使用祖先级已定位元素为relative

4.固定定位

position：fixed;
永远以body左上角偏移
脱离文档流

5.堆叠顺序

1.默认的堆叠顺序，后写的定位元素，堆叠顺序高(html编写顺序)，永远大于0，小于1
2.手动设置堆叠顺序 z-index：取值无单位数字
3.float的二楼，和定位的堆叠，不是一个体系，不能比较
4.只有已定位元素才支持z-index
5.堆叠顺序，对父子级关系无效，儿子永远在爹上面显示