学前端设计一定要明白自己所要设计的页面构成，哪一部分放啥，层级是啥样的，所以思来想去聊聊几个概念
HTML行内元素、块状元素、行内块状元素的区别
首先，三者可以互相转化
display: block/ inline/ inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试案例</title>
<style type="text/css">
span {
display: block;
width: 120px;
height: 30px;
background: red;
}
div {
display: inline;
width: 120px;
height: 200px;
background: green;
}
i {
display: inline-block;
width: 120px;
height: 30px;
background: lightblue;
}
</style>
</head>
<body>
<span>行内转块状</span>
<div>块状转行内 </div>
<i>行内转行内块状</i>
</body>
</html>
行内元素最常使用的是span
行内元素特征：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
块状元素，代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现
块状元素特征（主要用来布局网页，定义页面结构）：
(1)能够识别宽高（默认宽度100%，即块状元素会挤满一行显示）
(2)margin和padding的上下左右均对其有效
(3)可以自动换行（块状元素后面不能再跟其它行内元素或块状元素）
(4)多个块状元素标签写在一起，默认排列方式为从上至下
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征（CSS声明）：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
常见的块级元素
image
常见的行级元素列表
image
最后提一嘴，可变元素(一开始看到这个我也很懵Ｂ，这是啥，其实也就是我们常见那几个)
可变元素为根据上下文语境决定该元素为块元素或者内联元素：
map、param、br等，以及下图中
image
网友评论