CSS

一、CSS的引入方式                                                                                                     

 css:cascading style sheet,层叠样式表。css的作用就是给html页面标签添加各种样式,定义网页的显示效果。

html的缺陷:

1,不能适应多种设备

2,要求浏览器必须智能化足够庞大

3,数据和显示没有分开

4,功能不够强大

css优点:

1,使数据和显示分开

2,降低网络流量

3,使整个网站视觉效果一致

4,使开发效率提高了 

行内样式

<div>
    <p style="color: green">我是一个段落</p>
</div>

内接样式

<style type="text/css">
    /*写我们的css代码*/
        
    span{
    color: yellow;
    }

</style>

外接样式-链接式

<link rel="stylesheet" href="./index.css">

外接样式-导入式

<style type="text/css">
        @import url('./index.css');
</style> 

二 、css选择器                                                                                                                                        

1,标签选择器

标签选择器可以选中所有的标签元素,比如div,ul,li,p等,不管标签隐藏的多深,都能选中,选中的是所有的,而不是一个,所以是'共性'.

body{color:red;
      font-size:12px;
  }    
标签选择器
p{color:green;
    font-size:20px;
}
span{color:yellow;
}

2, id选择器

注意同一个页面中id不能重复,任何标签都可以设置id(#选中id)

#box{
        background:green;      
}
#child1{color:red}
#child2{font-size:14px}

3, 类选择器

类就是class,与id相似,任何的标签都可以加类,类可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格分开。

.box{color:green}
.child1{font-size:14px}
.child2{color:red}
.child3{background:yellow}

公共类  共有的属性
<div class='box'>
        <p class='child1'>aaa</p>
        <p class='child2'>bbb</p>
        <p class='child3'>ccc</p>

注意:标签选择中尽可能的用class,id大多用在js上.

三、高级 选择器                                                                                                       

1，后代选择器

使用空格表示后代选择器。顾名思义，后代包括儿子，孙子，重孙子

.container p{
     color: red;        
 }
 .container .item p{
     color: yellow;
 }

2，子代选择器

使用‘>’表示子代选择器,比如div>p,表示只选中当前div元素选中的子代p.

.container>p{
    color: yellowgreen;
}

3, 并集选择器

多个选择器之间使用逗号隔开,表示选中页面中的多个标签。一些共性的元素,可以使用并集选择器。

 h3,a{
     color: #008000;
     text-decoration: none;
               
}

4，交集选择器

使用.表示交集选择器,第一个标签必须是标签选择器,第二个标签必须是类选择器。表示两者选中之后元素的共有特性.

比如有一个<h4 class='active'></h4>这样的标签。
h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00BFFF;
}

 四 、属性选择器                                                                                                                  

属性选择器：就是根据标签中的属性，选中当前的标签。

/*根据属性查找*/
            /*[for]{
                color: red;
            }*/
            
            /*找到for属性的等于username的元素 字体颜色设为红色*/
            /*[for='username']{
                color: yellow;
            }*/
            
            /*以....开头  ^*/ 
            /*[for^='user']{
                color: #008000;
            }*/
            
            /*以....结尾   $*/
            /*[for$='vvip']{
                color: red;
            }*/
            
            /*包含某元素的标签*/
            /*[for*="vip"]{
                color: #00BFFF;
            }*/
            
            /**/
            
            /*指定单词的属性*/
            label[for~='user1']{
                color: red;
            }
            
            input[type='text']{
                background: red;
            }

五、伪类选择器                                                                                                                   

伪类选择器一般用在超链接a标签中，使用a标签的伪类选择器，一定要遵循爱恨准则，LoVe,HAte

