CSS特性与盒子（&）

CSS三大特性

层叠 继承 优先级

CSS层叠

所谓层叠是指多种CSS样式的叠加。
是浏览器处理冲突的一种能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
一般情况下，如果出现样式冲突，则会按照CSS书写顺序，以最后的样式为准。
1.样式冲突，遵循的是就近原则。哪个样式离结构近，就执行哪个样式。
2.样式不冲突，不会层叠

CSS继承

所谓继承是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单理解就是：子承父业
注意：恰当的使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-,font-,line,这些元素开头的都可以继承，以及color属性）

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用于同一元素上，这时就会出现优先级的问题。
在考虑权重时,初学者还需注意一些特殊的情况，具体如下：
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重有多大，被子元素继承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个！important命令，该命令被赋予最大的优先级，也就是说不管权重如何以及样式位置的远近，！important都具有最大优先级。

CSS特殊性

CSS特殊性是一个衡量CSS值优先级的一个标准。具体规范如下：
specificity用一个四位的数字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越

盒子模型

盒子边框

语法：

border:border-width||border-style||border-color

表格的细线边框

table{border-collapse:collapse;}/*collapse单词是合并的意思*/
border-collapse:collapse;/*表示边框合并在一起*/

圆角边框（CSS3）

语法格式：

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

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

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

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段“空白”通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin:上外边距 右外边距 下外边距 左外边距

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足以下两个条件：
1.必须是块级元素
2.盒子必须指定了宽度（width）
然后给左右的外边距都设置为auto，就可使块级元素水平居中
示例代码如下：

.header{width:960px; margin:0 auto;}

文字盒子居中图片和背景区别

清除元素的默认内外边距

为了更方便的控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

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

注意：行内元素是只有左右外边距的，是没有上下外边距的。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
注意：
1.宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）
2.计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况
3.如果一个盒子没有给定高度/宽度或者继承父亲的宽度/高度，则padding不会影响本盒子大小

盒子模型布局稳定性

盒子阴影