[toc] ## 什么是替换元素 替换元素是CSS世界中另外一种分类方式。 根据**外在盒子**是内联还是块级我们可以把元素分为内联元素和块级元素。 而根据是否具有可替换内容，我们可以把元素分为替换元素和非替换元素。 元素本身的内容可以被替换的元素叫做替换元素 常见的替换元素有 ``` input,textarea,img,video,object ``` ## 替换元素的样式表现 有些样式是无法改变的(可以考虑css3的apperance接口，也可以取消apperance后自定义样式) 但文本框这种和一般元素无二（除却不具备流特性）  ## 替换元素与box-sizing 有一种说法`box-sizing`发明的初衷是来解决：替换元素宽度自适应问题的 ``` input,textarea,img,video,object{ box-sizing:border-box; } ``` 因为替换元素的特性里有一项就是**尺寸由内部元素决定**（实际上，内部元素是撑不开的，只能通过css手动更改设置），且无论其`display`属性值是inline还是block。  （**但display为block仍然会独占一行，富余空间由margin填充**） 通常来说，display为block的元素就会具有流动性，但替换元素不是，替换元素的宽度始终由内部决定（这个说法不准确，实际只由css属性决定）。 ## 替换元素的3种尺寸设置 权重：css尺寸>HTML尺寸>固有尺寸 ### 固有尺寸 想图片、视频这种作为一个独立的文件存在时，都有自己的宽度和高度。 并且假若我们更改时**只**宽高中的一项，另外一项会自动随之更改，并且按照原本的固有比例进行 ### HTML尺寸 替换元素都具有特有的html属性来更改本身的尺寸大小 ``` <img width=300 height=100> <input type=file size=30> <textarea cols=20 rows-5></textarea> ``` ### CSS尺寸 通过设置css更改替换元素尺寸