CSS3 display: block

区块

在HTML的标签中，有一些元素是块元素，而有一些元素是行元素，区分这两种元素最简单的办法是，加上背景颜色。

<p style="background: orange">p 标签是块元素</p>

<span style="background: orange">span 标签是行元素</span>

显示效果

p 标签是块元素

span 标签是行元素

区块的性质

区块的主要特点是可以设置宽高，通常作为一个容器存在，区块的内部可以在嵌套区块

<div style="background: red; width: 300px; height: 300px;">
 <div style="background: green; width: 200px; height: 200px;">
  <div style="background: blue; width: 100px; height: 100px;"></div>
 </div>
</div>

显示效果

block 属性

该属性可以把一个行元素转换成块元素。

<!-- 默认情况下，由于 span 是行元素，所以设置宽度无效 -->
<span style="width: 200px; background: orange">行元素不能设置宽高</span>

<!-- 使用 block 属性 把 span 设置成区元素 -->
<span style="width: 200px; background: orang; display: block">我的宽度是200px</span>

显示效果

行元素不能设置宽高