CSS的三大特性
层叠性
相同选择器给设置相同的样式，此时一个样式就会被覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。
代码示例
p标签的文本颜色会被离得最近的lightskyblue层叠掉
<style>
div {
color: red;
font-size: 24px;
}
div {
color: lightskyblue;
}
</style>
<body>
<div>
<p>木小果是大帅哥</p>
</div>
</body>层叠性原则
- 样式冲突，遵循的原则就是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，就不会被覆盖（层叠）
继承性
现实中的继承：我们都继承了父亲的姓
CSS中的继承：子标签会继承父亲标签的某些样式，如文本颜色和字号，简单的理解就是子承父业
代码示例
div里面的p标签会继承div的color属性
<style>
div {
color: lightskyblue;
}
</style>
<body>
<div>
<p>木小果是大帅哥</p>
</div>
</body>继承性原则
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。
- 子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及color属性）
- 继承性口诀：龙生龙，凤生凤，老鼠的儿子会打洞
行高的继承
代码示例
<style>
div {
/* 文字大小/行高 字体 */
font: 18px/18px 'Microsoft Yahei';
}
/* 也可以写作 */
div {
/* 这个1.5就是当前元素的文字大小font-size的1.5倍，所以当前元素的行高就是18像素*/
font: 18px/1.5 'Microsoft Yahei';
}
</style>
<body>
<div>木小果是大帅哥</div>
<p>非常帅的大帅哥</p>
</body>- 行高可以跟单位，也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高为1.5
- 此时子元素的行高是：当前子元素的文字大小 * 1.5
- body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
优先级
选择器权重如下表所示
| 选择器名称 | 选择器权重 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类(伪类)选择器 | 0,0,1.0 |
| id选择器 | 0,1,0,0 |
| 行内样式 style=\"\" | 1,0,0,0 |
| \!important(重要的) | ∞ 无穷大 |
优先级注意点
- 权重是由四组数字组成的，但是不会有进位。
- 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法，通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器是100，行内样式表为1000，!important无穷大。
- 重点记住：继承的权重是0，如果该元素没有直接被选中，不管父元素权重多高，子元素得到的权重都是0.
有如下这么一段代码
<style>
body{
color: red;
}
</style>
<body>
<div id="father">
<p>非常帅的大帅哥</p>
</div>
<a href="#">我是单独的样式</a>
</body>a标签的文本颜色不会继承为红色，因为a链接浏览器默认制定了一个样式，蓝色的有下划线a{color: blue;},这个样式层叠掉了body的红色，如果要设置a标签的文本颜色建议写一个a{color: green;}等颜色的样式，用来吧浏览器的默认样式层叠掉，或使用其他选择器。
权重叠加
如果是复合选择器，则会有权重叠加，需要重新计算权重。
div ul li ------> 0,0,0,3
- 标签选择器+标签选择器+标签选择器
- 公式：0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3
.nav ul li ------> 0.0.1.2
- 类选择器+标签选择器+标签选择器
- 公式：0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2
a:hover ------> 0.0.1,1
- 标签选择器+伪类选择器
- 公式：0,0,1,0 + 0,0,0,1 = 0,0,1,1
.nav a ------> 0,0,1,1
- 类选择器+标签选择器
- 公式：0,0,1,0 + 0,0,0,1 = 0,0,1,1
盒子模型
页面布局要学习三大核心：盒子模型、浮动和定位，学习好盒子的模型能非常好的帮助我们布局页面。
网页布局过程
- 先准备好相关的网页元素，网页元素基本都是盒子Box。
- 利用CSS设置好盒子样式，然后摆放到相应位置。
- 王盒子表里面装内容。
网页布局的核心本质：就是利用CSS摆放盒子。
盒子模型(Box Model)组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个据矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。
边框(border)
border可以设置元素的边框，边框由三部分组成，：边框宽度、边框样式、边框颜色
语法
border: border-width || border-style || border0color| 属性 | 作用 |
|---|---|
| border-width | 定义边框的粗细，单位是px |
| border-style | 边框的样式（常用：实线:solid/虚线:dashed /点线:dotted） |
| border-color | 边框的颜色 |
边框简写
CSS边框属性允许你指定一个元素边框的样式和颜色。
语法：
border: 1px solid red;/*属性之间没有顺序*/边框分开写法
border-top: 1px solid red;/*只设定上边框，其余同理*/实测练习
给一个200*200的盒子，设置上边框为红色，其余边框为蓝色（提示：一定要注意属性的叠加）
div{
/*宽度设置为200*/
width: 200px;
/*高度设置为200*/
height: 200px;
/*设置边框为6像素、实线、蓝色*/
border: 5px solid blue;
/*设置上边框为5像素、实线、红色*/
border-top: 5px solid red;
}表格的细线边框
语法：
border-collapse:collapse;- collapse 单词是合并的意思
- border-collapse:collapse; 表示相邻边框合并在一起
因为边框两侧的线不使用这个样式会显得很粗，使用这个样式之后会将相邻边框合并在一起。
边框会影响盒子实际大小
边框会额外增加合资的实际大小，因此我们有两种解决方案。
- 测量盒子大小的时候不要量边框。
- 如果测量的时候包含了边框，则需要
width/height减去边框宽度
内边距(padding)
padding属性用于设置内边距，即边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
| padding-ledt | 左内边距 |
| padding-right | 右内边距 |
内边距简写
pading属性（简写属性）可以有一到四个值，参数值顺序是顺时钟顺序(上右下左)。
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 1个值，代表上下左右都有5个像素的内边距； |
| padding:5px 10px; | 2个值，代表上下内边距5像素，左右内边距10像素； |
| padding:5px 10px 20px; | 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素； |
| padding:5px 10px 20px 30px; | 4个值，代表上5像素，右10像素，下20像素，左30像素，顺时针； |
以上四种情况，在实际开发都会遇到，都要记住！！！
内边距总结
当我们给盒子指定padding值之后，发生了两件事：
- 内容和边距有了距离，添加了内边距。
padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边距会撑大盒子。
div{
width: 200px;
height: 200px;
background-color: lightskyblue;
padding: 20px;
}本来CSS是这样的，这样会撑大盒子
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
div{
width: 160px;
height: 160px;
background-color: lightskyblue;
padding: 20px;
}像这样，宽高各减去40px，宽高就会保持200px不变。
案例（新浪导航栏）
<!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>新浪导航栏</title>
<style>
.nav {
/* 上边框 */
border-top: 3px solid #ff8500;
/* 下边框 */
border-bottom: 1px solid #edeef0;
/* 盒子高度 */
height: 41px;
/* 背景颜色 */
background-color: #fcfcfc;
/* 行距 */
line-height: 41px;
}
.nav a {
/* 将a标签转换为行内块 */
display: inline-block;
/* 文本颜色 */
color: #4c4c4c;
/* 设置内边距，上下为0，左右为20px */
padding: 0 20px;
/* 字体大小 */
font-size: 12px;
/* 删除下划线 */
text-decoration: none;
}
/* 设置鼠标经过时的背景颜色和文字颜色 */
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>边框的样式
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
