(二)CSS的元素显示模式②

1 元素的显示模式

作用：网页标签很多，不同地方需要不同类型的标签更好的布局网页

元素的显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>

HTML元素一般分为块元素和行内元素两种类型。

2 块元素

常见的块元素有 h1~h6、p、div、ul、ol、li等。 div是最典型的块元素。

块级元素的特点：

1. 独占一行。
2. 高度、宽度、外边距以及内边距都可以控制。
3. 宽度默认是容器（父级宽度）的 100%。
4. 是一个容器及盒子，里面可以放行内或块级元素。

注意：

• 文字类的标签内不能放块级元素。
• 文字类元素有 p，h1~h6，尤其不能放 div 元素。

3 行内元素

常见行内元素：a、strong、b、em、i、del、s、ins、u、span，典型行内元素是 span，行内元素也叫内联元素。

行内元素的特点：

1. 相邻行内元素在一行上，一行可以显示多个。
2. 高、宽直接设置是无效的。
3. 默认宽度就是它本身内容宽度。
4. 行内元素只能容纳文本或其他行内元素。

注意

• a 链接里面不能放链接
• 特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

4 行内块元素

在行内元素中有几个特殊标签：img, input、td，它们同时具有块元素和行内元素的特点。

有些资料称为行内块元素。

行内块元素的特点：

1. 和相邻元素（行内块）在一行上，之间存在空白缝隙，一行可以显示多个。
2. 默认宽度是本身内容宽度。（行内元素特点）
3. 高度、行高、外边距、内边距都可以控制（块级元素特点）。

5 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置高度宽度	容器的 100%	可以包含任何标签
行内元素	一行可以放多个行内元素	不可以设置宽度高度	本身内容宽度	容纳文本或者其他行内元素
行内块元素	一行可以放置多个行内块元素	可以设置高度宽度	本身内容宽度

6 元素显示模式转换

特殊情况下，需要将一个元素的模式转换为另外一宗模式，使其具有另外一种模式的特性。 比如想要增加链接 a 的触发范围。

行内元素可以转换为块元素，块元素也能转换为行内元素。

行内->块级

a {
  display: block;
}

块级->行内

div {
  display: inline;
}

行内/块级-> 行内块元素

span {
  display: inline-block;
}

7 小工具snipaste

snipaste截图工具。 常用快捷方式：

1. F1截图
2. F3在桌面置顶显示
3. 点击图片，alt可以取色（按住shift可以切换取色模式）
4. 按住esc取消图片显示

8 案例：简洁版小米侧边栏

思路：

1. 把链接a转换为块级元素，这样就能独占一行且有宽度和高度。
2. 鼠标经过a给链接设置背景颜色。

单行文字垂直居中的代码：让文字的行高等于盒子的高度。 line-height：40px;