HTML区块元素（讲解及示例）

什么是元素显示模式

块元素

常见块元素

块级元素的特点

注意事项

行内元素

常见行内元素

行内元素的特点

注意事项

行内块元素

常见行内块元素

行内块元素的特点

元素显示模式总结

行内显示模式转化

转换为块级元素：display: block

转换为行内元素：display: inline

转换为行内块元素：display:inline-block

小结

什么是元素显示模式

元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。HTML元素一般分为块元素和行内元素两种类型

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

块元素

常见块元素

常见块元素有<h1>~<h6>，<p>，<div>，<ul>，<ol>，等，其中<div>标签是最典型的块元素

块级元素的特点

1.比较霸道，自己独占一行

2.高度，宽度，外边距以及内边距都可以控制

3.宽度默认是容器(父级宽度)的100%

4.是一个容器及盒子，里面可以放行内或者块级元素

注意事项

文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能存放块级元素，特别是不能放<div>
同理,<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

<div>标签自己跳了出来，并且多生成了一个<p>标签

行内元素

常见行内元素

常见行内元素有<a>，<strong>，<b>，<em>，<i>，<del>，<s>，<ins>，<u>，<span>等，其中<span>标签是最经典的行内元素，有的地方也将行内元素称为内联元素

行内元素的特点

1.相邻行内元素在一行元素上，一行可以显示多个

2.高和宽的直接设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或其他行内元素

注意事项

链接里面不能再放链接
特殊情况下，链接里面<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

常见行内块元素

在行内元素中有几个特殊的标签---<img/>，<input/>，<td>，它们同时具有块元素和行内块元素的特点，有些资料称它们为行内块元素。

行内块元素的特点

1.和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素的特点)

2.默认宽度是它本身内容的宽度(行内元素的特点)

3.高度，行高，内外边距都可以控制(块级元素的特点)

元素显示模式总结

行内显示模式转化

特殊情况下，我们需要元素模式转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。

转换为块级元素：display: block

可以看到不起效果，这是因为行内元素不可以直接设宽度和高度

转换为行内元素：display: inline

转换为行内块元素：display:inline-block

小结

博主创作不易，