css第三天 ---css的层叠性、继承性、优先级、盒子模型、内边距padding、外边距margin

一、三大特性

1、层叠性

对一个元素多次设置同一个样式，会使用最后一次设置的属性值

2、继承性

• 继承父元素的文本样式，line- 、text-、font-。

• 行高的继承

  • line-height: 1.5; 行高不写单位表示文字倍数

  • 这么写的好处是：子元素可以根据自己的文字大小自动调整行高。

例：

<style>
   body {
     font: 16px/1.5 “微软雅黑”;
   }
</style>

• 则行高为16*1.5=24px；

3、优先级

选择器	权重
继承*	0,0,0,0
标签选择器	0,0,0,1
类选择器\伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式	1,0,0,0
!important	∞无穷大

注：权重是不能进位的。

TIP:
给链接的父级取消下划线是不能实现的:
因为浏览器默认给a设置了下划线，是直接选出的标签选择器的权重，权重为 0,0,0,1 ，而从父元素继承来的权重是0,0,0,0 ,
所以必须单独给a链接设置样式。

二、盒子模型原理

1.盒子模型的组成部分

盒子模型包含四个部分：实际内容（content）、边框（border）、内边距（padding）、外边距（margin）

2、盒子模型边框 border

属性	作用
border-width	设置边框的粗细
border-style	设置边框样式 solid（实线）、dashed（虚线）、dotted（点线）
border-color	设置边框颜色

2.1、边框的复合写法：
border: 1px solid blue;（推荐写法） 没有顺序

2.2、边框的单独写法：

border-top: 1px solid blue;
border-right: 1px solid blue;
border-bottom: 1px solid blue;
border-left: 1px solid blue;

2.3、表格细线边框：border-collapse: collapse;

作用：把相邻的单元格边框合并到一起。仅仅适用于表格。

table,
th,
td {
   border: 1px solid orange;
   border-collapse: collapse;
}

没加border-collapse: collapse;

加了border-collapse: collapse;

2.4、边框会影响盒子的实际大小

解决办法：

• 测量盒子时，不测量边框；
• width/height 减去边框宽度。

3、盒子内边距 padding

作用：设置内容与边框的距离。

3.1、 给四个边框分别设置：

padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

3.2、padding复合写法

取值个数	含义
padding: 10px;	四周内边距都是10px
padding: 10px 20px;	上下10px、左右20px
padding: 10px 20px 30px;	上10px、左右20px、下30px
padding: 10px 15px 20px 25px;	上10px、右15px、下20px、左25px

注：padding的复合写法顺序不能乱，上右下左顺时针。

3.3、padding会影响盒子的实际大小

没加padding时的盒子，宽高各100px；

加了 padding: 10px; 之后。

解决：width/height减去多出的padding。

3.4、padding不会撑开盒子的情况

块元素没有指定width属性，padding不会撑开盒子的宽度（前提padding小于父盒子的宽度）；如果设置了高度，那么padding-top和padding-bottom会撑开盒子的高度。

4、盒子外边距 margin

作用：设置盒子与盒子之间的距离

4.1、给四个边框分别设置
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

4.2、margin复合写法

取值个数	含义
margin: 10px;	四周外边距都是10px
margin: 10px 20px;	上下10px、左右20px
margin: 10px 20px 30px;	上10px、左右20px、下30px
margin: 10px 15px 20px 25px;	上10px、右15px、下20px、左25px

注：复合写法的顺序不能乱，上右下左，顺时针。

4.3、块级盒子居中对齐

• 盒子必须有宽度
• 水平间距margin：auto；或者margin: 0 auto;

4.4、行内元素和行内块元素水平居中

• 给父元素添加 text-align: center;

4.5、相邻块元素外边距合并

• 上面盒子设置margin-bottom,下面盒子设置margin-top,取最大值显示。

解决：只设置一个盒子的margin

4.6、 外边距合并 嵌套块元素塌陷

出现块元素塌陷的情况：

• 父子元素同时设置上外边距；父元素会出现外边距塌陷。

解决：

• 给父元素顶部设置边框
• 给父元素顶部设置内边距
• 给父元素添加overflow: hiden; （推荐）。

4.7、清除内外边距

• {
  padding: 0;
  margin: 0;
  }
  注：行内元素设置内外边距时尽量设置左右内外边距，不要设置上下内外边距。

---

今天的分享就到这里了，感谢各位观看，拜拜~
今天认真写代码了吗？