### CSS样式表的冲突的总结
- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
- 2、对于相同类型的样式表（比如同样都是内部样式表），选择器排序：ID选择器 > 类选择器 > 标签选择器
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
> 总结：就近原则。ID选择器优先级最大。
- 冲突的情况：
- 1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
- 2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。
### !important标记：优先级最高
```css
p{
color:red !important;
}
```
**（1）!important无法提升继承的权重，该是0还是0**
** (2)!important不影响就近原则**
- 如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
- 答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。
## 盒子模型
- 标准盒子模型：
### 盒子中的区域
一个盒子中主要的属性：width、height、padding、border、margin。
- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
一个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
### `<body>`标签也有margin
整个网页最大的盒子是`<document>`，即浏览器，`<body>`是`<document>`的儿子。
浏览器给`<body>`默认的margin大小是8个像素，此时`<body>`占据了整个页面的一大部分区域，而不是全部区域。
## width、height
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
上面这两个盒子的盒模型图如下：
**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。
## padding
### padding区域也有颜色
padding就是内边距。background-color将填充**所有border以内的区域。**
### padding有四个方向
```css
/* 方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。 */
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
/* 综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的） */
padding:30px 20px 40px 100px;
padding:30px 20px 40px;
/* 只写了三个值，则顺序为：上、左右、下 */
padding:30px 20px;
/* 只写了两个值，则顺序为：上下、左右 */
```
### **用小属性层叠大属性**。
```css
<!-- 正确 -->
padding: 20px;
padding-left: 30px;
<!-- 错误 -->
padding-left: 30px;
padding: 20px;
<!-- 第一行的小属性无效，因为被第二行的大属性层叠掉了。 -->
```
## border：边框。边框有三个要素：像素（粗细）、线型、颜色。
```css
.div1{
width: 10px;
height: 10px;
border: 2px solid red;
}
/* 颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。 */
```
### border-style：solid、dashed、dotted。
### border拆分
```css
border:1px solid red;
```
border属性是能够被拆开的，有两大种拆开的方式：
- （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
- （2）按方向拆开：border-top、border-right、border-bottom、border-left。
**一个border属性，是由三个小属性综合而成的**。上右下左
```
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
```
### 举例1：利用 border 属性画一个三角形
```css
div{
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
border-bottom: none;
}
```
### 举例2：利用 border 属性画一个等边三角形
```css
.div1{
width: 0;
height: 0;
border-top: 30px solid red;
/* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
```
在上方代码的基础之上，再加一个 `border-radius: 20px;` 就能画出一个扇形。
