HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。 当然，他们之间也是可以转换的。
display:inline;转换为行内元素
display:block;转换为块状元素
display:inline-block;转换为行内块状元素
那各元素有些什么特征呢？
行内元素特征：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
元素：a、span
块状元素特征：
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
元素：div、p、nav、aside、header、footer、section、article、ul-li、address
行内块状元素特征：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
元素：input、img
Tips: 当子元素没有设置宽高时，如果是块级元素，它会继承父元素的宽度，高度会随内容撑开
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="box">333</div>
</div>
</body>
可以看到.box的宽度继承父元素的宽度，如果不想继承，可以给子元素设置display:inline-block
