咱们深入研究一下不同 CSS 显示类型的特点，再探讨一下 html 元素嵌套的规定。
咱们曾经熟知：html 元素分为块元素和行内元素两种类型。在浏览器中，每种类型都有默认的显示特点。通过给元素设置 display 款式属性，来扭转他们的显示方式。
不同的显示类型，可定义的款式也有很多区别，咱们来做一些试验。
这里我筹备好了一个 html，制作了两个容器，外面别离装了两个行内元素 span 和两个块元素 div。定义了一些根本的款式。成果是这样的。
HTML
<body>
<div class="box1">
<span>span1</span>
<span>span2</span>
</div>
<div class="box2">
<div>div1</div>
<div>div2</div>
</div>
</body>CSS
* {
margin: 0;
padding: 0;
}
.box1, .box2 {
width: 300px;
height: 300px;
background-color: brown;
margin: 20px;
padding: 0;
}
.box1 span {
display: inline;
background-color: yellow;
}
.box2 div {
display: block;
background-color: yellow;
}咱们看，box1 里的两个 span 元素，display 款式属性值为 inline，这也是 span 元素的默认显示值。给两个 span 元素增加款式 width: 100px，height: 100px，border: 1px solid blue，padding: 10px，margin: 100px 10px;
CSS
.box1 span {
display: inline;
background-color: yellow;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 10px;
margin: 100px 10px;
}在浏览器里看一下成果，两个 span 元素的大小并没有发生变化，内填充四个方向均无效，蓝色边框也填上去了。外边距左右方向失效了，高低方向没有失效。
由此能够得出结论：第一、行内元素不能设置宽高款式。第二、行内元素能够设置边框线款式。第三、行内元素能够设置内填充款式。第四、行内元素能够设置左右方向的外边距款式。
回到 CSS 代码，给 box2 里的两个 div 增加款式：width: 100px，height: 100px，border: 1px solid blue，padding: 10px，margin: 10px。
CSS
.box2 div {
display: block;
background-color: yellow;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 10px;
margin: 10px;
}看一下成果：两个 div 的宽高、边框、内填充以及外边距款式全副失效了。
这里你可能会喊：第一个 div 容器上边距怎么是 0，为什么不是 10px？下边距怎么才 10px，为什么不是 20px？那你肯定是遗记了 margin 塌陷的问题。当初想起来了吗？
由此也能够得出结论：给块元素设置宽高、边框线、内填充、外边距款式，都是无效的。
块元素尽管能够设置盒模型的全副款式，然而每个块元素会独占一行，是否像行内元素一样，在一行上排列呢？
display: inline-block 款式能够满足咱们的欲望。inline-block，顾名思义，具备 inline 和 block 两种显示类型的特点。比方，既能够给元素设置宽高，又能够让它们在一行上显示。咱们来验证一下。
复制一个盒子，批改类名为 box3。给 box3 也申明根本款式。复制 box2 的款式，批改选择器为 .box3 div，批改 display 属性值为 inline-block。
看一下成果，两个 div 在一行上显示，同时 margin 塌陷的问题也不存在了！
这里须要申明一下，设置一个元素的 display 属性只能扭转该元素的显示方式，而不能真正的扭转 html 元素的类型。比方，一个增加 display: inline 的块级元素外面，还是不容许在它的外部有其余块级元素的。
这就引申出一个话题：在搭建网页构造时，尽管有很多 html 元素能够应用，但还是要遵循一些嵌套规定的。咱们列举一下。
规定一，块元素能够蕴含行内元素或某些块元素，但行内元素却不能蕴含块元素，它只能蕴含其它的行内元素。比方这三组代码，第一组和第二组合规，第三组不合规。
HTML
<div><h1></h1><p></p></div>
<a href=”#”><span></span></a>
<span><div></div></span>规定二，块元素不能放在 p 元素外面。比方这两组代码都是不合规的。
HTML
<p><ol><li></li></ol></p>
<p><div></div></p>规定三，有几个非凡的块级元素只能蕴含行内元素，不能再蕴含块元素，这几个非凡的元素是：h1、h2、h3、h4、h5、h6、p、dt。比方这两组代码都是不合规的。
HTML
<h1><p></p></h1>
<dt><div></div></dt>规定四，块级元素个别与块级元素并列、行内元素个别与行内元素并列。比方这三组代码，第一组和第二组合规，第三组不合规。
HTML
<div><h2></h2><p></p></div>
<div><a href=”#”></a><span></span></div>
<div><h2></h2><span></span></div>本篇文章配套教程链接：https://www.bilibili.com/vide…