0
点赞
收藏
分享

微信扫一扫

替换元素的计算规则?


替换元素的尺寸从内而外分为3类:固有尺寸、HTML尺寸和CSS尺寸。

(1)固有尺寸指的是替换内容原本的尺寸。例如,图片、视频作为一个独立文件存在的时候,都是有着自己的宽度和高度的。

(2)HTML尺寸只能通过HTML原生属性改变,这些HTML原生属性包括<img>的width和height属性、<input>的s

ize属性、<textarea>的cols和rows属性等。

(3)CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的

尺寸,对应盒尺寸中的content box。

这3层结构的计算规则具体如下

(1)如果没有CSS尺寸和HTML尺寸,则使用固有尺寸作为最终的宽高。

(2)如果没有CSS尺寸,则使用HTML尺寸作为最终的宽高。

(3)如果有CSS尺寸,则最终尺寸由CSS属性决定。

(4)如果“固有尺寸”含有固有的宽高比例,同时仅设置了宽度或仅设置了高度,则元素依然按照固有的宽高比例显示。

(5)如果上面的条件都不符合,则最终宽度表现为300像素,高度为150像素。

(6)内联替换元素和块级替换元素使用上面同一套尺寸计算规则。


举报

相关推荐

0 条评论