CSS（三）：CSS特性与盒子模型

CSS三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先性

层叠性

给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题

• 层叠性原则：
• 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突的部分不会层叠
  
  

继承性

子标签会继承父标签的某些样式，如文本样式和字号

• 可以继承的样式（text-,font-,line-这些开头的可以继承，以及color属性）
• 比如高度，盒子模型的内外边距是不会继承的

行高的继承

body { font: 12px/1.5 "Microsoft yahei"; }
div { font-size: 14px; }

这里继承的行高指的是当前元素文字大小的1.5倍，所有当前div的行高为21px，p的行高为18px

优先级

当同一个元素指定了多个选择器，就会有优先级的产生

• 选择器相同，则进行层叠性
• 选择器不同，则根据选择器权重执行

选择器	选择器权重
继承 或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	∞ 无穷大

• !important语法：

div { color: pink;!important }

• 权重由4组数字组成，但是不会有进位（可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推）
• 等级判断从左向右，如果某一位数字相同，则判断下一位数值
• 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0，所以当子元素有自己的样式时，总是执行自己的样式
• body样式中指定的样式，<a>标签不会继承body样式，因为浏览器为a链接默认设置了一个样式（蓝色的，有下划线）

权重的叠加

如果是复合选择器，则会有权重叠加，需要计算权重

• div ul li ——> 0,0,0,3
• .nav ul li ——> 0,0,1,2
• a:hover ——> 0,0,1,1 （a有一个0,0,0,1）
• .nav a ——> 0,0,1,1
  
  

盒子模型

网页布局的本质

网页布局过程：

1. 准备相关网页元素，网页元素基本都是盒子Box
2. 用CSS设置好盒子样式，然后摆放到相应位置
3. 往盒子里装内容
   
   

盒子模型组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

边框（border）

border设置元素的边框，边框有三部分组成：边框宽度 边框样式 边框颜色
语法：border: border-width || border-style || border-color

属性	作用	属性值
border-width	边框粗细	单位是px
border-style	边框样式	solid实线边框，dashed虚线边框，dotted点线边框
border-color	边框颜色	默认为黑色

• 边框简写：border: 5px solid pink; （没有顺序）
• 上下左右边框可以分开写（以上边框为例）：border-top: 5px solid pink;

表格细线边框

当对<table>标签设置边框属性时，也需要同时对<th>和<td>标签设置属性，因为table是一个大盒子，里面装一个个小的单元格；当两相邻单元格都有边框属性时，会产生1+1=2的效果（比如边框粗细加倍），为保持原边框粗细，需要设置border-collapse属性
border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框
语法：

border-collapse: collapse;

• 表示相邻边框合并在一起
• collapse表示合并

边框会影响盒子实际大小！

边框会额外增加盒子的实际大小，在测量时有两种方案：

1. 测量盒子大小时不量边框
2. 如果测量时包含了边框，需要width/height减去边框宽度
   
   

内边距（padding）

padding属性用于设置内边距，即边框于内容之间的距离，包含：padding-top，padding-bottom，padding-left，padding-right

• padding属性（简写）可以有一到四个值

值的个数	表法意思
padding: 5px;	1个值，表示上下左右内边距都是5px
padding: 5px 10px;	2个值，表示上下内边距时5px，左右内边距是10px
padding: 5px 10px 20px;	3个值，表示上内边距是5ox，左右内边距是10px，下内边距是20px
padding: 5px 10px 20px 30px;	4个值，表示上右下左的内边距分别为5，10，20，30px

padding会影响盒子实际大小！

如果盒子已经有了宽度和高度，再指定内边距，会撑大盒子
让width/height减去多出来的内边距大小即可

• 当需要相同边距，但不同盒子宽度时，可以利用该性质

padding不会撑开盒子的情况？

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离，包括margin-left，margin-right，margin-top，margin-bottom

• margin简写方式与padding的方式一致

外边距典型应用：块级盒子水平居中

外边距可以让块级盒子水平居中，需要满足两个条件：

• 盒子必须指定了宽度
• 盒子左右的外边距都设置为auto，以下写法都可以

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto

• 这种方式对行内元素或行内块元素无效（这两种元素没有宽度）
• 行内元素或行内块元素水平居中：给起父元素添加text-align: center;（可以将行内元素或行内块元素看作普通文字元素）

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距合并问题（即1+1=1）

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素的下上外边距同时存在时，它们之间的垂直距离不是两外边距之和，而是取两个值中的较大值

解决方案：尽量只给一个盒子添加margin值

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会跟着子元素的外边距向下移动，即父元素塌陷较大的外边距值

解决方案：

• 可以为父元素定义上边框 border: 1px solid transparent;
• 可以为父元素定义上内边距
• 可以为父元素添加 overflow: hidden;
• 还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，比如谷歌浏览器中body默认有8px的外边距，因此在布局前，首先要清除网页元素的内外边距

 * {
	padding: 0;
	margin: 0;
}

• 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
• 但转换为块级和行内块元素时就可以了

开始布局前，首先需 1.清除内外边距；2.统一字体样式；3.清除列表样式 list-style: none;

产品模块反思：

1. 文字模块中因为每段文字可能占位不同，需要对整个文字段设置宽高，以保证每段文字内容都与下一模块对齐显示
2. 盒子中的图片过大时，直接让图片继承父盒子的宽度 width:100%;
3. padding和margin的使用选择：当前盒子没有width/height时可用padding，因为不会撑开盒子；盒子与盒子之间的距离用margin
4. 根据标签语言选择合理的标签
5. 测量盒子时不包括边框，因为边框会撑大盒子，且外边距属于盒子外部，在边框之外
6. 布局时1⃣️分析盒子结构，确定合理标签；2⃣️加入内容，方便调试；3⃣️确定位置，设置样式

一下三个属性是CSS3新增属性，有兼容性问题，要IE9或以上才行

圆角边框

border-radius属性用于设置元素的外边框圆角
语法：

border-radius: length;

radius半径（园的半径）原理：（椭）圆与边框的交集形成圆角效果

• length值越大圆角越明显
• length值可以为数值或百分比
• 圆形的做法：需要一个正方形盒子，border-radius设置为高度/宽度的一半（或50%）
• 圆角矩形的做法：需要一个矩形盒子，border-radius设置为高度的一半
• 该属性是一个简写属性，可以跟四个值，分别代表左上、右上、右下、左下
• 分开写：border-top-left-radius、border-top- right-radius、border-bottom-left-radius、border- bottom- right-radius

盒子阴影

box-shadow属性为盒子添加阴影，语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值（负值往左走）
v-shadow	必需，垂直阴影的位置，允许负值（负值往上走）
blur	可选，模糊距离（影子虚实，越大越模糊）
spread	可选，阴影的尺寸（影子大小）
color	可选，阴影的颜色
inset	可选，将外部阴影（outset，默认，不写）改为内部阴影

• 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
• 盒子阴影不占用空间，不会影响其他盒子排列
• 原先盒子没有阴影，当鼠标经过盒子就添加阴影效果：在div:hover中添加box-shadow属性（此时阴影添加生硬，后面会学如何过渡）

文字阴影

text- shadow属性用于设置文字阴影，语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值（负值往左走）
v-shadow	必需，垂直阴影的位置，允许负值（负值往上走）
blur	可选，模糊距离（影子虚实，越大越模糊）
color	可选，阴影的颜色