CSS-标签的显示模式，块级元素特点、行内元素特点、行内块级元素的特点，块元素、行内元素、行内块元素之间的转换
HTML 中的标签分为三种：块级元素、行内元素、行内块级元素；通过 CSS 中的样式属性 display 可转换元素的显示模式
块级元素（block-level）
块级元素独占一行，可以设置宽、高、对齐等属性，如果不设置宽度块级元素的宽度默认为浏览窗口的宽度（父级元素宽度的 100%）；块级元素在实际开发中多用于网页的排版布局%
常见的块元素:
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
其中 <div> 标签是最典型的块元素，网页布局中经常用到
需要注意的是：只有文字才能组成段落 ，因此 p 标签中不能放块级元素；h1~ h6、dt 这些都是文字类块级标签，里面都不能放其他块级元素
特点总结：
- 自己独占一行
- 高度，宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
行内元素（inline-level）
行内元素不占有独立的区域可以多个行内元素存在于一行；对宽高属性值不生效，完全靠内容来撑开宽高；不可以设置宽、高、对齐等属性，常用于控制页面中文本的样式（添加语义）
常见的行内元素
<a>、<strong>、<b>、<i>、<em>、<ins>、<del>、<u>、<s>、<span>
其中 <span> 标签为最典型的行内元素
需要注意的是：a 标签里面不能再放 a 标签；特殊情况 a 标签中可以放块级元素，但是最好给 a 转换为块级元素
特点总结：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽无法直接设置（无效），可设置水平方向的 padding 和 margin，垂直方向无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或则其他行内元素
行内块级元素（inline-block）
行内块级元素结合了行内和块级的优点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；可以对行内块级元素设置宽、高和对齐属性
常见的行内块级元素
<img />、<input />、<td>
特点总结：
- 和相邻行内元素（行内块）在一行上，但是元素之间会有空白缝隙；一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度，行高、外边距以及内边距都可以设置
display 属性的使用
需要将元素转为哪种显示模式，直接将 display 设置为需要的值即可，常见的值如下：
| 属性值 | 说明 |
|---|---|
| none | 隐藏元素，不显示；设置了该属性值元数将隐藏，不再占有原来的空间 |
| blcck | 显示为块级元素 |
| inline | 显示为行内元素 |
| inline-block | 显示为行内块级元素 |
蔚落
朱雀
Bertha 。
野性酷女
淩亂°似流年
还没有评论，来说两句吧...