/*没有被访问的a标签的样式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*访问过后的a标签的样式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠标悬停时a标签的样式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠标摁住的时候a标签的样式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }

css3的一种选择器:

/*选中第一个元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*选中最后一个元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*选中当前指定的元素  数值从1开始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶数*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇数*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔几换色  隔行换色
             隔4换色 就是5n+1,隔3换色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }

六、伪元素选择器                                                                                                                                                                                                                    

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }
        
        
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

七、css的继承性和层叠性                                                                                                      

css有两大特性：继承性和层叠性。

　　-- 继承：给父级设置一些属性，子级继承了父级的该属性。

　　　　记住：有一些属性可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

　　　　但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

　　-- 层叠性： 权重的标签覆盖掉了权重小的标签。 谁的权重大，浏览器就会显示谁的属性 　　　

　　　　（1）行内> id > class > 标签 **** 　　　　　　 1000 > 100 > 10 > 1 　　　　

　　　　（2）数数 数 id class 标签 　　　　

　　　　（3）先选中标签，权重一样，以后设置为主

　　　　（3）继承来的属性 它的权重为0 ，与选中的标签没有可比性
　　　　（4）如果都是继承来的属性，保证就近原则
　　　　（5）都是继承来的属性，选择的标签一样近，再去数权重

 八、层叠性权重相同处理                                                                                                      

!important 的使用。

！important:设置权重为无限大 
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局

 九、盒模型                                                                                                                           

在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。 

盒模型示意图：

 

盒模型的属性：

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

盒模型的计算： 

盒子的真实宽度=width+2*padding+2*border

盒子的真实宽度=height+2*padding+2*border

十、padding--内边距                                                                                                                                

padding：就是内边距的意思，它是边框到内容之间的距离

另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域 

padding的设置：

padding有四个方向，分别描述4个方向的padding。

描述的方法有两种：

1、写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

2、写综合属性，用空格隔开

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;

一些标签默认有padding：

比如ul标签，有默认的padding-left值。

那么我们一般在做站的时候可以使用通配符选择器，清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

*{
  padding:0;
  margin:0;    
}

But，这种方法效率不高。所以我们要使用并集选择器来选中页面中应有的标签（有人已经写好了这些清除默认的样式表，reset.css）

https://meyerweb.com/eric/tools/css/reset/

十一、border--边框                                                                                                                                     

border:边框的意思，描述盒子的边框；边框有三个要素： 粗细 线性样式 颜色。

按照3要素来写border：

border- 3px;
border-style: solid;
border-color: red;
/*
border- 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/

按照方向划分：

border-top- 10px;
border-top-color: red;
border-top-style: solid;

border-right- 10px;
border-right-color: red;
border-right-style: solid;

border-bottom- 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left- 10px;
border-left-color: red;
border-left-style:solid;

上面12条语句，相当于 bordr: 10px solid red;

使用border来制作小三角：

/*小三角 箭头指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

十二、margin--外边距                                                                                                                            

margin：外边距的意思。表示边框到最近盒子的距离。 

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;

margin-bottom: 100px;

十三、标准文档流                                                                                                                                 

标准文档流：宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画。

标准文档流下 有哪些微观现象？

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐，底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行，一行写不满，换行写

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

十四、块级元素和行内元素                                                        

学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：
　　行内元素
　　块级元素
行内元素和块级元素的区别：（非常重要）

行内元素：

　　与其他行内元素并排；不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：

　　霸占一行，不能与其他任何元素并列；能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。 

块级元素和行内元素的分类：

在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。

从HTML的角度来讲，标签分为：
文本级标签：p、span、a、b、i、u、em。
容器级标签：div、h系列、li、dt、dd。
　　PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

　　行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。

　　块级元素：所有的容器级标签都是块级元素，还有p标签。 

块级元素和行内元素的相互转换：

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

 

 

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度；这个div可以和别人并排了

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：display: block

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

此时这个span能够设置宽度、高度；此时这个span必须霸占一行了，别人无法和他并排；如果不设置宽度，将撑满父亲

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，就需要脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动

（2）绝对定位

（3）固定定位

十五、浮动                                                                                                                                                

float：表示浮动的意思。它有四个值。

　　none: 表示不浮动，默认

　　left: 表示左浮动

　　right：表示右浮动

浮动的四大特性：

　　1.浮动的元素脱标

　　2.浮动的元素互相贴靠

　　3.浮动的元素由"字围"效果

　　4.收缩的效果

  清除浮动:       

　　1，给父盒子设置高度:

　　　　　-- 它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏　　　

　　2，clear:both

　　　　-- clear：意思就是清除的意思。有三个值：

　　　　　　left：当前元素左边不允许有浮动元素

　　　　　　right：当前元素右边不允许有浮动元素

　　　　　　both：当前元素左右两边不允许有浮动元素

　　　　　　给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

html结构：
<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both  清除别人对我的浮动影响-->
            <!-- 内墙法 -->
            <!-- 无缘无故加了div元素  结构冗余 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>        

css样式:
*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

　　3，伪元素清除法(常用)

　　　　-- 给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

.clearfix:after{
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden   
  }     

　　4，overflow:hidden(常用)

　　　　-- overflow属性规定当内容溢出元素框时发生的事情。

overflow:hidden其实是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522。

十六、margin的用法                                                                                                                                     

margin塌陷问题： 

html结构：
<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>

css样式：
*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

 当给两个标准流下的兄弟盒子设置垂直方向上的margin时，那么以较大的为准，这种现象叫塌陷。当我们给两个标准流下的兄弟盒子设置浮动后，就不会出现margin塌陷的问题。

margin：0 auto：

　　-- 表示上下外边距离为0，左右为auto的距离，此时就发现盒子居中了。另外如果给盒子设置浮动，那么margin:0 auto失效。 

使用margin：0 auto;注意：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确widthr;

2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了、固定定位、绝对定位，margin:0 auto 就不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

 十七、文本属性和字体属性                                                                                                                     

文本对齐：

　　text-align 属性规定元素中的文本的水平对齐方式。

　　属性值：none | center | left | right | justify

文本颜色：

　　color属性

文本首行缩进：

　　text-indent 属性规定元素首行缩进的距离，单位建议使用em

文本修饰：

　　text-decoration属性规定文本修饰的样式

　　属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)

 字体属性      

字体大小：

　　font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。

字体粗细:

　　font-weight表示设置字体的粗细

　　属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）

字体系列:

font-family

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。 

行高 line-height:

针对单行文本垂直居中:行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。

针对多行文本垂直居中:

行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。

第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px

第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px。 

font-family介绍:

使用font-family注意几点：

1.网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。如果页面中需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman

2.为了防止用户电脑里面，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。

3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体；就自动的变为后面的中文字体：

font-family: "Times New Roman","微软雅黑","宋体"; 

4.所有的中文字体，都有英语别名，我们也要知道： 微软雅黑的英语别名：font-family: "Microsoft YaHei"；宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号。 
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 反过来，比如： font:16px/48px “宋体”;等价于 font:16px/300% “宋体” 

十八、超链接导航栏案例                                                                                                                           

html结构：
<div class="nav">
        <ul>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
        </ul>
    </div>

css代码如下：
*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            /*height: 40px;*/
            overflow: hidden;
            margin: 100px auto ;
            background-color: purple;
            /*设置圆角*/
            border-radius: 5px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .nav ul li a{
            display: block;
            width: 160px;
            height: 40px;
            color: white;
            font-size: 20px;
            text-decoration: none;
            font-family: 'Hanzipen SC';
        }
        /*a标签除外，不继承父元素的color*/


        .nav ul li a:hover{
            background-color: red;
            font-size: 22px;
        }

