【基础知识】html布局之一-块元素 行内元素 行内块元素

HTML的元素一般分为块元素和行内元素（又称内联元素）两种类型，还有一种特殊的行内块元素。

块元素：

常见的有：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>

特点：

1、独占一行。

2、高度、宽度、内外边距都可以控制。

3、宽度默认是容器（父级宽度）的100%。

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

注意：

文字类的元素(<p><h1>-<h6>)内不能使用块级元素，例如：<p>主要放文字，里边不能放块元素，特别是<div>。

行内元素：

常见的有：<span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>

特点：

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

2、高宽直接设置无效。

3、默认宽度是它本身的宽度。

4、行内元素只能容纳文本或其它行内元素。

注意：

1、链接里面不能再放链接。

2、<a>里可以放块元素，但是给<a>转换为块级模式更安全。

行内块元素：

在行内元素中有几个特殊：<input/>、<img/>、<td>，同时具有块元素和行内元素特点。

特点：

1、和相邻元素在一行上，一行显示多个（行内元素特点）。

2、默认宽度是它本身宽度（行内元素特点）。

3、高度、宽度、内外边距可以控制（块元素特点）。

相互转换：

转换为块元素：display:block;

转换为行内元素：display:inline;

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

总结：

 

参考：https://www.bilibili.com/video/BV14J4114768?p=107