块级元素
块级元素的特点：
- 独占一行
- 高度、宽度、内外边距可以独立控制
- 宽度在不指定的情况下默认就是父容器的宽度（100%）
- 块元素里面可以放其它块元素和行内元素
常见块级元素有：
<div>
<p>
<h1>~<h6>
<ol>
<ul>
<dl>
<table>
<form>
需要注意的地方：
- 内容行块元素不能放div，例如p标签、h1~h6标签这些元素都是用来放文字的，里面不能再放其它块元素。
行内元素
行内元素的特点：
- 和其他行内元素并列显示在一行上；
- 元素的宽度、高度不可设置，只能设置行高
line-height - 默认宽度就是内容自己的宽度
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
- 行内元素只能容纳文本或者其他行内元素
- 行内元素可设置水平方向的外边距，但垂直方向不可以设置，内边距
padding水平和垂直可以设置
常见行内元素元素：
<a>
<span>
<br>
<i>
<em>
<strong>
<label>
<code>
行内块级元素
行内块级元素是介于块级元素和行内元素之间的一种元素，同时具有块级元素和行内元素的特点
它的特点是：
- 和其他元素都在一行上；
- 可设置元素的高度、宽度、外边距、内边距；
- 元素之间有缝隙
行内块级元素有：
<img>
<input>
<button>
<textarea>
<td>>
元素显式模式转换
以上三种显式类型的元素其实可以通过属性display互相转换，display的可选值有：block（块）、inline（行内）、inline-block（行内块级）
display:inline; /*行内元素*/
display:inline-block; /*行内块元素*/
display:block; /* 块级元素 */
看个例子：
<span>右边是图片</span>
<img src="images/google.jpg" alt="google icon">
span 行内元素，img 是行内块级元素，他们都挤在一行，为了美观，可以让图片单独一行，你只要给 img 标签的 display 属性设置为 block 就可以。
img {
margin: 0 auto;
display: block;
width: 30px;
}
图片就另一起了一行。
同样的道理，块级元素也可以通过设置属性display:inline 显式在同一行内。
有问题可以扫描二维码和我交流
关注公众号「Python之禅」，回复「1024」免费获取Python资源
