持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
今天我们来了解一下元素显示模式。
元素显示模式
块级元素
块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等。
但是p标签中不要嵌套div、p、h等块级元素；a标签内部可以嵌套任意元素，但是a标签不能嵌套a标签；
块元素的特点：
1.独占一行；
2.宽度默认是父元素的宽度，高度默认由内容撑开；
3.可以设置宽高。例如div、p、h系列、ul、li、dl、dt、dd等。
display: inline-block可以将块元素转换成行内块元素:
div {
width: 300px;
height: 300px;
background-color: pink;
display: inline-block;
}
行内元素
行内元素的特点：
1.一行可以显示多个；
2.宽度和高度默认由内容撑开；
3.不可以设置宽高 例如a、span、b、u、i、s、strong、ins、em等。
display: block将行内元素转换成块元素：
span {
width: 300px;
height: 300px;
background-color: red;
display: block;
}
行内块元素
行内块元素的特点：
1.一行可以显示多个
2.可以设置宽高 例如.input、textarea、button、select
特殊情况: img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline；
display: inline可以将元素转换成行内元素，但是很少用到。
input {
width: 30px;
height: 30px;
background-color: aliceblue;
}
html代码正文
<body>
<div>1111</div>
<div>2222</div>
<span>sp</span>
<span>sp</span>
<input type="text">
</body>
浏览器效果演示:
