关于display:block的一点思考

关于这个属性的思考基于一次写手风琴代码的经历，说到这个display:block必须要追溯到什么是块级元素，行内元素，以及各自的特点。

块级元素：每个元素默认独占一行，一行内有一个块级元素后如果不通过添加浮动，是只能有一个块级元素的。

block（块）元素的特点：

（1）只能在新的一行上开始。

（2）高度，行高，以及margin， padding都可控制。

（3）宽度缺省的时候是100%，除非设置宽度。

（5）可以容纳block元素和inline元素。

块级元素有<ul> , <table> , <hn> , <form> , <div> 等。

行内元素：依附于块级元素存在，在一行内水平排列，可以不在新的一行上开始。

inline（行内）元素的特点：

（1）只能嵌套行内元素。

（2）不可以设置高度，要设置高度只能由line-height；

不可以设置宽度，宽度由文字或者图片宽度决定。

（3）设置margin，padding只有左右有效，上下无效。

（4）只能容纳行内元素，不能嵌套块级元素。

行内元素有<p>，<input> , <iframe> , <span> , <img> , <em> , <strong>等。

基于这两个属性设置的特点，我们可以把块级元素加上display:inline使其具有行内元素的特点；也可以把行内元素加上display:block使其具有块级元素的特点。两者互补，相得益彰!例如下面手风琴这个例子，标题为链接的css

此时，a标签表现为行内元素，所以出现下面宽度为内容宽度的情况，并不能构成一种标题栏的效果：

把css中的注释去掉，则呈现下面这种正常情况：