三大特性

三大特性：层叠、继承、优先级

层叠性

指多种CSS样式的叠加。如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。 样式冲突，遵循的原则是就近原则。 哪个样式离着结构近，就执行那个样式。

继承性

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器

1、继承样式的权重为0，子元素定义的样式会覆盖继承来的样式

2、行内样式优先，应用style属性的元素，其行内样式的权重非常高

3、权重相同时，CSS遵循就近原则。靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大

4、!important命令，赋予最大优先级

特殊性(Specificity)

类型	Specificity
继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1

#nav p       ----->       0,1,0,1

优先级顺序

1. 使用了 !important声明的规则。
2. 内嵌在 HTML 元素的 style属性里面的声明。
3. 使用了 ID 选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含一个通用选择器的规则。
7. 同一类选择器则遵循就近原则。

总结：权重是优先级的算法，层叠是优先级的表现

三大模型

CSS就三个大模块：  盒子模型 、 浮动 、 定位，其余的都是细节

盒子模型(核心)

盒子模型(BoxModel)

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box）

盒子边框(border)

语法：border : border-width || border-style || border-color

border-style的常用属性值如下：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线  
• dotted：边框为点线
• double：边框为双实线

边框写法总结：

设置内容	样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;
样式综合设置	border-style:上边 [右边 下边 左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边 下边 左边];	像素值
颜色综合设置	border-color:上边 [右边 下边 左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度 四边样式 四边颜色;

表格边框合并：

table{ border-collapse:collapse; } // 表示边框合并在一起

对比图：

table {
    width: 80px;
    height: 80px;
    border: 1px solid orange;
    border-collapse: collapse;
}
td {
    border: 1px solid orange;
    }

圆角边框：

border-radius: 左上角 右上角 右下角 左下角;

内边距(padding)

内边距：是指边框与内容之间的距离。

• padding-top:上内边距
• padding-right:右内边距
• padding-bottom:下内边距
• padding-left:左内边距

数值个数的含义：

• 1个值：上下左右边距
• 2个值：上下边距 + 左右边距
• 3个值：上边距 + 左右边距 + 下边距
• 4个值：上内边距 + 右内边距 + 下内边距 + 左内边距

外边距(margin)

外边距：是指在元素之间创建空白。一般是使用上和左

• margin-top:上外边距
• margin-right:右外边距
• margin-bottom:下外边距
• margin-left:左外边距
• margin:上外边距 右外边距  下外边距  左外边距

外边距实现盒子居中：给左右的外边距都设置为auto

/*必须是块级元素*/
/*盒子必须指定了宽度（width）*/
.header{ width:960px; margin:0 auto;}

文字垂直居中： line-height: height的值;

文字水平居中： text-align: center;

盒子水平居中： margin: 10px auto; /*左右margin改为auto*/

清除元素默认内外边距

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

注释： 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

• 相邻块元素垂直外边距的合并
  • 垂直间距取两者中的较大者
• 嵌套块元素垂直外边距的合并
  • 合并后的外边距为两者中的较大者
  • 此时可以为父元素添加overflow:hidden (溢出隐藏)

content宽度和高度

盒子模型的总宽度和总高度的计算原则：

/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子大小。

布局稳定性

优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）：

width > padding > margin

CSS3盒模型

CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box

• box-sizing: content-box; 盒子大小为 width + padding + border
• box-sizing: border-box; 盒子大小为 width（padding 和 border 是包含到width里面的）

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

参数：

• h-shadow：必选，水平阴影的位置，可负值
• v-shadow：必选，垂直阴影的位置，可负值
• blur：可选，模糊距离
• spread：可选，阴影尺寸
• color：可选，阴影颜色
• inset/outset：可选，内/外阴影，默认outset

浮动(核心)

普通流

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

普通流布局，是指从上到下、从左到右

浮动(float)

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

语法：选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动原理

浮动首先创建包含块的概念（包裹）。浮动的元素总是找离它最近的父级元素对齐，但是不会超出内边距的范围。

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

浮动的目的就是为了让多个块级元素同一行上显示。

理解如下：

1、加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

2、加了浮动的盒子，不占位置的，它浮起来了，它原来的位置给了标准流的盒子。

3、特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。

版心和布局流程

版心：网页中主体内容所在的区域

布局流程：

确定页面的版心-->分析页面中的行模块，以及每个行模块中的列模块-->制作HTML结构-->CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

<style type="text/css">
    * {
        margin: 0;
	padding: 0;
    }
    .top {
        width: 960px;
        height: 80px;
        background-color: orange;
        margin: 5px auto;
    }
    .banner {
        width: 960px;
        height: 100px;
        background-color: skyblue;
        margin: 10px auto;
    }
</style>

两列左窄右宽型

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .top,
    .banner,
    .main,
    .footer {
        width: 960px;
        margin: 0 auto;
        border: 1px dashed #ccc;
        background-color: skyblue;
        margin-top: 10px;
    }
    .top {
        height: 80px;
    }
    .banner {
        height: 100px;
    }
    .main {
        height: 300px;
    }
    .left {
        width: 360px;
        height: 300px;
        background-color: orange;
        float: left;
    }
    .right {
        width: 590px;
        height: 300px;
        background-color: yellow;
        float: right;
    }
    .footer {
        height: 120px;
    }
</style>

通栏平均分布型

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none; /*清除列表默认样式*/
        }
        .top {
            height: 60px;
            background-color: #3c3c3c;
        }
        .banner {
            width: 960px;
            height: 300px;
            background-color: skyblue;
            margin: 5px auto;
            border-radius: 15px;
        }
        .main {
            width: 960px;
            height: 200px;
            margin: 5px auto;
        }
        .main ul li {
            width: 240px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        .footer {
            height: 60px;
            background-color: #3c3c3c;
        }
    </style>

清除浮动

目的：主要为了解决父级元素因为子级浮动引起内部高度为0的问题，如下图：

清除浮动的方法：

1、基本方法：闭合浮动

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

2、额外标签法

通过在浮动元素末尾添加一个空的标签 ，或者其他标签br等亦可。 (不推荐使用)

3、父级添加overflow属性方法

可以给父级添加： overflow为 hidden | auto | scroll  都可以实现。

4、使用after伪元素清除浮动

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

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

5、使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

定位(position-核心)

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、定位模式(定位的分类)

语法：选择器{ position:属性值; }

position值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位｜

2、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位

将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

相对定位(relative)

相对定位是将元素相对于它在标准流中的位置进行定位，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。（没有脱离标准文档流）。每次移动的位置，是以自己的左上角为基点移动，相对于自己来移动位置

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

绝对定位(absolute)

绝对定位可以通过边偏移移动位置，但是它完全脱标（脱离了标准文档流），完全不占位置。如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

示意图：

1、父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

2、父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

        .father {
            height: 300px;
            width: 300px;
            background-color: skyblue;
            position: relative;
            margin: 100px;
        }
        .son {
            height: 100px;
            width: 100px;
            background-color: orange;
            position: absolute;
            top: 20px;
            left: 20px;
        }

3、子绝父相

子级是绝对定位的话， 父级要用相对定位

父盒子布局时，需要占有位置，因此父亲只能是相对定位

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可。定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50%   父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。

垂直同理：top 50%，然后margin-top 走自己的负一半

固定定位(fixed)

始终显示在浏览器窗口的固定位置。（层级比标准流文档要高）

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

案例：（广告展示在屏幕左右两侧）

        .ad-left,
        .ad-right {
            position: fixed;
            top: 200px;
        }
        .ad-left {
            left: 0;
        }
        .ad-right {
            right: 0;
        }

叠放次序(z-index)

调整重叠定位元素的堆叠顺序，可对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。（导航条一般设置超大）
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

定位模式转换

元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，因此比如行内元素如果添加了绝对定位或者固定定位后，可以不用转换模式，直接给高度和宽度就可以了。

元素显示与隐藏

display visibility 和 overflow

显示(display)

设置或检索对象是否及如何显示。特点： 隐藏之后， 不再保留位置。

display: none; //隐藏对象

display: block; //转换为块级元素，同时显示元素

可见性(visibility)

设置或检索是否显示对象。特点： 隐藏之后，继续保留原有位置。

display: visible; 　//对象可视

display: hidden; 　//对象隐藏

溢出(overflow)

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

• visible : 　不剪切内容也不添加滚动条。
• auto : 　 超出自动显示滚动条，不超出不显示滚动条
• hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
• scroll : 　不管超出内容否，总是显示滚动条