CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解

傷城~ 2023-10-01 08:10 32阅读 0赞

原文网址：[CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN]

## 简介 ##

本文介绍CSS的块级元素(block)、内联元素(inline)和内联块元素(inline-block)的区别。

## 对比 ##

<table> 
 <tbody> 
 <tr> 
 <td style="width:98px;"> 项 </td> 
 <td style="width:279px;"> 块元素 </td> 
 <td style="width:302px;"> 内联元素 </td> 
 <td style="width:127.5pt;"> 内联块元素 </td> 
 </tr> 
 <tr> 
 <td style="width:98px;"> display值 </td> 
 <td style="width:279px;"> block </td> 
 <td style="width:302px;"> inline </td> 
 <td style="width:127.5pt;"> inline-block </td> 
 </tr> 
 <tr> 
 <td style="width:98px;"> 换行 </td> 
 <td style="width:279px;"> 独占一行 </td> 
 <td style="width:302px;"> 相邻的内联元素排在同一行，直到一行排不下，才换行 </td> 
 <td style="width:127.5pt;"> 与“内联元素”相同 </td> 
 </tr> 
 <tr> 
 <td style="width:98px;"> width，height，line-height </td> 
 <td style="width:279px;"> width，height，line-height有效。 宽度：若不设置则自动填满父元素宽度 </td> 
 <td style="width:302px;"> width，height无效，line-height有效。 宽度由内容决定，高度随由字体大小决定。 </td> 
 <td style="width:127.5pt;"> width，height，line-height有效。 宽度：若不设置则由内容决定。 </td> 
 </tr> 
 <tr> 
 <td style="width:98px;"> margin，padding </td> 
 <td style="width:279px;"> 可设置margin和padding属性 </td> 
 <td style="width:302px;"> 只有横向其效果，纵向不起效果。即：margin-left、margin-right、padding-left、padding-right起作用，margin-top、margin-bottom、padding-top、padding-bottom不起作用 </td> 
 <td style="width:127.5pt;"> 与“块元素”相同 </td> 
 </tr> 
 <tr> 
 <td style="width:98px;"> 容纳的内容 </td> 
 <td style="width:279px;"> 可容纳块元素和内联元素。 </td> 
 <td style="width:302px;"> 可容纳块元素和内联元素。 内部的块级元素会撑大外部的内联标签。 </td> 
 <td style="width:127.5pt;"> </td> 
 </tr> 
 </tbody> 
</table>

**特殊的元素**

几个特殊的块元素只能包含内联元素而不能包含块级元素：h1~h6、p、dt。

li可以包含div标签

将ul元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

## 替换元素与非替换元素 ##

**替换元素（空元素）**

**替换元素**就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：img、input、textarea、select、object。

这样的元素也称为：**空元素**，因为这些元素没有实际的内容。例如： <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

例1：img

浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容。

例2：input

根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

**不可替换元素（非空元素）**

html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

例如： 段落的内容 段落是一个不可替换元素，文字“段落的内容”全被显示。

## 元素转换 ##

**1.display**

*  块元素：默认display:block;
 *  内联非替换元素(a,span)：默认为display：inline;
 *  内联替换元素(input)：默认为display:inline-block;

display:none; /\*不显示该元素，也不会保留该元素原先占有的文档流位置。\*/  
display:block; /\*转换为块级元素。\*/  
display:inline; /\*转换为行内元素。\*/  
display:inline-block; /\*转换为行内块级元素。其实仍为行内元素，但可以设置width及height等\*/

**2.float**

*  当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。
 *  行内元素去除了之间的莫名空白。

**3.position**

为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

## 块元素大全 ##

