探究行内元素和块级元素-创新互联
在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 表单。 |
<h2> to <h7> |
定义 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
有一天，当你明白"小白" +"勤奋"的时候，你就会成为大牛
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享文章：探究行内元素和块级元素-创新互联
文章路径：http://cdiso.cn/article/ijddg.html
