关于行内元素和块级元素,可替换元素辨析

744 阅读2分钟

首先明确行内元素与块级元素区别:
1.行内元素只能包裹数据和行内元素,块级元素可以包裹块级元素和行内元素。
2.行内元素不会以新行开始,块级元素会以新行开始。
3.行内元素不能设置宽高,块级元素可以设置宽高。

查询MDN文档,主要有这些元素:
行内元素:a br img span button input select textarea
块级元素:div dl dd header article selection footer form ol ul p table

为什么br是行内元素?因为:br没有独占一个行,它和它的上一个兄弟节点占一行,且br不可设置宽高。控制台查看display属性会发现,值为inline。为什么hr是块级块级元素? 因为:hr独占一行,hr可设置宽高。display值为block。

我心中又一直有一个疑问,为什么img,button,input,select,textarea作为行内元素却可以设置宽高呢? 查资料说因为这些元素是可替换元素,然后查MDN文档,发现MDN文档在这些元素中只提到img和type为"image"的input元素是替换元素,查看img和input的display值分别为inline和inline-block,再一查别的元素的display都是inline-block。
所以结论是img,button,input,select,textarea作为行内元素却可以设置宽高一部分原因是因为img是可替换元素,另一部分原因是因为input,button,select,textarea的display属性值为inline-block,所以可以设置宽高。

可替换元素的介绍可以自己在MDN查,感觉有点抽象,简单来说是可替换元素的展现效果不是由css控制的,css仅能控制元素的大小和包含的内容对象在该元素的盒区域内的位置或定位方式。
Object-fit可替换元素中内容如何适应元素的宽高
fill:拉伸内容以完全填充元素。
contain:填充元素时保持宽高比。
cover:保持宽高比例填充,填充不下进行裁剪。
Object-postion设置内容在元素中的位置
链接在这里。 developer.mozilla.org/zh-CN/docs/…