<table> 
 <tbody> 
 <tr> 
 <td style="width:55.5pt;"> 元素 </td> 
 <td style="width:313.5pt;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> address </td> 
 <td style="width:313.5pt;"> 地址 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> caption </td> 
 <td style="width:313.5pt;"> 表格标题 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> dd </td> 
 <td style="width:313.5pt;"> 列表中条目 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> div </td> 
 <td style="width:313.5pt;"> 文档中的分区或节 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> dl </td> 
 <td style="width:313.5pt;"> 列表 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> dt </td> 
 <td style="width:313.5pt;"> 列表中的项目 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> fieldset </td> 
 <td style="width:313.5pt;"> 一个框架集 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> form </td> 
 <td style="width:313.5pt;"> 创建 HTML 表单 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> h1 </td> 
 <td style="width:313.5pt;"> 1级标题 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> h2 </td> 
 <td style="width:313.5pt;"> 2级标题 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> h3 </td> 
 <td style="width:313.5pt;"> 3级标题 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> h4 </td> 
 <td style="width:313.5pt;"> 4级标题 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> h5 </td> 
 <td style="width:313.5pt;"> 5级标题 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> h6 </td> 
 <td style="width:313.5pt;"> 6级标题 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> hr </td> 
 <td style="width:313.5pt;"> 创建一条水平线 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> legend </td> 
 <td style="width:313.5pt;"> 元素为 fieldset 元素标题 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> li </td> 
 <td style="width:313.5pt;"> 标签列表项目 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> noframes </td> 
 <td style="width:313.5pt;"> 为那些不支持框架的浏览器显示文本，在frameset元素内部 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> noscript </td> 
 <td style="width:313.5pt;"> 在脚本未被执行时的替代内容 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> ol </td> 
 <td style="width:313.5pt;"> 有序列表 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> ul </td> 
 <td style="width:313.5pt;"> 无序列表 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> p </td> 
 <td style="width:313.5pt;"> 标签段落 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> pre </td> 
 <td style="width:313.5pt;"> 预格式化的文本 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> table </td> 
 <td style="width:313.5pt;"> 标签 HTML 表格 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> tbody </td> 
 <td style="width:313.5pt;"> 标签表格主体（正文） </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> td </td> 
 <td style="width:313.5pt;"> 表格中的标准单元格 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> tfoot </td> 
 <td style="width:313.5pt;"> 表格的页脚（脚注或表注） </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> th </td> 
 <td style="width:313.5pt;"> 表头单元格 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> thead </td> 
 <td style="width:313.5pt;"> 标签表格的表头 </td> 
 </tr> 
 <tr> 
 <td style="width:55.5pt;"> tr </td> 
 <td style="width:313.5pt;"> 表格中的行 </td> 
 </tr> 
 </tbody> 
</table>

## 内联元素大全 ##

<table> 
 <tbody> 
 <tr> 
 <td> 元素 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> a </td> 
 <td> 锚 </td> 
 </tr> 
 <tr> 
 <td> abbr </td> 
 <td> 表示一个缩写形式 </td> 
 </tr> 
 <tr> 
 <td> acronym </td> 
 <td> 只取首字母缩写 </td> 
 </tr> 
 <tr> 
 <td> b </td> 
 <td> 字体加粗 </td> 
 </tr> 
 <tr> 
 <td> bdo </td> 
 <td> 可覆盖默认的文本方向 </td> 
 </tr> 
 <tr> 
 <td> big </td> 
 <td> 大号字体加粗 </td> 
 </tr> 
 <tr> 
 <td> br </td> 
 <td> 换行 </td> 
 </tr> 
 <tr> 
 <td> cite </td> 
 <td> 引用进行定义 </td> 
 </tr> 
 <tr> 
 <td> code </td> 
 <td> 定义计算机代码文本 </td> 
 </tr> 
 <tr> 
 <td> dfn </td> 
 <td> 定义一个定义项目 </td> 
 </tr> 
 <tr> 
 <td> em </td> 
 <td> 定义为强调的内容 </td> 
 </tr> 
 <tr> 
 <td> i </td> 
 <td> 斜体文本效果 </td> 
 </tr> 
 <tr> 
 <td> img </td> 
 <td> 向网页中嵌入一幅图像 </td> 
 </tr> 
 <tr> 
 <td> input </td> 
 <td> 输入框 </td> 
 </tr> 
 <tr> 
 <td> kbd </td> 
 <td> 定义键盘文本 </td> 
 </tr> 
 <tr> 
 <td> label </td> 
 <td> 标签为 input 元素定义标注（标记） </td> 
 </tr> 
 <tr> 
 <td> q </td> 
 <td> 定义短的引用 </td> 
 </tr> 
 <tr> 
 <td> samp </td> 
 <td> 定义样本文本 </td> 
 </tr> 
 <tr> 
 <td> select </td> 
 <td> 创建单选或多选菜单 </td> 
 </tr> 
 <tr> 
 <td> small </td> 
 <td> 呈现小号字体效果 </td> 
 </tr> 
 <tr> 
 <td> span </td> 
 <td> 组合文档中的行内元素 </td> 
 </tr> 
 <tr> 
 <td> strong </td> 
 <td> 语气更强的强调的内容 </td> 
 </tr> 
 <tr> 
 <td> sub </td> 
 <td> 定义下标文本 </td> 
 </tr> 
 <tr> 
 <td> sup </td> 
 <td> 定义上标文本 </td> 
 </tr> 
 <tr> 
 <td> textarea </td> 
 <td> 多行的文本输入控件 </td> 
 </tr> 
 <tr> 
 <td> tt </td> 
 <td> 打字机或者等宽的文本效果 </td> 
 </tr> 
 <tr> 
 <td> var </td> 
 <td> 定义变量 </td> 
 </tr> 
 </tbody> 
</table>

## 可变元素大全 ##

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

[CSS_--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121683931