前言

上一节我们知道了什么是替换元素，本节就来介绍一下的替换元素的尺寸计算规则，方便以后我们对页面布局把控。

想要知道替换元素的尺寸计算规则，我们首先来了解一下替换元素的尺寸结构，以及这些尺寸结构的关系。

替换元素的尺寸结构

替换元素的尺寸结构分为三种：依次是固有尺寸、HTML 尺寸以及CSS 尺寸。

首先，来看看固有尺寸：

固有尺寸： 固有尺寸就是替换内容原本的尺寸，不加修饰的默认尺寸。

例如：空白页上的输入框、下拉框。这些表单元素默认的 font-size/padding/margin 等属性就是替换元素的固定大小固有尺寸，不会受外界 CSS 的影响。

image.png

HTML 尺寸： HTML 尺寸指的是元素标签“骨架”的尺寸。

就像鸡蛋里面的那一层膜，里面是“固有尺寸”这个蛋黄蛋白，外面是“CSS 尺寸”这个蛋壳。

HTML 尺寸只能通过原生属性改变；

例如：<img>的 width 和 height 属性、<input>的 size 属性、<textarea>的 cols 和 rows 属性等。

    <img width="300" height="100"> 
    <input type="file" size="30"> 
    <textarea cols="20" rows="5></textarea>

CSS 尺寸： CSS 尺寸指可以通过 CSS 的 width 和 height 或者 max-width/min-width 和 max-height/min-height 设置的尺寸，对应盒尺寸中的 content box；

替换元素的尺寸结构关系

image.png

替换元素的尺寸计算规则

如果有 CSS 尺寸，则最终尺寸由 CSS 属性决定最终的宽高；

如果没有 CSS 尺寸，则使用 HTML 尺寸作为最终的宽高；

如果没有 CSS 尺寸和 HTML 尺寸，则使用固有尺寸作为最终的宽高；

如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度（或高度），则元素按照固有的宽高比例显示；

结语

本节到此结束，欢迎在评论区交流！