前言：
眼前你们对“htmldisplayinline”大约比较关心，小伙伴们都需要学习一些“htmldisplayinline”的相关资讯。那么小编同时在网摘上收集了一些对于“htmldisplayinline””的相关资讯，希望咱们能喜欢，你们一起来了解一下吧！我们深入研究一下不同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>
本篇文章配套教程链接：
标签： #htmldisplayinline
