css，层叠样式表
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
1.样式冲突，遵循的原则时就近原则
2.样式不冲突，不会层叠
CSS继承性 子承父业
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
适当使用，不可滥用，好处减低了css的复杂度，子元素可以继承父元素的哪些样式(color,text-,font-,line-)
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
继承样式的权重为0，即在嵌套结构中，不管父元素的权重多大，被子元素继承是，权重都为0.
行内样式优先。行内样式权重相当高
权重相同时，层叠行，就近原则
css有一个命令 !important 优先级最大
### CSS的特殊性(Specificity)
关于css 的权重，我们需要一套公式，就叫CSS的特殊性(Specificity)，我们称之为css特性或非凡性
css特性有四个数字组成，从左到右，左边最大，数位没有进制，级别之间不可超越
| 继承的贡献值 | 0，0，0，0 |
| -------------- | ---------- |
| 每个元素贡献值 | 0，0，0，1 |
| 每个类，伪类 | 0，0，1，0 |
| 每个id | 0，1，0，0 |
| 行内样式 | 1，0，0，0 |
| ！important | 无穷大 |
| div ul li | 0003 |
| ---------- | ---- |
| .nav ul li | 0012 |
| a:hover | 0011 |
| .nav a | 0011 |
| #nav p | 0101 |
1.数位之间没有进制，0005+0005=00010，
2.继承的权重为0
总结优先级
1.!important
2.行内样式
3.id选择器
4.类选择器，属性选择器，伪元素，伪类
5.元素选择器
6.通配符选择
7.同一类选择就近原则
权重是优先级的算法，层叠是优先级的表现
css三大模块，盒子模型，浮动，定位。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
文字相当于牛奶，把它放进容器，也就我们的盒子。
万物皆是盒子
## 看透网页布局的本质
CSS 其实没有太多逻辑可言 ， 类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。
## 盒子模型（Box Model）
。首先，我们来看一张图，来体会下什么是盒子模型。
<img src="media/box.png" width="700" />
所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，<strong style="color: #f00;">每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。</strong>
<img src="media/boxs.png" width="700" />
## 盒子边框（border）
盒子应用于ie6以上，ie5的略过
语法：
~~~css
border : border-width || border-style || border-color
border: 1px solid red;
~~~
边框属性—设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
solid
dashed
### 盒子边框写法总结表
| | | |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 设置内容 | 样式属性 | 常用属性值 |
| 上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
| 下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | |
| 左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | |
| 右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
| 样式综合设置 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
| 颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色; | |
```html
border: 1px 2px 3px 3px
### 圆角边框(CSS3)
之前的世界只有矩形，学了这个就不只矩形
border-radius(半径): 左上 右上 右下 左下
详见案例
## 内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
| 值的个数 | 表达意思 |
| -------- | --------------- |
| 1 | 上下左右 |
| 2 | 上下 左右 |
| 3 | 上 左右 下 |
| 4 | 上右下左 |
# 外边距（margin）
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， **这段空白通常不能放置其他内容。**
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
### 外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
1. 必须是块级元素。
2. 盒子必须指定了宽度（width）
然后就给**左右的外边距都设置为auto**，就可使块级元素水平居中。
### 文字盒子居中图片和背景区别
1. 文字水平居中是 text-align: center
2. 盒子水平居中 左右margin 改为 auto
3. 插入图片 我们用的最多 比如产品展示类
4. 背景图片我们一般用于小图标背景 或者 超大背景图片
background-position: center center;
### 清除元素的默认内外边距
为了更方便地控制网页中的元素，制作网页时，需要清除元素的默认内外边距：
### 外边距合并
外边距塌陷：
当上下相邻的两个块级元素相遇时，他们之间的垂直间距不是top，bottom的和，而是两者的较大者，相邻块元素的垂直外边距的合并
解决方案：把较大值改成期望的值
嵌套块级元素垂直外边距的合并
来源：https://blog.csdn.net/weixin_43818659/article/details/101192213