下载文档原格式
HTML元素分类【三种类型】块元素、内联元素、可变元素html元素类型总体来说css对显⽰标签来分类，分为：块状元素 内联元素（⾏内元素）对于这⾥有⼀个争议点，分为：可变元素 ⾏内快元素； 那么这些元素在默认的情况下有什么特点呢？ ⾸先块状元素特点：1：在页⾯中以矩形区域显⽰。
2：⾃上⽽下排列，独占⼀⾏3：可以直接添加宽⾼4：⼀般情况下，作为其他元素或内容的容器⽽内联元素特点：1：在页⾯中最⼩单位也是矩形。
2：在⼀⾏内逐个排列。
3：不可以直接添加宽⾼，⼤⼩是由内容撑开的。
4：内联元素也符合盒模型的规则，但是个别属性会出现问题（padding-top/bottom margin-top/bottom）5: 内联元素在⼀⾏内排列的时候，之间有间距（怎么消除间距：a:添加浮动b:把所有的内联元素都放在⼀⾏不⽤回车键（不推荐使⽤）。
注：可变元素：根据上下⽂的显⽰，来确定这个元素是块状元素还是内联元素<button>按按钮按钮按钮钮</button> ⼆、哪些标签属于块状元素，哪些标签⼜属于内联元素呢？⾸先我们的块状元素有：div -最常⽤的块级元素dl - 和dt-dd 搭配使⽤的块级元素form - 交互表单h1 -h6- ⼤标题hr - ⽔平分隔线ol – 有序列表p - 段落ul - ⽆序列表lifieldset - 表单字段集colgroup-col - 表单列分组元素table-tr-td 表格及⾏-单元格⽽内联元素有：a –超链接（锚点）b - 粗体(不推荐)br - 换⾏i - 斜体em - 强调img - 图⽚input - 输⼊框label - 表单标签span - 常⽤内联容器，定义⽂本内区块strong - 粗体强调sub - 下标sup - 上标textarea - 多⾏⽂本输⼊框u - 下划线select - 项⽬选择 在⼀个项⽬中，可能⽤到的标签可能会很多很多，但是⽐如我想⽤块元素，但是想⽤有内联元素的特点；想⽤内联，⼜想拥有块元素的特点，这个时候该怎么办呢？就需要⽤到元素类型的转换元素类型的转换：display属性：作⽤：检索或者设置元素⽣成的盒模型类型。
HTML元素分类【三种类型】在CSS中，html中的标签元素⼤体被分为三种不同的类型：块状元素、内联元素(⼜叫⾏内元素)和内联块状元素。
块状元素：display:block内联元素：display:inline内联块状元素：display:inline-block常⽤的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常⽤的内联元素有：<a>、<span>、、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常⽤的内联块状元素有：<img>、<input>内联(⾏级)标签：标签在⼀⾏内，宽度与⾼度由内容决定，只有在内容超过HTML的宽度时，才会换⾏块状标签：标签独占⼀⾏，可指定宽、⾼内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：1、和其他元素都在⼀⾏上；2、元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置区别：是否占⼀⾏能否指定⾼宽垂直⽅向的margin 内联否否否块是是是是（扩展）隐性改变display类型：有⼀个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之⼀：1. position : absolute 或 position:fixed2. float : left 或 float:rightdisplay:inline-block的⽅式显⽰，当然就可以设置元素的 width 和 height 了且默认宽度不占满⽗元素。
简述行内元素和块元素的区别
行内元素和块元素是HTML中两种基本的语义化标签。
行内元素被定位在文档流的同一块区域中,而块元素被定位在文档流的不同块级区域中。
这两种元素在排版和样式上都有所不同,具体区别如下:
1. 定位方式:行内元素直接在HTML文档中的同一块区域中定位,而块元素在文档流中按照一定的规则定位,可以在不同块级区域之间灵活移动。
2. 边框和内边距:行内元素没有边框和内边距,而块元素有边框和内边距。
3. 样式:行内元素不能使用CSS样式,而块元素可以使用CSS样式。
4. 响应式:行内元素是固定大小的,不能响应式设计,而块元素可以根据宽度自适应不同宽度。
5. 嵌套:行内元素不能嵌套,而块元素可以嵌套。
6. 兼容性:由于行内元素直接在文档流中定位,因此在兼容性方面比块元素更具挑战性。
需要注意的是,虽然行内元素和块元素在定位和样式上都有所不同,但它们也有一些共同点。
例如,它们都可以包含文本和链接,并且都可以使用JavaScript进行交互。
在设计和开发HTML页面时,需要根据具体需求选择适合的元素类型。
块级元素和⾏内元素区别⼀，⾏内元素与块级元素的区别：1.⾏内元素与块级元素直观上的区别⼆、⾏内元素与块级元素的三个区别⾏内元素会在⼀条直线上排列（默认宽度只与内容有关），都是同⼀⾏的，⽔平⽅向排列。
块级元素各占据⼀⾏（默认宽度是它本⾝⽗容器的100%（和⽗元素的宽度⼀致），与内容⽆关），垂直⽅向排列。
块级元素从新⾏开始，结束接着⼀个断⾏。
2.块级元素可以包含⾏内元素和块级元素。
⾏内元素不能包含块级元素，只能包含⽂本或者其它⾏内元素。
3.⾏内元素与块级元素属性的不同，主要是盒模型属性上：⾏内元素设置width⽆效，height⽆效(可以设置line-height)，margin上下⽆效，padding 上下⽆效⼆、⾏内元素和块级元素转换display:block; (字⾯意思表现形式设为块级元素)display:inline; (字⾯意思表现形式设为⾏内元素)三、inline-blockinline-block 的元素（如input、img)既具有 block 元素可以设置宽⾼的特性，同时⼜具有 inline 元素默认不换⾏的特性。
当然不仅仅是这些特性，⽐如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。
HTML 中的换⾏符、空格符、制表符等合并为空⽩符，字体⼤⼩不为 0 的情况下，空⽩符⾃然占据⼀定的宽度，使⽤inline-block 会产⽣元素间的空隙。
（这句话下⾯会⽤例⼦解释）<style>div{width: 100%;background: pink;height: 100px;text-align: center;line-height: 100px;}a{color:#fff;text-decoration: none;display: inline-block;width: 100px;height: 30px;line-height: 30px;background:yellow;color: black;}</style></head><body><div><a href="">我是balala</a><a href="">我是apple</a><a href="">我是purple</a><a href="">我是pink</a></div></body></html>每个a之间都会有⼀个空隙，这个空隙是因为块级元素会换⾏，就有换⾏，HTML 中的换⾏符、空格符、制表符等合并为空⽩符.所以换⾏符会占据宽度,产⽣间隙块级元素列表<address>定义地址<caption>定义表格标题<dd>定义列表中定义条⽬<div>定义⽂档中的分区或节<dl>定义列表<dt>定义列表中的项⽬<fieldset>定义⼀个框架集<form>创建 HTML 表单<h1>定义最⼤的标题<h2>定义副标题<h3>定义标题<h4>定义标题<h5>定义标题<h6>定义最⼩的标题<hr>创建⼀条⽔平线<legend>元素为 fieldset 元素定义标题<li>标签定义列表项⽬<noframes>为那些不⽀持框架的浏览器显⽰⽂本，于 frameset 元素内部<noscript>定义在脚本未被执⾏时的替代内容<ol>定义有序列表<ul>定义⽆序列表<p>标签定义段落<pre>定义预格式化的⽂本<table>标签定义 HTML 表格<tbody>标签表格主体（正⽂）<td>表格中的标准单元格<tfoot>定义表格的页脚（脚注或表注）<th>定义表头单元格<thead>标签定义表格的表头<tr>定义表格中的⾏从⾏内元素列表<a>标签可定义锚<abbr>表⽰⼀个缩写形式<acronym>定义只取⾸字母缩写<b>字体加粗<bdo>可覆盖默认的⽂本⽅向<big>⼤号字体加粗<br>换⾏<cite>引⽤进⾏定义<code>定义计算机代码⽂本<dfn>定义⼀个定义项⽬<em>定义为强调的内容<i>斜体⽂本效果<img>向⽹页中嵌⼊⼀幅图像<input>输⼊框<kbd>定义键盘⽂本<label>标签为 input 元素定义标注（标记）<q>定义短的引⽤<samp>定义样本⽂本<select>创建单选或多选菜单<small>呈现⼩号字体效果<span>组合⽂档中的⾏内元素<strong>语⽓更强的强调的内容<sub>定义下标⽂本<sup>定义上标⽂本<textarea>多⾏的⽂本输⼊控件<tt>打字机或者等宽的⽂本效果<var>定义变量可变元素素列表--可变元素为根据上下⽂语境决定该元素为块元素或者内联元素<button>按钮<del>定义⽂档中已被删除的⽂本<iframe>创建包含另外⼀个⽂档的内联框架（即⾏内框架）<ins>标签定义已经被插⼊⽂档中的⽂本<map>客户端图像映射（即热区）<object>object对象<script>客户端脚本。
css元素有哪⼏种类型三种类型：块级元素，⾏内元素，⾏内块元素
块级元素
块级元素有哪些？
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
块级元素的特点：
1.⾃⼰独占⼀⾏
2.⾼度，宽度，外边距，内边距都可以控制
3.宽度默认是⽗级元素宽度的100%
4.是⼀个容器也是⼀个盒⼦，⾥⾯可以放⾏内元素或块级元素
5.⽂字类的元素内不能放块级元素
⾏内元素
⾏内元素有哪些？
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
⾏内元素的特点：
1.相邻元素在⼀⾏上，⼀⾏上可以显⽰多个
2.⾼度，宽度直接设置⽆效
3.默认宽度是它本⾝内容的宽度
4.⾏内元素只能容纳⽂本或其他⾏内元素
5.连接⾥⾯不能再放连接
6.特殊情况连接<a>⾥⾯可以放块级元素，但是给<a>转换⼀下会计模式最安全
⾏内块元素
⾏内块元素有哪些？
<img/>、<input/>、<td>
⾏内块元素有哪些特点：
1.和相邻⾏内元素（⾏内块元素）在⼀⾏上，但是他们之间会有空⽩缝隙
2.⼀⾏可以显⽰多个（⾏内元素特点）
3.默认宽度就是它本⾝内容的宽度（⾏内元素特点）
4.⾼度、⾏⾼、外边距、内边距都可以控制（块级元素特点）。
所有的块元素、内联块元素和内联元素
所有的块元素、内联块元素和内联元素是：
1、块元素（block elements）：在 HTML 中，块级元素通常用
于表示页面上的结构，如段落、标题、列表、表格等。
常见的内联块级元素包括 <img>、<input>、<button> 等。
2、内联元素（inline elements）：内联元素通常用于包裹文本
或者行内元素，如链接、强调文本等。
常见的内联元素包括
<a>、<em>、<span> 等。
需要注意的是，HTML5 中已经不再使用“内联元素”这个术语，而是将其归为“行内元素”。
同时，HTML5 中还新增了一些新
的行内元素，如 <time>、<mark> 等。
行内块元素对齐方式行内块元素是指在一行内可以显示多个的块级元素，比如span、a、img等。
这些元素默认是以水平方向排列的，并由它们自身的宽度来控制行内距离。
但是当我们需要控制这些块级元素的水平和垂直方向的对齐时，我们需要使用块级元素对齐方式。
本文将介绍几种行内块元素的对齐方式。
1. 水平方向对齐（1）text-align属性text-align属性适用于父元素，可以控制文本和文本块的水平对齐方式。
它可以设置为left、right、center、justify、start和end。
left：左对齐；right：右对齐；center：居中对齐；justify：两端对齐，将文本块的每一行拉伸至容器宽度；start：文本在容器的起始位置显示（与left对齐相同）；例如：div{text-align: center;}（2）float属性float属性可以使元素浮动到父元素的左侧或右侧。
这种方式不会改变父元素中其他元素的布局方式，因为浮动元素不会占用其在文档流中原来的位置。
vertical-align属性定义元素的垂直对齐方式。
这个属性只对行内元素和表格单元格有效。
它可以设置为top、middle、bottom、text-top、text-bottom。
top：顶部对齐；middle：中间对齐；text-top：顶部与父元素的文本基线对齐；line-height属性用于控制元素的行内高度，通过设置行高来实现对齐。
例如，当一个元素的line-height等于其height时，就可以实现元素内部的垂直居中效果。
div{height: 100px;line-height: 100px;text-align: center;}我们可以使用display属性将元素设置为块级元素，再通过text-align属性来控制元素的水平对齐方式。
（2）vertical-align和line-height属性span{display: inline-block;width: 100px;height: 100px;background-color: red;line-height: 100px;vertical-align: middle;text-align: center;}。
浅谈CSS块级元素与⾏内元素（内联元素）的区别和联系在css盒⼦模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。
那么它们究竟是什么呢？其实，这两种元素都是html规范中的概念。
块元素(block element)⼀般是其他元素的容器元素，能容纳其他块元素或内联元素。
最常见的就是P和div这两个，说的简单点，块元素就好⽐⼀个四⽅块，可以放其他的四⽅块，并可以呈现在页⾯上任何地⽅。
默认情况下块元素，是独占⼀⾏的。
常见的块元素：div、h1-h6标题、form（只能⽤来容纳其他块元素）、hr、p、table、ul、ol等。
内联元素(inline element)也叫内嵌元素或⾏内元素，⼀般都是基于语义级(semantic)的基本元素。
内联元素只能容纳⽂本或者其他内联元素，常见内联元素有a和span。
块元素与内联元素的区别？1.块元素，总是在新⾏上开始；内联元素，和其他元素都在⼀⾏上。
2.块元素，能容纳其他块元素或内联元素；内联元素，只能容纳⽂本或者其他内联元素。
3.块元素中⾼度，⾏⾼以及顶和底边距都可控制；内联元素中⾼，⾏⾼及顶和底边距不可改变。
(这上⾯的区别，指的是默认情况下的，不包括CSS的刻意控制。
也就是说当使⽤css控制时，块元素和内联元素的属性差异会越来越⼩。
)block（块）元素的特点：①总是在新⾏上开始；②⾼度，⾏⾼以及外边距和内边距都可控制；③宽度缺省是它的容器的100%，除⾮设定⼀个宽度。
④它可以容纳内联元素和其他块元素inline元素的特点：①和其他元素都在⼀⾏上；②⾼，⾏⾼及外边距和内边距不可改变；③宽度就是它的⽂字或图⽚的宽度，不可改变④内联元素只能容纳⽂本或者其他内联元素CSS⽂档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍，看过不少⽂章，看到所多的是零碎的CSS布局基本知识，⽐较表⾯。
HTML⾏级元素和块级元素标签列表HTML⾏级元素和块级元素标签列表tips：块级元素占⼀⾏，不论内容多少只要是有2个这样的元素就会换⾏，⾏内元素内容少时不会换⾏。
⼀、块元素(block)的特点：1. 总是在新⾏上开始；2. ⾼度，⾏⾼以及顶和底边距都可控制；3. 宽度缺省是它的容器的100%，除⾮设定⼀个宽度。
⼆、⾏内元素(inline)的特点：1. 和其他元素都在⼀⾏上；2. ⾼，⾏⾼及顶和底边距不可改变；3. 宽度就是它的⽂字或图⽚的宽度，不可改变。
三、⾏块级之间的转换：1. ⾏内标签转换块级标签：display：block2. 块级元素转换⾏内元素：display：inline四、⾏内元素列表：<a> 标签可定义锚<abbr> 表⽰⼀个缩写形式<acronym> 定义只取⾸字母缩写<b> 字体加粗<bdo> 可覆盖默认的⽂本⽅向<big> ⼤号字体加粗<br> 换⾏<cite> 引⽤进⾏定义<code> 定义计算机代码⽂本<dfn> 定义⼀个定义项⽬<em> 定义为强调的内容<i> 斜体⽂本效果<img> 向⽹页中嵌⼊⼀幅图像<input> 输⼊框<kbd> 定义键盘⽂本<label> 标签为input元素定义标注（标记）<q> 定义短的引⽤<samp> 定义样本⽂本<select> 项⽬选择、创建单选或多选菜单<small> 呈现⼩号字体效果<span> 组合⽂档中的⾏内元素<strong> 语⽓更强的强调的内容<sub> 定义下标⽂本<sup> 定义上标⽂本<textarea> 多⾏的⽂本输⼊控件<tt> 打字机或者等宽的⽂本效果<var> 定义变量<u> 下划线五、块级元素列表：<address> 定义地址<caption> 定义表格标题<dd> 定义列表中定义条⽬<div> 定义⽂档中的分区或节<dl> 定义列表<dt> 定义列表中的项⽬<fieldset> 定义⼀个框架集<form> 创建 HTML 表单<h1> 定义最⼤的标题<h2> 定义副标题<h3> 定义标题<h4> 定义标题<h5> 定义标题<h6> 定义最⼩的标题<hr> 创建⼀条⽔平线<legend> 元素为<fieldset> 元素定义标题<noframes> 为那些不⽀持框架的浏览器显⽰⽂本，于 frameset 元素内部 <noscript> 定义在脚本未被执⾏时的替代内容<ol> 定义有序列表<ul> 定义⽆序列表<li> 标签定义列表项⽬<p> 标签定义段落<pre> 定义预格式化的⽂本<table> 标签定义 HTML 表格<tbody> 标签表格主体（正⽂）<td> 表格中的标准单元格<tfoot> 定义表格的页脚（脚注或表注）<th> 定义表头单元格<thead> 标签定义表格的表头<tr> 定义表格中的⾏六、可变元素：为根据上下⽂语境决定该元素为块元素或者⾏内元素。
行内元素和块级元素
一、行内元素和块元素概括
块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, t able
行内元素：span, strong, em, br, img , input, label, select, textarea, cite, 二、行内元素和块元素详细有哪些
内联元素（行内元素）(inline element)
* 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 - 定义变量
块元素(block element)
* a ddress - 地址
* 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 - 非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚
三、行内和块元素区别
1）从显示效果来看
•块级元素会独占一行，其宽度自动填满其父元素宽度
•行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
2）块级元素可以设置width, height属性，行内元素设置width, height无效【注意：块级元素即使设置了宽度，仍然是独占一行的】
3) 块级元素可以设置margin 和padding. 行内元素的水平方向的padding-left,pad ding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,p adding-bottom,margin-top,margin-bottom都不会产生边距效果。
（水平方向有效，竖直方向无效）。
