块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（在下面的示例中，行内块状框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，而它会失去一个框的形状。）
注意：默认状态下display属性值，块级元素display: block ，行内元素display: inline
这些东西在短时间听起来可能让你很混乱，现在让我们来看一些简单的小例子。
首先，HTML代码：
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>
现在我们加一些CSS:
p {
padding : 1em;
border : 1px solid black;
}
span {
padding : 0.5em;
border : 1px solid green;
/* That makes the box visible, regardless of its type */
background-color: yellow;
}
.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; }
上面的代码给出了这个结果，说明了显示类型的不同效果：
例：制作三角形盒子模型
HTML代码如下：
<!--制作三角形-->
<div class="triangle"></div>
CSS代码：
.triangle{
width: 0;
height: 0;
/*只定义盒子的下方和左右两边的border且让它们重合就生成了三角形*/
border-bottom: 30px solid red;
/*transparent 完全透明*/
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
效果如图，当然你还可以更改color及三条边的长度来做出等腰三角形等：
end
2018-06-01