内容简介：在行内元素块级元素
在 html 中元素主要分为行内元素和块级元素
行内元素
- 不独占一行
- 书写完成后不会自动换行
- 没有宽和高
块级元素
- 独占一行
- 书写完会自动换行
- 宽和高可以修改
还有一种特殊的元素叫作 行内块级元素 ；
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
块级元素和行内元素的分类
html中的块级元素：
| 标签 | 描述 |
|---|---|
<address> |
定义地址。 |
<article> |
定义文章。 |
<aside> |
定义页面内容之外的内容。 |
<audio> |
定义声音内容。 |
<blockquote> |
定义长的引用。 |
<canvas> |
定义图形。 |
<caption> |
定义表格标题。 |
<dd> |
定义定义列表中项目的描述。 |
<div> |
定义文档中的节。 |
<dl> |
定义定义列表。 |
<dt> |
定义定义列表中的项目。 |
| `
定义元素的细节。
|
|
<fieldset> |
定义围绕表单中元素的边框。 |
<figcaption> |
定义 figure 元素的标题。 |
<figure> |
定义媒介内容的分组，以及它们的标题。 |
<footer> |
定义 section 或 page 的页脚。 |
<form> |
定义供用户输入的 HTML 表单。 |
<h1> to <h6> |
定义 HTML 标题。 |
<header> |
定义 section 或 page 的页眉。 |
<hr> |
定义水平线。 |
<legend> |
定义 fieldset 元素的标题。 |
<li> |
定义列表的项目。 |
<menu> |
定义命令的列表或菜单。 |
<meter> |
定义预定义范围内的度量。 |
<nav> |
定义导航链接。 |
<noframes> |
定义针对不支持框架的用户的替代内容。 |
<noscript> |
定义针对不支持客户端脚本的用户的替代内容。 |
<ol> |
定义有序列表。 |
<output> |
定义输出的一些类型。 |
<p> |
定义段落。 |
<pre> |
定义预格式文本。 |
<section> |
定义 section。 |
<table> |
定义表格。 |
<tbody> |
定义表格中的主体内容。 |
<td> |
定义表格中的单元。 |
<tfoot> |
定义表格中的表注内容（脚注）。 |
<th> |
定义表格中的表头单元格。 |
<thead> |
定义表格中的表头内容。 |
<time> |
定义日期/时间。 |
<tr> |
定义表格中的行。 |
<ul> |
定义无序列表。 |
html中的行内元素：
| 标签 | 描述 |
|---|---|
<a> |
定义锚。 |
<abbr> |
定义缩写。 |
<acronym> |
定义只取首字母的缩写。 |
<b> |
定义粗体字 |
<bdo> |
定义文字方向。 |
<big> |
定义大号文本。 |
<br> |
定义简单的折行。 |
<button> |
定义按钮 (push button)。 |
<cite> |
定义引用(citation)。 |
<code> |
定义计算机代码文本。 |
<command> |
定义命令按钮。 |
<dfn> |
定义定义项目。 |
<del> |
定义被删除文本。 |
<em> |
定义强调文本。 |
<embed> |
定义外部交互内容或插件。 |
<i> |
定义斜体字。 |
<img> |
定义图像。 |
<input> |
定义输入控件。 |
<kbd> |
定义键盘文本。 |
<label> |
定义 input 元素的标注。 |
<map> |
定义图像映射。 |
<mark> |
定义有记号的文本。 |
<objec> |
定义内嵌对象。 |
<progress> |
定义任何类型的任务的进度。 |
<q> |
定义短的引用。 |
<samp> |
定义计算机代码样本。 |
<select> |
定义选择列表（下拉列表）。 |
<small> |
定义小号文本。 |
<span> |
定义文档中的节。 |
<strong> |
定义强调文本。 |
<sub> |
定义下标文本。 |
<sup> |
定义上标文本。 |
<textarea> |
定义多行的文本输入控件。 |
<time> |
定义日期/时间。 |
<tt> |
定义打字机文本。 |
<var> |
定义文本的变量部分。 |
<video> |
定义视频。 |
<wbr> |
定义可能的换行符。 |
实例
我们书写几个 span 标签
可以看到几个span都出现在了一行内
我们再书写几个 div 标签
可以看到div已经垂直了(不在一行内) 继续：我们给 div 添加一个刚才提到的特殊元素：行内块级元素 inline-block
div 会变成行内块级元素，同时宽和高也在 因此
inline-block
既有行内元素水平排列的特点，也有块级元素设置宽高的特点
- 仔细看上图，会发现水平方向有一个bug，有一个间隔 空闲时间可以去百度下hack~
- 解决办法：
- ①
margin:-3px②position：relitive;left:-3px;
关于行内元素和块级元素先谈这么多，听说认真阅读并点赞的你，代码敲的最6哦~ 有兴趣的小伙伴可以加我微信，一起讨论；V-x: dandanshen987
以上所述就是小编给大家介绍的《探究行内元素和块级元素》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- CSS 基础：块级元素、行内元素、替换元素、非替换元素
- 跨域不完全探究
- Spring源码探究：容器
- Flutter BuildContext 探究
- Flutter mixins 探究
- Serverless 一些探究（一）
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
About Face 3
Alan Cooper、Robert Reimann、David Cronin / John Wiley & Sons / 2007-5-15 / GBP 28.99
* The return of the authoritative bestseller includes all new content relevant to the popularization of how About Face maintains its relevance to new Web technologies such as AJAX and mobile platforms......一起来看看 《About Face 3》 这本书的介绍吧!
