CSS

1、CSS的引入方式                                                                                                     

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

html的缺陷:

1,不能适应多种设备

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

3,数据和显示没有分开

4,功能不够强大

css优势:

1,使数据和显示分开

2,下降网络流量

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

4,使开发效率提升了 

行内样式

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

View Code

内接样式

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

</style>

View Code

外接样式-连接式

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

View Code

外接样式-导入式

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

View Code

二 、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}

id选择器

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上.

3、高级 选择器                                                                                                       

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;
            }

属性选择器

5、伪类选择器                                                                                                                   

伪类选择器通常用在超连接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;
        }

nth-child()

6、伪元素选择器                                                                                                                                                                                                                    

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

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

伪元素选择器 

7、css的继承性和层叠性                                                                                                      

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

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

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

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

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

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

　　　　（2）数数 数 id class 标签 　　　　

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

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

 8、层叠性权重相同处理                                                                                                      

!important 的使用。

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

 9、盒模型                                                                                                                           

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

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

盒模型示意图：

 

盒模型的属性：

width：内容的宽度

height: 内容的高度

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

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

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

盒模型的计算： 

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

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

10、padding--内边距                                                                                                                                

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

另外padding的区域是有背景颜色的。而且背景颜色和内容的颜色同样。也就是说background-color这个属性将填充全部的border之内的区域 

padding的设置：

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

描述的方法有两种：

一、写小属性,分别设置不一样方向的padding

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

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

/*上 右 下 左*/
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/

11、border--边框                                                                                                                                     

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

按照3要素来写border：

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

View Code

按照方向划分：

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

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

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

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

View Code

上面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;
        }

View Code

12、margin--外边距                                                                                                                            

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

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

margin-bottom: 100px;

View Code

十3、标准文档流                                                                                                                                 

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

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

1.空白折叠现象

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

2.高矮不齐，底边对齐

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

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

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

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

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

行内元素：

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

　　霸占一行，不能与其余任何元素并列；能接受宽、高。若是不设置宽度，那么宽度将默认变为父亲的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）固定定位

十5、浮动                                                                                                                                                

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;
        }

clear:both

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

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

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

伪元素清除法

　　4，overflow:hidden(经常使用)

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

overflow:hidden实际上是一个BFC区域: http://www.javashuo.com/article/p-ezyacvwn-v.html。

十6、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;

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

文本对齐：

　　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% “宋体” 

十8、超连接导航栏案例                                                                                                                           

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;
        }

V案例

十9、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 雪碧图应用原理：
有一张大的合并图, 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

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

不足：

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以后，该属性固定背景图片不随浏览器的滚动而滚动

 二10、定位                                                                                                                                

定位有三种：

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

相对定位:相对于本身原来的位置定位。

现象和使用：

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

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

特性：

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

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

用途：

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

参考点：本身原来的位置作参考点。

绝对定位： 

特性： 

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

参考点： 

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

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

2、以父辈盒子做为参考点 

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

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

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

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

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

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

特性: 

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

参考点：

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

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

二11、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，从父现象：父亲怂了，儿子再牛逼也没用