什么是CSS

CSS 层叠样式表（Cascading Style Sheets），用于定义HTML内容在浏览器内的显示样式

CSS发展

96年（W3C）推出CSS1
98年（W3C）推出CSS2
现在（W3C）推出CSS3 手机对CSS3兼容性较好，因此手机端开发常用CSS3和HITML5

为什么学习CCS

CSS简化HTML相关标签，网页体积小，下载快
解决内容与表现分离的问题
更好地维护网页，提高工作效率

CSS选择的艺术

CSS基础语法

CSS规则由两部分构成：选择器，声明

声明写在样式分隔符 { } 中，声明由属性 : 值构成，如

<head>
    <style type="text/css">
    p,h1,h2{font-size:10px;color:blue;}    <!-- 最后一个分号可有可无，但是建议都加上分号 -->
    </style>
</head>
<body>
    <p>test</p>
    <h1>test</h1>
    <h2>test</h2>
</body>

具有相同值的选择题可以写在一起，用逗号分开。

注释：/*注释*/

注意：样式必须写在<style>标签内才能在网页中表现出来。每条声明之间最好换行，每个选择器之间最好换行，便于阅读。

CSS使用方法

行内样式（内联样式）

多用于某些元素需要设置特殊样式时。在开始标签内添加style样式属性，如

<p style="color:red;" >内容</p>

内部样式表（嵌入样式）

把css样式写在标签内，标签要放在标签内，以下是固定格式

<style type="text/css">
    样式...
</style>

对于低版本的浏览器，不识别<style>标签，因此要对样式内容进行注释，这样就算低版本的浏览器不识别<style>标签，也不会把样式内容暴露出来。

外部样式表

把css样式代码写在独立的一个文件中，扩展名：css文件名.css

直接把<style>标签中的样式内容写在css文件中，然后在html文件中引入外部css文件。标签同样要写在<head>标签内

<link href="xx.css" rel="stylesheet" type="text/css" />

导入式样式

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

注意：导入式存在兼容性问题。因此实际开发中，常用外部样式表。

使用外部样式表的好处

css和html分离
多个文件可以使用同一个样式文件
多文件引用同一个css文件，css只需下载一次

css使用方法优先级

对于同一个元素，使用多种css方法，优先级为行内样式＞内部样式＞导入样式？外部样式（谁离所设置的元素越近，谁优先级越高）

CSS选择器

标签选择器

以html标签作为选择器，如

<style type="text/css">
    p{font-size:20px;color:red;}
</style>

通过标签选择器设置样式，那使用该标签的内容都引用该样式。

类选择器

先为html标签添加class属性，再通过类选择器来为具有此class属性的元素设置css样式，如

<style type="text/css">
    .red{color:red;}
</style>
<body>
    <h1 class="red">内容1</h1>
    <p>内容</p>
    <p class="red">内容3</p>
</body>
 
<!-- class名为red的元素字体颜色都为红色。 -->

对相同class名的不同元素进行样式设置使用如下规则

<style type="text/css">
    p.red{font-size:40px;}
    h1.red{font-size:20px;}
</style>

同一个元素也可以拥有多个class名，如

<style type="text/css">
    .one{text-decoration:underline;}
</style>
<body>
    <p class="red one">test</p>
</body>

ID选择器

<style type="text/css">
    #red{color:red;}
</style>
<body>
    <h1 id="red">内容1</h1>
    <p>内容</p>
    <p id="red">内容3</p>
</body>

注意：一个元素只能有唯一的id名，因为id是Javascript中需要用到的，若元素id名不唯一，Javascript在查找id时就会报错。

全局选择器

所有标签设置样式，一般使用全局选择器将所有元素边距和样式去掉

<style type="text/css">
    *{color:blue;}
</style>

群组选择器

集体统一设置样式

<style type="text/css">
    p,h1,h2,h3{font-size:20ps;color:red;}
</style>

注意：class名和id名是区分大小写的

