CSS基础标签（二）
font: 12px/1.5 "微软雅黑";表示字体大小为12像素，且行高为12的1.5倍
CSS优先级：
| 选择器 | 选择器权重 |
| 继承或者* | 0.0.0.0 |
| 元素选择器 | 0.0.0.1 |
| 类选择器，伪类选择器 |
0.0.1.0 |
| ID选择器 | 0.1.0.0 |
| 行内样式 style=“” | 1.0.0.0 |
| !important 重要的 | ∞无穷大 |
CSS盒子模型
网页布局过程：
- 先准备号相关的网页素材，网页元素基本都是盒子Box
- 利用CSS设置好盒子样式，然后摆放到相应的位置
- 往盒子里边装内容
盒子模型的组成：
所谓的盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
竹板这么一打呀，别的咱不夸，盒子模型实际开发用处非常大，border是边框，content内容大，padding内边距非常重要啦，边框与内容的距离主要就靠它，margin外边距，他是干啥的？盒子与盒子的距离就靠它说话
边框：
| border: | border-width | border-style | border-color |
| 属性 | 作用 |
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框的颜色 |
body { width: 200px; height: 280px; /* border-width:边框粗细 border-style: 边框样式 solid 实线 dashed 虚线 dotted 点线边框 border-color 边框颜色 */ /* border-width: 10px; border-style: solid; border-style:dashed; border-style:dotted; border-color: pink; */ /* 边框简写 没有顺序 */ /* border: 10px solid pink; */ /* 四个边框可以分别设置 也可以组合设置 */ /*分别设置 上边框 border-top: 10px solid red; 下边框 border-bottom: 10px solid burlywood; 左边框 border-left: 10px dotted yellow; 右边框border-right: 10px dashed black; */ /* 组合设置 组合设置时应将单独设置的写在下边 否则不起作用*/ border: 10px solid pink; border-top: 10px solid red; border-bottom: 10px solid #000;}合并相邻边框：border-collapse: collapse;
如果盒子本身已经有了宽高，此时再指的内边框，会撑大盒子，如果保证盒子与原来一样大小，则让宽高减去多出来的边框即可。
内边距：
padding属性设置内边距，及边框与内容之间的距离
| 属性 | 作用 |
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-buttom | 下内边距 |
padding属性（简写属性）可以用一到四个值。
| 值得个数 | 表达意思 |
| 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不会撑开盒子大小
外边距：
margin属性用于外边距，即控制盒子与盒子间的距离
| 属性 | 作用 |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-buttom | 下外边距 |
margin简写方式和padding完全一致
| 值得个数 | 表达意思 |
| margin：5px; | 1个值，代表上下左右都有5像素外边距 |
| margin：5px 10px; | 2个值，代表上下外边距是5像素，左右外边距是10像素 |
| margin：5px 10px 20px; |
3个值，代表上外边距为5像素，左右外边距为10像素 下外边距为20像素 |
| margin：5px 10px 20px 30px; | 4个值，代表上是5像素 右是10像素 下是20像素 左是30像素 顺时针 |
外边距可以让块级盒子水平居中，但要满足两个条件：
- 盒子必须设置了宽度
- 盒子左右外边距都为auto
外边距合并：
使用margin定义块元素垂直外边距时，可能会出现外边距的合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上边的元素有下边距margin-buttom，下边的元素有margin-top，则它们之间的垂直距离不是margin-bottom和margin-top之和，取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并。
解决方法
- 尽量只给一个盒子添加margin值
嵌套元素垂直外边距的塌陷：
对于两个嵌套关系（父子关系）的块元素，父元素上有上边距，同时子元素上也有上边距，此时父元素会塌陷较大的外边距值
解决方法：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以给父元素添加overflow:hidden
清除内外边距
* {padding:0; /*清除内边距*/margin:0; /*清除外边距*/}行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下边距，但是转换为块级或者行内块元素就可以了