元素的显示模式（display）

HTML的显示模式有很多种，常见的有block、inline、inline-block、table、form等，HTML5又新增了flex；

其中，使用最多的为block、inline、和inline-block，以及flex，flex的显示模式较为复杂暂且不表，这里我们详细说一下前三种。

block（块级元素）

• 元素可以直接设置宽度和高度
• 元素默认宽度100%，默认高度自适应
• 元素独占一整行

常见的块级元素有：

• address - 地址
• blockquote - 块引用
• center - 举中对齐块
• dir - 目录列表
• div - 常用块级容易，也是css layout的主要标签
• dl - 定义列表
• fieldset - form控制组
• form - 交互表单
• h1 - 大标题
• h2 - 副标题
• h3 - 3级标题
• h4 - 4级标题
• h5 - 5级标题
• h6 - 6级标题
• hr - 水平分隔线
• isindex - input prompt
• menu - 菜单列表
• noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
• noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
• ol - 排序表单
• p - 段落
• pre - 格式化文本
• table - 表格
• ul - 非排序列表

inline（行内元素）

• 元素不可以直接设置宽度和高度
• 元素默认宽度自适应，默认高度自适应
• 元素可以和其他元素共处一行

• a - 锚点
• abbr - 缩写
• acronym - 首字
• b - 粗体(不推荐)
• bdo - bidi override
• big - 大字体
• br - 换行
• cite - 引用
• code - 计算机代码(在引用源码的时候需要)
• dfn - 定义字段
• em - 强调
• font - 字体设定(不推荐)
• i - 斜体
• img - 图片
• input - 输入框
• kbd - 定义键盘文本
• label - 表格标签
• q - 短引用
• s - 中划线(不推荐)
• samp - 定义范例计算机代码
• select - 项目选择
• small - 小字体文本
• span - 常用内联容器，定义文本内区块
• strike - 中划线
• strong - 粗体强调
• sub - 下标
• sup - 上标
• textarea - 多行文本输入框
• tt - 电传文本
• u - 下划线
• var - 定义变量

inline-block（行块元素）

• 元素可以直接设置宽度和高度
• 元素默认宽度自适应，默认高度自适应
• 元素可以和其他元素共处一行

• input
• textarea

为什么（什么情况下）要使用display转换显示模式

1. 元素本身是行内元素，但是需要给他设置宽高的时候，需要转换为block或者inline-block
2. 元素本身是块级元素，但是现在有多个同等级元素想要同一排显示时，需要转换为inline或者inline-block
3. 元素内部的结构较为复杂（如一个a标签内部需要放一个无序列表）时，需要转换为block或者inline-block
4. 元素需要设置margin或者padding时，最好将这个元素转为块级元素。

为什么要转换显示模式？

在大多数情况下，布局通常使用块级元素，少部分需要横排显示且需要设置宽高的小型元素需要使用行块元素，同一行内需要有特殊样式显示的文字使用行内元素。

image.png

如图分为上下两个模块。
这两种模块均为页面的主体结构且独占一行，所以使用块级元素搭建；
第一行内有网页、新闻、贴吧等选项，由于是几个相同的元素放在同一行显示，所以可以使用行块元素，也可以使用块级元素然后浮动；
下半部分一段文字中有几个文字是和其他文字显示颜色不同的，所以为了不影响整体排版，这种特殊标出的文字需要使用行内元素标注，然后单独设置样式。

display的用法

• 通过直接给元素设置display:block即可将这个元素转换成块级元素，绝大多数元素可以直接通过这种方式转换，少部分元素不可转换。

<a href="">点击跳转</a>

我的页面中写入了一个a标签，在页面中的显示如上图所示。
现在我想将这个a标签转换为圆形，所以我需要给他设置这样的样式：

    a{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 50%;
    }

这时，在页面中显示出的效果是这样的：

a标签

这是由于a标签是一个行内元素，虽然我们给他设置了宽度和高度，但是它还是会依照自己的内容尺寸算出当前标签的大小，所以我们需要再将它转成块级元素，才能正常设置宽度和高度，从而实现我们想要的排版效果

    a{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 50%;
      display: block;
      line-height: 100px;
      text-align: center;
    }

image.png