后代选择器

使用后代选择器设置，之间用空格隔开

<style type="text/css">
    p em{font-size:40px;}    <!-- 对p标签下的em标签进行样式设置 -->
    h1.special em{font-size:20px;}  <!-- 对id为special的h1标签下的em标签进行样式设置 -->
</style>
<body>
    <em>css层叠样式</em>
    <p><em>层叠样式</em></p>
    <p><em>层叠样式</em></p>
    <h1 class="special"><em>层叠样式</em></p>
    <h1><em>层叠样式</em></p>
</body>

编码好习惯：每层包含关系都要有一定的缩进

伪类选择器

伪类选择器定义特殊状态下的样式，无法用标签、id、class及其他属性实现

链接中的四种状态：激活状态、已访问状态、未访问状态和鼠标悬停状态

链接伪类的顺序必须遵守：:link＞:visited＞:hover＞:active

说明

a:hover必须置于a:link和a:visited之后，才有效
a:active必须置于a:hover之后，才有效
伪类名称对大小写不敏感

<style type="text/css">
    a:link{color:blue;}    <!-- 未点击 -->
    a:visited{color:purple;}    <!-- 点击过 -->
    a:hover{color:green;}    <!-- 鼠标悬停状态 -->
    a:active{color:orange;}    <!-- 点击但未松开 -->
    p:hover{color:red;}
</style>
<body>
    <a href="http://www.imooc.com" target="_blank">test</a>
    <p>慕课网</p>
</body>

注意：IE6浏览器不支持其他元素的:hover和:active

若要使不同链接有不同的显示效果，除了给它们起不同的class名之外，还可以在<a>标签外用不同类型的标签元素嵌套，如

<style type="text/css">
    div a:link{color:blue;}    <!-- 未点击 -->
    div a:visited{color:purple;}    <!-- 点击过 -->
    div a:hover{color:green;}    <!-- 鼠标悬停状态 -->
    div a:active{color:orange;}    <!-- 点击但未松开 -->
    p a:link{color:yellow;}
    p a:link{color:pink;}
    p a:link{color:black;}
    p a:link{color:grey;}
</style>
<body>
    <div><a>test1</a></div>
    <p><a>test1</a></p>
</body>

CSS继承和层叠

继承

内层标签具有与外层标签相同的样式，这种现象就是css的继承，如

<style type="text/css">
    p{color:red;font-size:20px;}
</style>
<body>
    <p><span>test</span></p>
</body>

继承的好处

父元素设置样式，子元素可以继承部分属性，因而减少css代码

注意：不是所有的属性都可以继承，当元素自身的样式与继承的样式冲突时，会忽略继承的样式

层叠

多个样式应用于同一元素而发生冲突时，根据不同样式规则优先级来选择应用的样式；不发生冲突时，多个样式可层叠为一个。

CSS选择器优先级

id选择器＞class选择器＞标签选择器

同一个元素引用多个class定义的样式时，选择的顺序与class名的顺序无关，而与标签内class选择器的定义顺序有关，离所定义的元素越近的样式被优先采用，即后定义的样式会覆盖先定义的样式。同理，id选择器、标签选择器也有这个特性。

<style type="text/css">
    .green{color:green;}
    .red{color:red;}
    .gray{color:gray;}
    .orange{color:orange;}
</style>
<body>
    <div class="green orange red gray">
        test
    </div>
    <!-- 文字显示效果为橙色 -->
</body>

同类样式多次引用，样式表中后定义的优先级高。

<style type="text/css">
    p{color:red;}
    p{color:blue;}
    p{color:green;}
    p{color:orange;}
</style>
<body>
    <p>test</p>
    <!-- 文字显示效果为橙色 -->
</body>

CSS权值

同一样式表中

权值相同

就近原则（离被设置元素越近优先级越高）

权值不同

根据权值来判断css样式，哪种css样式权值高，就使用哪种样式

选择器权值

