一、CSS的三大特性
1.层叠性
如果利用相同的选择器设置相同的属性样式，就会发生层叠（覆盖）。比如下面这样的定义方式
div {
color: red;
}
div {
color: black;
}
此时会遵循就近原则，即最终定义的颜色为黑色。当样式不冲突的时候，就不会层叠。
2.继承性
子标签会继承父标签的某些样式，比如文字的字号和颜色。
<style>
div {
color: yellow;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<p>前端</p>
</div>
</body>
这里虽然并没有给p标签单独定义样式，但是它会默认继承跟父标签div一样的样式。
3.优先级
同一个元素被多个选择器指定的时候，就会根据各个选择器的优先级来执行。
上图表示各个选择器的权重，哪个选择器的权重更高就执行哪个选择器定义的样式。注意，复合选择器的权重是将组成它的单个选择器的权重相加，但是权重可以叠加但是不能进位，也可以认为下一级的选择器无论如何叠加优先级都不可能超过上一级的选择器。
继承的权重为0，代表无论父元素的权重多高，子元素如果没有被直接选中，默认权重都是0。
二、盒子模型
将页面中的布局元素看作一个盒子，就是一个用来封装内容的容器。盒子模型由下图所示的边框（border）、内容(content)、内边距(padding)、外边距(maigin)组成。
1.边框
边框主要有三个属性，边框粗细（border-width），由像素定义，单位为px；边框的颜色（border-color）;边框的样式，这里主要掌握三种就行，实线（solid）、虚线（dashed）、点线（dotted）。边框的三个属性也可以采用复合写法并且没有固定顺序
border:1px solid red
注意，表格中相邻单元格的边框会并列排在一起，这时候如果要保持边框的粗细一致，需要利用另一个功能border-collapse，将相邻的边框合在一起。
边框是会影响盒子的实际大小的，测量盒子大小的时候记得去掉边框的宽度。
2.内边距
内边距是边框与内容之间的距离，可以分上下左右进行设置。
实际开发当中，上图所示的四种情况都会出现，所以都需要掌握。
内边距也会影响盒子的实际大小，当盒子已经指定了宽度和高度以后，内边距就会撑大盒子。
这里有一个实际利用内边距撑大盒子的案例，新浪导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
height: 41px;
background-color: #fcfcfc;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="">新浪首页</a>
<a href="">微博</a>
<a href="">手机新浪网</a>
<a href="">关注我</a>
</div>
</body>
</html>
这里我们定义链接的样式的时候，由于链接的字数不同，就利用内边距撑大盒子的方式来实现导航栏的美观。
当然如果盒子没有指定高度或者宽度，就不会出现内边距撑大盒子的情况。
3.外边距
外边距定义的方法和内边距是一致的。
外边距有一个经典的应用场景，就是可以让块级盒子水平居中对齐。满足两个条件即可，首先盒子必须设置宽度，其次把左右外边距都设置为auto。
.header{ width:960px; margin:0 auto;}
外边距还存在合并的情况（面试可能会涉及！）。首先就是相邻块元素的外边距合并，比如上下两个块元素，上面的设置了底部外边距，下面的设置了顶部外边距。这时候两个块元素的距离不是两个外边距的和，而是两者中的较大者
为了避免这种情况，我们就尽量只对一个块级元素设置外边距。
另外就是两个存在嵌套关系的块级元素，父元素和子元素都定义了一个外边距，最终结果就是父元素塌陷两个外边距的较大值。
避免这种情况有三种方法，第一，给父元素设置上边框；第二，给父元素定义上内边距；第三，可以为父元素添加 overflow:hidden。
4.清除内外边距
很多网页元素和浏览器都自带一些默认的内外边距，在布局之间需要清除掉，利用一下代码即可。
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
*号表示通配符选择器，选中页面中所有元素。
