在笔试题中看到置换元素相关的题目,以前没听说过,就抱着学习的心态查了一番,发现网上内容五花八门,并不适合小白,所以在自认为搞懂的基础上,自己也来写一写。
有人可能会问,不是说说置换元素吗?怎么先说起来CSS视觉格式化模型了。因为置换元素的定义是 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。 所以说,先聊聊CSS视觉格式化模型,有助于我们对于置换元素的理解。
CSS视觉格式化模型
在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子。这些盒子的布局由如下因素决定:
- 盒子的尺寸和类型;
- 定位策略(正常文档流,浮动或者绝对定位);
- 和文档树中其他元素的关系;
- 额外的信息(比如视口的大小,图片的原始尺寸等);
此处内容为参考了一篇文章,该部分详细内容请参考css视觉格式化模型。文章说的很详细,但是像我这种,看到长篇大论就比较头疼。所以用一句话来概括下就是文档元素显示到页面的显示规则。比如说你定义的盒模型的尺寸、你布局时采用的定位策略等等。
置换元素
置换元素定义上边已经说过,不在重复。要弄懂置换元素,首先要明白行内元素和块元素。如要详细了解,请自行网上学习。此处我们只需要明白一个点就可以:块元素可以设置宽高,行内元素不能设置宽高。此时,你可能会有疑问,img标签是行内元素,为什么可以设置宽高呢? 此处正是本文的重点,因为img是置换元素。说到这里,大家可能有点眉目了,一句话概括:置换元素做为特殊的内联元素,特殊之处就在于可以设置宽度和高度。接下来我们就对宽度和高度特点进行总结。
- 若宽度的值为auto且元素有固有宽度,则width的使用值为该固有宽度。(拥有默认宽高的input当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度。)
- 若宽度的值为auto且高度有非auto的计算值,并且元素有固有宽高比,则 width的使用值为高度使用值 * 固有宽高比。(img当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置。)
- 当width的值为auto时,则宽度的使用值为 300px。(比如iframe, canvas。)
高度特点类似。
最后提一句,官方文档并没有给出非置换元素的定义,故,不是置换元素的都是非置换元素。