CSS - 联级与块级元素 ¶

HTML元素主要分为联级元素和块级元素两大类型

这个概念希望你紧记于心

联级元素 ¶

以下代码中,链接1设置了300像素宽度,但实际上并没有生效,因为a标签是联级元素,无法享有宽度,实际显示宽度是根据内容长短而定的

<body>
<a href="#" style="width:300px; height:50px; background:red;">链接1</a>
<a href="#">链接2</a>
</body>

明显能看出红色背景只有很短,连50像素都不到;但是如果你给链接1添加display:block;这个属性则可以让它拥有300px的宽度和50px的高度,其实display属性有将一个元素设置为联级(inline)或者块级(block)的作用。

属于联级元素的常见标签有a,img,input,select,button,span,label这些

属于块级元素的常见标签则是p,ul,li,div这些,块级元素是独占一行的,并且享有宽度,比如div,我就不写代码做举例了,因为之前做过好多例子

为了让联级元素享有宽度,我上面的例子将它的display样式值设置为block,可是它此时变成了块级元素,就独占一行了

然而你想它拥有宽度只是为了让它有个宽一点的背景色区域又不要将旁边的东西挤到另一行,how to办?

此时要用联级+块级的特性了,固然标签有联级和块级的性质,但也可以让标签同时拥有联级和块级,办法就是将display的样式值设为 inline-block

这样既保持联级元素的特征:不会导致旁边的兄弟标签换行

又能拥有块级元素的宽度属性

一大片HTML代码给到浏览器进行解析时,浏览器渲染完第一个标签,再看看里面有没有标签,有就在刚渲染的容器里面再渲染东西咯

但是当一个元素存在同级别的兄弟元素时,要么就是向下继续追加渲染,比如之前做了几次例子都说明两个div并存时,一般第2个div会跟在第1个div的下面

而两个a标签并存时,则第2个a标签会跟在第1个a标签的右边

它们只有"跟在下面"和"跟在右边"的选择,除非用了定位属性,否则不会说在前一个标签的上面或左边的,这是一个文档流的解析顺序

接下来要纠结的是哪种标签会跟在下面哪种标签会跟在右边

其实你多少已经掌握了几个标签的排列方式了

p,ul,li,div这些标签出现时会自己独立开一个新行再开始渲染的,这些就是块级元素,每个就是一块,一块占一行,两行同时存在时,各占一行,不会共用一行

a,img,input,textarea,select,button,span,label这些标签是联级元素,它们出现时,需要先判断一下它们前面的是不是联级元素,如果是就会在前者的右边开始跟着渲染;如果前者是块级元素,则自己另开一行渲染,因为块级元素很霸道的,人家就是要占领一行圈地盘~

你已经初步了解什么是块级元素和联级元素以及它们的特征了,HTML标签中基本就是这两大类

至于具体哪些是联级元素,哪些是块级元素,你可以先记住上面所提到的标签名称就可以,其它标签元素你以后慢慢使用中自己积累或者查网上资料/手册都可以,反正现在记了不常用的也只是白记