元素的显示模式（display）
HTML的显示模式有很多种，常见的有block、inline、inline-block、table、form等，HTML5又新增了flex；
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似<tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
其中，使用最多的为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转换显示模式
- 元素本身是行内元素，但是需要给他设置宽高的时候，需要转换为
block或者inline-block - 元素本身是块级元素，但是现在有多个同等级元素想要同一排显示时，需要转换为
inline或者inline-block - 元素内部的结构较为复杂（如一个a标签内部需要放一个无序列表）时，需要转换为
block或者inline-block - 元素需要设置
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
网友评论