<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML块级元素、行内元素、行内块级元素</title>
</head>
<body>
<!-- 块级元素的特点
1、块级元素独占一行，宽高可控
2、没有设置宽度式，默认铺满整行
3、可以包含块级元素和行级元素
-->
<!-- 行内元素的特点
1、与其相邻元素共享一行，直到行占满为止
2、宽度和高度是不可控的
3、只包含行内元素
-->
<!--块级标签举例-->
<div>
div
</div>
<p>
p
</p>
<!--块级元素宽高属性可设置-->
<p style="width: 200px;height: 100px;background-color: antiquewhite;">p</p>
<!--行内元素举例-->
<strong>strong</strong>
<span>span</span>
<span>span</span>
<span>span</span>
<!--行内元素宽高属性失效-->
<span style="width: 200px;height: 100px;background-color: antiquewhite;">span</span>
<!--行内元素转换为块级元素-->
<span style="width: 200px;height: 100px;background-color: antiquewhite;display:block;">span</span>
</body>
</html>
常见块级元素标签
div、h1~h6、p、hr、form、ul、dl、ol、li其中div标签是最典型的块元素
常见行内元素
a、strong、b、em、i、del、s、ins、u、span其中span标签最典型的行内元素
常见行内块级元素
img、input、td具有行内元素特点，但是宽高、边距可调整
元素类型转换
块转行内：display:inline 行内转块：display:block 块、行内元素转换为行内块： display: inline-block