标签选择器：权值为1
类选择器和伪类：权值为10
ID选择器：权值为100
通配符选择器：权值为0
行内样式：权值为1000

权值规则

统计不同选择器的个数
每类选择器的个数乘以相应权值
把所有的值相加得出选择器的权值

<style type="text/css">
    #main div.warning h2{...}
    <!-- 
            id:1            class:1            标签:2
            1*100=100       1*10=10            2*1=2
            权值:100+10+2=112
     -->
</style>

<style type="text/css">
    *{color:black;}
    b{color:purple;}    /*权值为1*/
    p b{color:yellow;}    /*权值为2*/
    .classblue{color:blue;}    /*权值为10*/
    #test1 p b{color:orange;}    /*权值为102*/
    div p .classblue{color:red;}    /*权值为12*/
    div #test2 b{color:gray;}    /*权值为102，根据就近原则，采用该样式*/
</style>
<body>
    <p>派生选择器优先级</p>
    <div id="test1">
        <h1>CSS样式优先级</h1>
        <p id="test2">所谓<b class="classblue">CSS优先级</b>，指CSS样式在浏览器中被解析的先后顺序</p>
        <div><b>权值相同</b>，就近原则；<b>权值不同</b>，那个权值高，使用哪个。</div>
    </div>
</body>

!important规则

优先级最高。可调整样式规则的优先级，添加在样式规则之后，中间用空格隔开

<style type="text/css">
    div{color:red !important;}
</style>
<body>
    <div>test</div>
</body>

CSS命名规范

常用CSS样式命名

id和class的使用

id不要滥用，谨慎使用，因为id是Javascript中要频繁使用的；恰当使用class。

CSS文本样式

字体样式

文字样式属性