十九、background                                                                                                                                      

颜色表示法有三种：单词、rgb表示法、十六进制表示法

rgb:红色 绿色 蓝色 三原色：
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。如果此项的值，是255，那么就说明是纯色。

16进制表示法：所有用#开头的值，都是16进制的；ff就是10进制的255 ，00 就是10进制的0。

background-color属性表示背景颜色；

background-img:表示设置该元素的背景图片；

background-repeat:表示设置该元素平铺的方式:  属性值

background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置

　　属性值：

雪碧图技术（精灵图技术）

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：
有一张大的合并图, 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

我们可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，

那么我们可以此属性来制作通天banner。

background:  red  url('./images/banner.jpg')  no-repeat   center top;

background-attach: 设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

 二十、定位                                                                                                                                

定位有三种：

1.相对定位   2.绝对定位   3.固定定位

相对定位:相对于自己原来的位置定位。

现象和使用：

1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。

2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

特性：

1.不脱标；2.形影分离；3.老家留坑（占着茅房不拉屎，恶心人）

所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

用途：

1.微调元素位置；2.做绝对定位的参考（父相子绝）。

参考点：自己原来的位置做参考点。

绝对定位： 

特性： 

1.脱标 ；2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。 

参考点： 

一、单独一个绝对定位的盒子 

1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。 

二、以父辈盒子作为参考点 

1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷； 

2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点； 

3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点； 

注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。 

还要注意，绝对定位的盒子无视父辈的padding。

固定定位：固定当前的元素不会随着页面滚动而滚动

特性: 

1.脱标； 2.遮盖，提升层级； 3.固定不变。

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 ；2.固定导航栏 ；3.小广告。 

二十一、z-index                                                                                                                         

z-index的四大特性：

　　1，z-index 值表示谁压着谁，数值大的压盖住数值小的,；

　　2，只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

　　3，z-index值没有单位，就是一个正整数，默认的z-index值为0，如果都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，

 

永远压住没有定位的元素。

 

• • 4，从父现象：父亲怂了，儿子再牛逼也没用

• •