目录
4.3 CSS三大特性
4.3.1 层叠性
相同选择器给设置相同的样式， 此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突，遵循的原则是就近原则，那个样式离结构近，就执行哪个样式；
- 样式不冲突，不会层叠；
4.3.2 继承性
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）；
4.3.2.1 行高的继承性
body{
font：12px/1.5 Microsoft yahei；
}- 行高可以跟单位也可以不跟单位；
- 如果子元素没有设置行高，则会继承父元素的行高为1.5；
- 此时子元素的行高是：当前子元素的文字大小*1.5；
- body行高1.5这样写法最大的又是就是里面子元素可以根据自己文字大小自动调整行高；
4.3.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性；
- 选择器不同，则根据选择器权重执行；
| 选择器 | 选择器权重 |
| 继承 或者 *通配符选择器 | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID 选择器 | 0,1,0,0 |
| 行内样式 style=“” | 1,0,0,0 |
| ！important 重要的 | ∞ 无穷大 |
- 继承权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0；
- 权重虽然会叠加，但是永远不会有进位；
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重；
- div ul li ------------> 0,0,0,3
- .nav ul li ------------> 0,0,1,2
- a:hover ------------> 0,0,1,1
- .nav a -------------> 0,0,1,1
4.4盒子模型
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
盒子模型组成
包括：边框（border）、外边距（margin）、内边距（padding）、文本内容（content）；
4.4.1 边框
边框由三部分组成：边框宽度（粗细）边框样式 边框颜色
语法形式：
border：border-width|| border-style||border-color| 属性 | 作用 |
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式。solid实线、dashed 虚线、dotted点线 |
| border-color | 边框颜色 |
4.4.2 边框的复合性
边框简写：
border：1px solid red；没有顺序
边框分开写法：
border-top：1px solid red； 其余同理
4.4.3 表格细线边框
border-collapse：collapse；- collapse单词是合并的意思；
- border-collapse：collapse；表示相邻边框合并在一起；
4.4.4 盒子模型内边距padding
padding属性用于设置内边距，即边框与内容之间的距离。
| 属性 | 作用 |
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
4.4.4.1 padding复合属性
| 值的个数 | 表达意思 |
| padding：5px； | 1个值，代表上下左右都有5像素内边距； |
| padding：5ps 10px； | 2个值，代表上下内边距是5像素 左右内边距是10像素； |
| padding：5px 10px 20px； | 3个值，代表上内边距5像素 左右内边距10像素 下内边距20像素； |
| padding：5px 10px 20px 30px | 4个值，上是5像素 右10像素 下20像素左是30像素 顺时针； |
当我们给盒子指定padding值之后，发生了2件事情：
- 内容和边框有了距离，添加了内边距；
- padding影响了盒子实际大小；
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子；
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
- Padding不会撑开盒子的情况：
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。
4.4.5 盒子模型外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
| 属性 | 作用 |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
4.4.5.1 外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度；
- 盒子左右的外边距都设置auto；
.header{ width:960px; margin:0 auto}
常见的写法，以下三种都可以：
- margin-left：atuo；margin-right：auto；
- margin：auto；
- margin：0 auto；
注意：以上方法是让块元素水平居中，行内元素或者行内块元素居中给其父元素添加text-align：center即可。
4.4.6 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
4.4.6.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象别称为相邻块元素垂直外边距的合并。
解决方案：
- 尽量只给一个盒子添加margin值。
4.4.6.2嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框；
- 可以为父元素定义内边框；
- 可以为父元素添加overflow：hidden；
4.7 清除内外边距
*{
padding：0；
margin：0；
}注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
4.8 去掉li前面的项目符号（小圆点）
语法形式：
list-style：none；
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
