[CSS]为什么有些行内元素可以设置宽高

灰太狼 2022-12-08 01:58 140阅读 0赞

**在HTML的角度来讲，标签分为：**  
　　　　文本级标签：p （p是块级元素）, span , a , b , i , u , em  
　　　　容器级标签：div , h标题系列 , li , dt ,dd  
　　　　p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。  
**从CSS的角度讲，CSS的分类和上面的很像，就p不一样：**  
　　　　行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。  
　　　　块级元素：所有的容器级标签，都是块级元素，以及p标签。

**一般来说，行内元素是不可以设置宽高的，如果想给行内元素设置宽高，则需要将其display设置为block/inline-block/flex/inline-flex**（使用position:absolute/fixed或float：left/right，在computed中查看display会发现属性值也为block，所以这两个方法用的原理也是这个）

或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。