CSS布局基础（二）（标签类型 & CSS属性特征 & 表格边框）

标签类型

块元素

• 独占一行，默认宽度100%
• 可设置宽高，内外边距
• 大部分块元素内部可以放 任意元素
• 文字类块元素 p / h1-h6内部，不能放块元素

常见块元素

• h1-h6
• p
• div
• ul
• ol
• dl
• li
• …

行内元素

• 在同一行显式
• 不能直接设置宽高，默认宽高就是实际内部内容宽高
• 内部只能容纳文本或者行内元素
• a 标签内不能放 a 标签， 但可以放块元素（最好将a先转成行内块）

常见行内元素

• span
• a
• b
• strong
• em
• del
• s
• ins
• u
• …

行内块元素

行内元素和块元素可手动转为行内块 display: inline-block;

• 在同一行显式
• 可以设置宽高

常见行内块

• img
• input
• td

模式转换

转行内块元素

display: inline-block;

转行内

display: inline;

转块元素

display: block;

显示类型显著区别

块元素：独占一行，可设置宽高
行内元素：同一行，不可设置宽高
行内块元素：同一行，可设置宽高
根据实际情况，进行选择。

CSS属性特征

层叠性

当一个标签被相同优先级的多个选择器选中且定义了相同的CSS属性时，后（定义/引入）的属性覆盖前面定义（引入）的属性

继承性

子标签会继承父标签某些样式（主要是文字相关的属性）
包括 text-* , font-*, line- * ，color 等属性
其中，行高建议 设置为相对单位 1 1.5 这些，子标签会随着具体字号适应

优先级

css优先级指的是 不同选择器下相同css属性值作用在一个标签上时，谁生效的问题。

按选择器类型的权重计算，值越大，权重越大，优先级越高。

选择器类型	权重
*或者继承来的属性值	0000
标签选择器	0001
class选择器或者伪类选择器	0010
id选择器	0100
行内样式	1000
!important	在属性值后面追加 !important 直接最大值，都有 !important 时，再算上其他权重
复合选择器	分别计算组成复合选择器的选择器的 权重的和 只能累加，不能越级

表格边框

默认情况下，表格外层边框 和 td / th 边框是分开的，会显示两条边。
通过以下属性 设置边框合并

border-collapse: collapse;