字体：font-family
文字大小：font-size
文字颜色：color
文字粗细：font-weight
文字样式：font-style font-family字体属性
含空格字体名和中文，用英文引号(")括起
多个字体，用英文逗号","隔开
引号嵌套，外使用双引号，内使用单引号

<style type"text/css">
    h1{font-family:"Times New Roman";}
    p{font-family:"微软雅黑","宋体","黑体",sans-serif;}
</style>
<body>
    <h1 style="font-family:'宋体'">test1</h1>
    <p>test2</p>
</body>

设置多个字体，浏览器一次查找，若都没有，则使用浏览器默认样式。

字体集

Sans Serif更易读，可以用于大段文字，Serif则可以用于标题。

font-size文字大小

定义元素内文字大小

语法：font-size:绝对单位|相对单位

绝对单位

绝对单位在任何分辨率下显示出来都是绝对的大小，不会发生改变

浏览器一般默认大小是medium。

相对单位

px像素

em/%（都是针对父元素设置字体大小）

子元素继承的是父元素的计算值，如父元素设置font-size:150%，子元素继承的计算值就为16px*150%=24px。

color字体颜色

定义元素内文字颜色

语法：color : 颜色名 | RGB | 十六进制

color:red; /*具体颜色名称*/
color:rgb(0,0,255); /*三原色表示法，数字范围0~255，百分比范围0~100%，超出范围会自动修正*/
color:red; /*十六进制表示法，以#开头，共6位，每位0~F，大小写不敏感*/ 十六进制的简写形式：如#008800可简写为#080

font-weight文字粗细

为元素内文字设置粗细

语法：font-weight : normal | bold | bolder | lighter | 100~900

font-style文字样式

为元素内文字设置样式

语法：font-style : normal | italic | oblique （设置斜体一般用italic，italic与oblique在展示效果上没有什么区别）

font-variant文字变形

设置元素中文本为小型大写字母

语法：font-variant : normal | small-caps （把英文内容转化成小型的大写字母）

font属性（简写）

语法：font : font-style font-variant font-size/line-height font-family

（注意顺序，行高与字体大小作为一组，用 / 隔开，多个字体还是用 , 隔开）

<style type="text/css">
    p{
        font-size:20px;
        font-family:"黑体";
        font-style:italic;
        font-weight:bold;
        font-variant:small-caps;
    }
    p{
        font:italic small-caps bold 20px 
    }
</style>
<body>
    <p>CSS层叠样式表 Cascading Style Sheets</p>
</body>

注意：同时设置font-size和font-family，属性才起作用；值之间空格隔开，并注意书写顺序。

文本样式

文本对齐方式 text-align

设置元素内文本的水平对齐方式

语法：text-align : left | right | center | justify

注意：

该属性对块级元素设置有效。因此若要给行内元素进行对齐方式的设置时，可以在行内元素外层嵌套<div>标签。
text-align属性是可以继承的。

为使容器也居中显示，可以对容器进行设置，如：

<style type="text/css">
    .textAlign{text-align:center;}
    .textAlign p{margin:0 auto;}    /* 0是上下边距 auto是左右边距 */
</style>
<body>
    <div class="textAlign">
        <p>
            test
        </p>
    </div>
</body>

行高 line-height

设置元素中文本行高

语法：line-height : 长度值 | 百分比

当行高小于字体大小时（用绝对单位定义），就会发生重叠现象，因此行高最高用em或%作单位。

注意：继承的是计算后的值，而不是直接把em或%的值继承过来。

垂直对齐方式 vertical-align

设置元素内容的垂直方式

注意：只对行内元素生效，对块状元素不生效。

以基线为准，正值在基线以上，负值在基线以下。

垂直居中应用

单行文字垂直居中

只需要将文字的line-height的属性设置为与文字父容器的高度一致。

<style type="text/css">
    .wrap{
        height:400px;
        line-height:400px;
    }
</style>
<body>
    <div class="wrap">
        <h2>
            CSS层叠样式，用于网页样式设置，使网页更美观。
        </h2>
    </div>
</body>

多行文字垂直居中

<style type="text/css">
    .wrap{
        height:400px;
        display:table;
    }
    .content{
        vertical-align:middle;
        display:table-cell;
    }
</style>
<body>
    <div class="wrap">
        <div class="content">
            <h1>
                Welcome to Website
            </h1>
        </div>
    </div>
</body>

文本样式的其他属性

word-spacing 设置元素内单词之间间距（单词判断以空格为准）
letter-spacing 设置元素内字母之间间距

注意：以上两个属性可以是负值，当取值为负时会发生重叠

text-transform 设置元素内文本的大小写 capitalize | uppercase | lowercase | none
text-decoration 设置元素内文本的装饰 underline | overline | line-through | blink | none
text-indent 设置首行文本的缩进（负值会被缩到左边） 注意：
text-decoration标签可以重叠使用，比如让删除线和下划线同时显示，但若最后属性是none，则会清空所有样式
下划线颜色同字体颜色一致。

<style type="text/css">
    .one{text-decoration:underline overline none;}    /*最终效果是清空样式*/
</style>
<body>
    <p class="one">CSS层叠样式表</p>
</body>

盒子模型

盒子模型概念

盒子与盒子之间的距离称为边距

盒子与内容物的距离称为填充

盒子模型用来“放”网页中的各种元素

网页设计中内容，如文字、图片等元素，都可是盒子（div嵌套）

注意：盒子的宽和高指的是内容的宽和高，而不是加上内外边距之后的宽和高。

高和宽设置

宽度

width : 长度值 | 百分比 | auto

max-width : 长度值 | 百分比 | auto

min-width : 长度值 | 百分比 | auto

注意：

当一个元素设置了宽度和最大宽度后，取两者较小值进行展示。
设置了宽度和最小宽度后，取两者较大值进行展示。

高度

height : 长度值 | 百分比 | auto

max-height : 长度值 | 百分比 | auto

min-height : 长度值 | 百分比 | auto

注意：

当一个元素设置了高度和最大高度后，取两者较小值进行展示；设置了高度和最小高度后，取两者较大值进行展示。
当一个元素同时设置min-height和max-height，且min-height大于max-height，最大高度自动转换成最小高度的值，所以显示min-height的值。 注意：
width的auto值是页面最大宽度，height的auto值是内容的高度
行内元素无法设置宽和高，只能由元素内的内容撑开。

边框设置

边框属性

边框宽度（border-width）

设置元素边框宽度

border-width : thin | medium | thick | 长度值

边框颜色（border-color）

设置元素边框颜色

border-color : 颜色 | transparent

边框样式（border-style）

设置元素边框样式

四个不同方向来表示

border-[ left | right | top | bottom ]-width

border-[ left | right | top | bottom ]-color

border-[ left | right | top | bottom ]-style

边框缩写

border : [宽度] | [样式] | [颜色]

不同方向

border-top : [宽度] | [样式] | [颜色]

border-left : [宽度] | [样式] | [颜色]

border-right : [宽度] | [样式] | [颜色]

border-bottom : [宽度] | [样式] | [颜色]

内边距设置

设置元素的内容与边框在回见的距离（内边距或填充），分四个方向（上、右、下、左——顺时针）

padding-top : 长度值 | 百分比

padding-right : 长度值 | 百分比

padding-bottom : 长度值 | 百分比

padding-left : 长度值 | 百分比

说明：值不能为负值

注意：盒子在网页中占的空间，不仅与width和height属性有关，还与padding有关。

内边距缩写属性

padding : 值1; //四个方向都为值1

padding : 值1 值2; //上下=值1，左右=值2

padding : 值1 值2 值3; //上=值1，左右=值2，下=值3

padding : 值1 值2 值3 值4; //上=值1，右=值2，下=值3，左=值4

外边距设置

设置元素与元素之间的距离（外边距），分四个方向（上、右、下、左——顺时针）

margin-top : 长度值 | 百分比 | auto

margin-right : 长度值 | 百分比 | auto

margin-bottom : 长度值 | 百分比 | auto

margin-left : 长度值 | 百分比 | auto

说明：值可为负值

注意：盒子在网页中占的空间，不仅与width和height属性有关，还与margin 有关。

外边距缩写属性

margin : 值1; //四个方向都为值1

margin : 值1 值2; //上下=值1，左右=值2

margin : 值1 值2 值3; //上=值1，左右=值2，下=值3

margin : 值1 值2 值3 值4; //上=值1，右=值2，下=值3，左=值4

说明：margin值为auto，实现水平方向居中显示效果，由浏览器计算外边距

注意：

默认情况下，相应HTML块级元素存在外边距，如body、h1~h6、p……，因此在实际开发中，往往先声明margin属性为0，覆盖默认样式。
垂直方向上，两个相邻元素都设置外边距，外边距会发生合并，合并后外边距高度=两个发生合并外边距的高度中的较大值。

盒子模型的计算

注意：如果没有DOCTYPE文档类型声明，各浏览器按自己的方式解析盒子应用的模型。如果有DOCTYPE文档流诶性声明，就按照标准盒子模型来解析。

元素显示方式

display属性

inline

元素将显示为内联元素，元素前后没有换行符

注意：内联元素之间有空隙是因为标签之间有换行，去掉标签之间的换行就没有空隙了。

block

元素将显示为块级元素，元素前后会带有换行符

inline-block

行内块元素，元素呈现为inline，具有block相应特性

none

此元素不会被显示

CSS背景和列表

CSS背景

背景颜色

设置元素的背景颜色

background-color : 颜色 | transparent

说明

transparent是全透明黑色（black）的速记法，类似rgba(0,0,0,0)
颜色值（颜色名 | RGB | 十六进制）
背景区包括内容、内边距（padding）和边框、不包含外边距（margin）

注意：只给边框设置宽度，不设置样式也是不会显示的，边框颜色若未特别设置，则跟字体颜色一致。

背景图片

设置元素的背景图片

background-image : url | none

说明

url地址可以是相对地址也可以是绝对地址
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
默认的，背景图像位于元素的左上角，并在水平和垂直方向上重复

注意：当既有背景颜色又有背景图片时，背景颜色会被背景图片覆盖。

背景图片重复

设置元素的背景图片的重复方式

background-repeat : repeat | no-repeat | repeat-x（水平重复） | repeat-y（垂直重复）

背景图片显示方式

设置元素的背景图片的显示方式

background-attachment :scroll | fixed

说明：
scroll：默认值，背景图片随滚动条滚动
fixed：当页面的其余部分滚动时，背景图片不会移动

注意：background-attachment的默认属性是scroll，IE6-IE11不支持inherit

背景图片定位

指元素的背景图片的起始位置

背景缩写

background : [ background-color ] [ background-image ] [ background-repeat ] [ background-attachment ] [ background-position ]

说明：各值之间用空格分割，不分先后顺序

注意：当fixed与position同时应用时，设置的位置是相对于可见窗口而言，而不是对整个网页而言。

CSS列表

列表项标记

list-style-type

设置列表项的标记样式类型

list-style-type : 关键字 | none

list-style-image

使用图片设置列表项的标记

list-style-image :url | none

注意：要给不同列表项设置不同图标就需要起不同的class名。

list-style-position

设置列表项标记的位置

list-style-position : inside | outside

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

列表样式缩写

list-style : list-style-type list-style-position list-style-image

说明

值之间用空格分隔
顺序不固定
list-sty-image会覆盖list-style-type的设置

float浮动

由于div需要独占一行，所以在实际开发中往往需要用到float使div元素能够横向排列。

※float属性的介绍

CSS定位机制

普通流（标准流）

默认状态，元素自动从左往右，从上往下的排列。

块元素

独占一行
可以设置宽、高
如果不设置宽度，宽度默认为容器的100%

行内元素

其他元素同行显示
不可以设置宽、高
宽高就是文字或图片的宽高

浮动

会使元素向左或向右移动，只能左右，不能上下。
浮动碰到包含框或另一个浮动框，浮动停止。
浮动元素之后的元素将围绕它，之前的不受影响。
浮动元素会脱离标准流。
浮动元素会脱离容器。
元素浮动后具备inline-block（行内块元素）特性。

浮动的基本语法

float:left 靠左浮动
float:right 靠右浮动
float:none 不使用浮动

给元素设置浮动后，它会从文档流中脱离出来，但是仍然占据文本流，因此可以实现文字环绕效果。

使用浮动后产生的问题

使用浮动的时候，子元素的浮动会导致父元素发生塌陷，因为子元素进行了浮动，脱离了标准流，使得父元素无法检测到子元素，导致父元素塌陷、没有高度；

同理，因为浮动元素脱离了标准流，使得临近元素无法感知到浮动元素，使得普通元素占据浮动元素的位置，发生异位。

清除浮动语法

clear : none | left | right | both（左右两侧抗浮动）; /指定清除浮动的部位/

原因：设置了float的元素会影响其他相邻元素，需要使用clear清除浮动。

注意：clear只会影响自身，不会对其他相邻元素造成影响！

清除浮动常用方法

方法一：在浮动元素后使用一个空元素。<div class="clear"></div>

方法二：给浮动元素的容器添加overflow:hidden;（适用于小范围清除浮动）

方法三：使用CSS3的:after伪元素（适用于大范围清除浮动）

<style type="text/css">
.clearfix:after{
        content:".";
        display:block;
        height:0;
        visibility:hidden;
        clear:both;
            }
.clearfix{ zoom:1 /*出发hasLayout兼容IE6、7*/}
</style>

<style type="text/css">
    .clear{
        /*clear:both;    方法一*/
    }
/*  .clearfix:after{
        content:".";
        display:block;
        height:0;
        visibility:hidden;
        clear:both;
    }
    .clearfix{
        zoom:1;
    }                    方法三*/
    .container{
        width:500px;
        /*height:500px;*/
        border:2px solid #333;
        /*overflow:hidden;    方法二*/
        zoom:1;
    }
    .box01{
        width:100px;
        height:100px;
        background:blue;
        color:#fff;
        float:left;
    }
    .box02{
        width:100px;
        height:100px;
        background:red;
        color:#fff;
        float:left;
    }
    .box03{
        width:100px;
        height:100px;
        background:green;
        color:#fff;
        float:left;
    }
</style>
<body>
    <div class="container clearfix">
        <div class="box01">111</div>
        <div class="box02">222</div>
        <div class="box03">333</div>
        <div class="clear"></div>
    </div>
    <div class="box04">444</div>
</body>

CSS定位

ducument tree

box-sizing属性

允许以特定的方式定义匹配某个区域的特定元素属性值：

content-box：在宽度和高度之外绘制元素的内边距和边框（默认属性）
border-box：通过从已经设定的宽度和高度中分别减去边框和内边距之后得到的值，才是内容的宽度和高度

nth-child()

nth-child(n)选择器，匹配属于其父元素的第N个子元素，不论元素的类型；其中n可以是数字、关键词或公式。

n为odd和even时：可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是1，即元素的下标是从1开始的。）

z-index属性

设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

属性值：

auto：默认。堆叠顺序与父元素相等
number：设置元素的堆叠顺序
inherit：规定应该从父元素继承z-index属性的值

注意：

z-index仅能在定位元素上奏效
元素可拥有负的z-index属性值
z-index为auto的元素不参与层级的比较，由向上遍历至此且z-index不为auto的元素来参加比较
设置了position属性的（除了static）元素默认层级比没有设置的元素高；设置为static不影响层级，依然是后定义元素覆盖先定义元素。
若A的z-index比B的z-index大，那么A的子元素必定覆盖在B的子元素前面
若A和B的z-index一样大，但因为顺序规则，B覆盖在A前面，就算A的子元素的z-index比B的子元素大，B的子元素还是会覆盖在A的子元素前面。

说明：该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

注意：IE不支持nth-child()选择器

static 自然模型

注意：z-index是对层叠顺序进行设置的一个属性

relative 相对定位模型

就是别人用来做定位的标杆参照物。

相对的是自己在常规流中本应该呆着的位置。

不会离开常规流的意思是它即使看上去离开了常规流，但它原本在常规流中占据的空间仍然会被预留下来。

如果把一个浮动元素设置了position:relative，它就具有了定位能力，可以用一些偏移属性去控制。

absolute 绝对定位模型

位置改变后，标准流中就没有自己的位置了。

设置为relative、absolute、fixed的元素就成为定位祖先元素，但不能是设置为static的元素。

绝对定位是一种局部的定位，是相对于最近定位祖先元素而言的（祖先元素设置为relative，子元素设置为absolute）。

如果没有给绝对定位元素设置宽高，也没有设置lrtb，它就会自动填充最近定位祖先元素的整个缝隙。

一条妙计

在最近定位祖先元素中左右居中只需要将left与right设置为0，并把相应的margin设置为auto；上下居中只需要将top与bottom设置为0，并把相应的margin设置为auto；上下左右都居中，就把lrtb都设置为0，margin都设置为auto。

<style>
    .parent{
        position:relative;
        width:200px;
        height:150px;
        background:blue;
    }
    .child{
        position:absolute;
        width:80px;
        height:80px;
        background:red;
     /*   top:0;   */
     /*   bottom:0;   */
        left:0;
        right:0;
        margin:0 auto;    /* 前面管上下，后面管左右 */
    }
</style>
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>

fixed 固定定位模型

设置fixed的元素不是相对于最近定位祖先元素来定位，而是相对于可见窗口定位。

sticky 磁贴定位模型

要实现吸附效果，就要在设置position:sticky的同时将top设置为0，就可以实现滚动时还能始终吸附在窗口上方的效果。

总结

CSS网页布局基础

以最适合浏览的方式将图片和文字排放在页面的不同位置

布局模式有多种，不同的制作者会有不同的布局设计

行布局

基础的行布局

行布局固定宽
行布局某部位自适应
行布局随屏幕滚动

行布局自适应

要实现头部自适应，可以给头部元素设置position:fixed;

头部的高是多少，头部下边的元素padding-top就设置为多少，这样就不会遮挡它的内容

行布局自适应限制最大款宽

设置自适应限制最大宽的作用是在改变网页窗口大小时，网页内容的大小也能随之发生动态变化

行布局垂直水平居中

水平居中用margin:auto来实现（左右）

垂直水平都居中需要将元素设置为position:absolute;top:50%;left:50%;margin-top:-xxpx;margin-left:-xxpx;（xx是宽度的一半）

多列布局

两列布局

左边一列float:left，右边一列float:right

自适应效果需要将左右两列以及包含它们的容器的width设置为用%表示

三列布局

左边一列float:left，中间一列float:left，右边一列float:right

自适应效果需要将左右两列以及包含它们的容器的width设置为用%表示

混合布局

头部+主体（左侧+右侧）+底部

这时候由于左右两列都设置浮动，父元素检测不到子元素，就会发生父元素塌陷，使底部元素被覆盖。解决这个问题只要给主体部分设置高度即可

自适应效果需要将左右两列以及包含它们的容器的width设置为用%表示

圣杯布局

常见于管理后台，左侧是导航，右侧是操作内容界面

三列布局，中间宽度自适应，两边定宽

中间栏要在浏览器中优先展示渲染（在文档流中先写middle再写left和right）

允许任意列的高度最高

用最简单的CSS、最少的HACK语句

<div class="container">
    <div>中间</div>
    <div>左侧</div>
    <div>右侧</div>
</div>

双飞翼布局

对圣杯布局改良后得出双飞翼布局

相对布局，只需要浮动和负边距

main要放最前边，其次是sub、extra

<div class="main">
    <div>中间</div>
</div>
<div>左侧</div>
<div>右侧</div>

Tips

实际开发中，往往在一开始运用通配符将所有元素默认的margin、padding设置为0；将列表的默认样式list-style设置为none；将a链接的默认样式text-decoration设置为none 。
www.caniuse.com 用来查询兼容性

前端基础入门——页面化妆师CSS

什么是CSS

CSS发展

为什么学习CCS

CSS选择的艺术

CSS基础语法

CSS使用方法

行内样式（内联样式）

内部样式表（嵌入样式）

外部样式表

导入式样式

css使用方法优先级

CSS选择器

标签选择器

类选择器

ID选择器

全局选择器

群组选择器

后代选择器

伪类选择器

CSS继承和层叠

继承

层叠

CSS选择器优先级

CSS权值

同一样式表中

选择器权值

权值规则

!important规则

CSS命名规范

常用CSS样式命名

id和class的使用

CSS文本样式

字体样式

文字样式属性

font属性（简写）

文本样式

文本对齐方式 text-align

行高 line-height

垂直对齐方式 vertical-align

垂直居中应用

文本样式的其他属性

盒子模型

盒子模型概念

高和宽设置

宽度

高度

边框设置

边框属性

内边距设置

外边距设置

盒子模型的计算

元素显示方式

display属性

CSS背景和列表

CSS背景

背景颜色

背景图片

背景图片重复

背景图片显示方式

背景图片定位

CSS列表

列表项标记

列表样式缩写

float浮动

※float属性的介绍

CSS定位机制

浮动

浮动的基本语法

使用浮动后产生的问题

清除浮动语法

清除浮动常用方法

CSS定位

static 自然模型

relative 相对定位模型

absolute 绝对定位模型

fixed 固定定位模型

sticky 磁贴定位模型

总结

CSS网页布局基础