行内和块元素
HTML元素分类【三种类型】块元素、内联元素、可变元素
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元素分类【三种类型】
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元素有哪几种类型
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;}。
html标签之行内标签、块级标签
随意的滥用标签会导致一些问题的出现：
第一，页面语义化不清晰，不符合w3c标准规范。
第二，导致代码的臃肿，标签合理应用能让我们少写不少CSS代码。
samp – 用于提取内容
select – 项目选择
small – 小字体(不推荐)
strong – 粗体(不推荐)
sub – 下标
sup – 上标
பைடு நூலகம்
textarea – 多行文本输入框
u – 下划线
var – 定义变量
块级元素:
address – 地址
第三，不利于搜索引擎爬虫抓取页面信息。
下面对HMTL常用标签按照行内和块级进行一个分类：
内联元素:
a – 锚点
abbr – 缩写(语义、利于搜索引擎)
acronym – 首字(HTML5踢出)
b – 粗体(不推荐)
big – 大字体(不推荐)
cite – 引用(语义、利于搜索引擎)
code – 引用源码(语义)
em – 强调(如果仅为了斜体请用)
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
label – 表单标签(事件关联对应表单项)
q – 短引用(标准添加引号，IE不添加引号)
s – 中划线(不推荐)
block – 块引用
center – 居中对齐块(不推荐)
dir – 目录列表(HTML5踢出)
浅谈CSS块级元素与行内元素（内联元素）的区别和联系
浅谈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⾏级元素和块级元素标签列表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> 定义表格中的⾏六、可变元素：为根据上下⽂语境决定该元素为块元素或者⾏内元素。
块级元素和行内元素的特点
块级元素和行内元素的特点在HTML中，元素可以分为块级元素和行内元素两种类型。
块级元素和行内元素具有不同的特点和用途，对于网页布局和样式设计非常重要。
块级元素的特点块级元素是指在HTML文档中以独立的块形式出现的元素。
它们会独占一行或者多个连续的行，并且会自动换行。
下面是一些常见的块级元素：•<div>•<p>•<h1>到<h6>•<ul>、<ol>、<li>•<table>•<form>块级元素具有以下特点：1.默认占满可用宽度：块级元素会默认占满其父容器可用的宽度，不论内容实际需要多少空间。
2.独占一行：每个块级元素都会从新的一行开始，并且在其后创建一个新的空白行。
3.高度、宽度和边距可控制：通过CSS样式可以设置块级元素的高度、宽度和边距等属性，从而实现灵活的布局。
4.支持嵌套：块级元素可以包含其他任意类型的HTML元素，包括块级元素和行内元素。
由于块级元素的特点，它们常用于构建网页的主要结构和布局。
通过合理地使用块级元素，我们可以实现复杂的页面布局、分割区域和组织内容。
行内元素的特点行内元素是指在HTML文档中以行内形式出现的元素。
它们不会独占一行，而是与其他内容在同一行内显示。
下面是一些常见的行内元素：•<span>•<a>•<strong>、<em>、<b>、<i>•<img>•<input>行内元素具有以下特点：1.默认宽度由内容决定：行内元素的宽度通常由其内容决定，无法通过CSS样式直接设置宽度。
2.不会独占一行：多个行内元素可以在同一行显示，直到一行放不下时才会自动换到下一行。
3.高度、宽度和边距受限制：对于大多数行内元素来说，设置高度、宽度和边距等属性可能无效或者产生意想不到的效果。
行内元素和块级元素
行内元素和块级元素HTML中的元素可以分为两种类型：行内元素和块级元素。
这两种类型的元素在页面布局和样式方面有着不同的特点，下面就来详细介绍一下它们的特点和使用。
行内元素：行内元素也叫做内联元素，是指在 HTML 页面中以行的形式出现的元素。
行内元素通常用于标记文本内容，并且它们只能包含其他行内元素，不能包含块级元素。
行内元素的特点如下：1、默认宽度和高度是由内容撑开的，所以它们的大小通常是固定的。
2、行内元素不会在前后添加换行符，它们会在一行上排列。
3、行内元素可以在前后添加其他行内元素，但不能在前后添加块级元素。
4、行内元素的默认样式是有下划线的。
常见的行内元素包括：a：超链接span：文本容器img：图片input：表单输入框label：表单标签strong：加粗文本em：斜体文本br：换行符块级元素：块级元素是指在 HTML 页面中以块的形式出现的元素。
块级元素通常用于划分页面结构和布局，可以包含其他块级元素和行内元素。
块级元素的特点如下：1、默认宽度是100%的，高度由内容和padding决定。
2、块级元素在前后会添加换行符，所以它们会单独占一行。
3、块级元素可以包含其他块级元素和行内元素，它们的内容可以分为不同的部分。
4、块级元素的默认样式是没有下划线的。
常见的块级元素包括：div：容器h1-h6：标题p：段落ul：无序列表ol：有序列表table：表格form：表单总结：在 HTML 页面中，行内元素和块级元素有着不同的使用场景和特点。
行内元素适合标记和组织文本内容，块级元素适合划分页面结构和布局。
在实际使用中，我们需要根据具体场景和需求来选择适合的元素类型，以达到更好的页面设计和开发效果。
在实际的网站设计和开发中，行内元素和块级元素的使用非常普遍，下面就来介绍一些常见的案例。
1. 行内元素案例：使用超链接链接页面超链接是HTML中最常用的行内元素之一，它可以链接到其他页面、网站或者网站内的其他位置。
块级元素和行内元素的区别
(3)、table-tr-td:常用于规整数据的显示场合
(4)、form-table-tr-td:常用于表单布局的场合
行级元素
行级标签也称为内联标签、行内标签。使用块级标签为页面“搭建完成组织结构”之后，往每个小区块添加内容时，就需要使用到行级标签.
行级标签:类似文本的显示方式，按“行”逐一显示，常用的行级标签有：
5).表单<form>:表示用于描述需要用户输入的页面内容。
6).分区<div>:表示用于组织小区块的内容。为了方便管理，数目众多的小区块还需要放到一个大区块中进行布局。分区标签<div>常用于页面布局时对区块的划分，它相当于一个大的容器，可以容纳无序列表、有序列表、定义列表等块级标签。同时也可以容纳段落、标题、文字、图片等内容。
标准文档流: 是指在不使用其它的排版和定位相关的特殊CSS规则时,各种元素的排列规则,换语话说CSS规定的网页元素默认的排列方式.
块级元素
从页面布局和显示外观的角度看,一个页面的布局就类似一篇报纸的排版,需要分为多个区块,大的区块再细分为小区块,块内为多行逐一排列的文字、图片、超链接等内容。这些区块一般称为块级元素，而区块内的文字、图片或超链接等一般称为行级元素。页面这种布局结构，其本质上是由各种HTML标签组织完成的。
与行级元素相比，块级元素具有如下特点：
(1)、前后换行显示，块级元素比较“霸道”，默认状态下独占一整行。
(2)、块级元素常用作容器，即可以再“容纳”其它块级元素和行级元素，而行级元素一般用于组织内容，即只能用于“容纳”文字、图片、超链接等其他行级元素。
(3)、块级元素具有一定的高度和宽度，可以通过设置块级元素的width、height属性来控制。
内联元素和块级元素
一、行内元素与块级元素的基本概念1.块元素(block element)：块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。
换句话说，他在元素框之前和之后生成了“分隔”符。
我们最熟悉的HTML元素是p和div.2.内联元素(inline element),也叫行内元素：内联元素在一个文本行内生成元素框，而不会打断这行文本。
内联元素最好的例子就是XHTML中的a元素。
strong和em也属于内联元素。
这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。
尽管“块”和“内联”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。
在HTML和XHTML中，块级元素不能继承自内联元素（即不能嵌套在行内元素中）。
但是CSS中，对于显示角色如何嵌套不存在任何限制。
另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)和内联元素(inline element)都是html规范中的概念。
块元素和内联元素的基本差异是块元素一般都从新行开始。
而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。
比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
也可以把块元素div加上display:inline，让他显示为内联元素。
3.可变元素：可变元素是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。
可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。
二、行内元素与块级元素的三个区别：1.行内元素与块级元素直观上的区别行内元素会在一条直线上排列，都是同一行的，水平方向排列块级元素各占据一行，垂直方向排列。
div与span区别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。
主要用于应用样式表。
两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
具体步骤：1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：测试＜span>紧跟前面的"测试"显示＜/span>＜div>这里会另起一行显示＜/div>2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：测试＜div style="display:inline">紧跟前面的"测试"显示＜/div>＜spanstyle="display:block">这里会另起一行显示＜/span>提示：如果不对DIV元素定义任何CSS属性，其显示效果将行将于P元素。
特别说明因为DIV与SPAN元素的特殊性，所以一般用于应用样式表，比如说用CSS定义为层，而需要分清的是块元素和行内元素的区别，还有两者间的相互转化。
DIV指定渲染 HTML 的容器。
SPAN指定内嵌文本容器。
总的来说，一个div是占一个块的，它的默认display属性是block，表示一个块。
如：<div>aaa</div>bbb显示出来，是两行。
而span，它的display默认属性是inline，可以连在一起的。
如：<span>aaa</span>bbb，显示出来是一行。
div一般用于排版，而span一般用于局部文字的样式。
<div></div>和<span></span>的比较1.相同点：<div></div>标签和<span></span>标签都是用来划分区间但是没有实际语义的标签；两者都是主要用于应用样式表。
行内元素有哪些，特点是什么？块级元素有哪些，特点是什么？空元素有哪些？
⾏内元素有哪些，特点是什么？块级元素有哪些，特点是什么？
空元素有哪些？
块级元素
特点：
1.总是从新的⼀⾏开始
2.⾼度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和⾏内元素
5.块级⽂字元素中不能放⼊其他块级元素
6.块级⼤多为结构性标记
常见块级元素：
<h1> <h2> <h3> <h4> <h5> <h6> <hr> <p>
<ul> ⽆序列表
<ol> 有序列表
<div>
⾏内元素
特点：
1.和其他元素都在⼀⾏
2.⾼度、宽度以及外边距上下都是不可控的
3.宽⾼就是内容的⾼度，依靠⾃⾝字体⼤⼩和图形⽀撑结构的，不可以改变
4.⾏内元素只能⾏内元素，不能包含块级元素
5.⾏内元素的paddding可以设置
6.margin只能够设置⽔平⽅向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom⽆效
7.块级⼤多为结构性标记
常见⾏内标签:
<span>...</span>
<a>...</a> 超链接
<strong>...</strong> 重要⽂本
<em>...</em> 强调⽂本
空元素：
<br> <hr> <img> <input> <link> <meta>。
块标签，行内标签，行内块标签分类
块标签，⾏内标签，⾏内块标签分类
块级标签：
会独占⼀⾏,默认情况下,其宽度⾃动填满其⽗元素宽度
块级元素可以设置width,height属性.
块级元素即使设置了宽度,仍然是独占⼀⾏.
块级元素可以设置margin和padding属性.
块级元素对应于display:block.
⾏内标签：
不会独占⼀⾏,相邻的⾏内元素会排列在同⼀⾏⾥,直到⼀⾏排不下,才会换⾏
⾏内元素设置width,height属性⽆效，它的长度⾼度主要根据内容决定.
⾏内元素的margin和padding属性,⽔平⽅向的padding-left,padding-right,margin-left,margin- right都产⽣边距效果,但竖直⽅向的padding-top,padding-bottom,margin-top,margin-bottom却不会产⽣边距效果.
⾏内块元素：
不⾃动换⾏
能够识别宽⾼
默认排列⽅式为从左到右
常见的块级标签有：<h1-h6>、<ul>< li> 、<dl>< dd>< dt>、<p>、<div>、<table>< tr>< td>、<hr>、<fieldset> <legend>
常见的⾏级标签：<a>、<span> 、<u>、<em>、<i>
常见的⾏内块标签：<img>、<input>、<textarea>、<select> 、<option>。
简述内联元素与块元素的区别
简述内联元素与块元素的区别
HTML元素可以分为内联元素和块元素两种。
从表现上来看，内联元素于排版上有较小的影响，而块元素则会影响排版，因此要想控制某一部分的排版，就需要使用块元素。
内联元素是行内元素，不会独占一行，它们可以把多个元素放置在一行内，并一行显示，常见的内联元素有a,label,span,em等等，另外，它们的width和height是不可设置的，元素的大小取决于元素的内容。
块元素则是块状元素，会独占一行，不会插入在其他元素之中，它们可以设置宽度和高度，常见的块元素有div、p、h1-h6，form等等，块状元素会自动换行，并且换行后不会在影响原有元素的排版。
从CSS表现上来看，内联元素可以设置padding、margin等属性，但只会影响它们内部的元素，而块状元素则可以设置与它们相邻的元素的边距，即它们的margin属性可以影响到相邻的元素。
从HTML结构上来看，内联元素可以嵌套使用，而块状元素则不能嵌套使用。
以上就是内联元素与块元素最根本的差异，因为这两者在表现上和结构上都有所不同，所以应用到开发中时，我们需要根据实际情况选择相应的元素。
- 1 -。
元素类型的转换
元素类型的转换
⽬录：
1.
2.
⼀. 元素类型
元素类型有块元素、内联元素。
内联元素也称为⾏内元素。
块元素有 div、h1-h6、p、ul、ol、li 等。
内联元素有 span、strong、em、b、a、u 等。
块元素独占⼀⾏、能设置宽⾼。
内联元素不独占⼀⾏，不能设置宽⾼。
⼆. 元素类型的转换
先举个例⼦，默认情况下 <span> 是内联元素，不能给它设置宽⾼，也不能让它独占⼀⾏显⽰，如果想要让他显⽰为块元素，那么，我们可以在 CSS 中给 <span> 的 display 属性设置为 block，这样就能让 <span> 显⽰为块元素了。
下⾯是 display 常⽤属性值的作⽤：
下⾯举⼏个元素类型转换的例⼦。
1. 块元素转换为内联元素
使⽤ inline 属性值实现将块元素 div 转换为内联元素。
转换元素类型为内联元素之后，div不独占⼀⾏，不可以设置宽⾼。
转换为内联元素前：
转换为内联元素后：
2. 内联元素转换为块元素
使⽤ block 属性值实现将内联元素 span 转换为块元素。
转换元素类型为块元素之后，span 独占⼀⾏，可以设置宽⾼。
转换为块元素前：
转换为块元素后：
3. 内联元素转换为⾏内-块级元素
使⽤ inline-block 属性值实现将内联元素 span 转换为⾏内-块级元素。
转换元素类型为⾏内-块级元素之后，span 不独占⼀⾏，可以设置宽⾼。
转换为⾏内-块级元素之前：
转换为⾏内-块级元素之后：。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
行内元素和块级元素
一、行内元素和块元素概括
块级元素：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都不会产生边距效果。
（水平方向有效，竖直方向无效）。