--- title: 替换元素 date: 2018-7-12 11:16:32 tags: - 前端 - css categories: - 前端杂烩 --- `替换元素`的含义是 **修改元素的某些属性值, 呈现的内容或样式就会被改变** 的元素 ` ` 以及表单元素` `都是替换元素 替换元素具备以下特性 1. **内容**的外观不受页面上CSS的影响 比如`input[type=checkbox]`无法改变复选框的背景色, 内边距等 2. 有自己的默认尺寸 ( video iframe canvas都是默认300*150 ) 3. 在很多CSS上有自己的一套表现规则 ### 尺寸计算规则 + 如果有CSS的尺寸指定, 则使用CSS指定的尺寸 ```css img { width:100px;height:120px; } ``` 如果只指定了width, 那么高度就会按照固有尺寸计算得出 比如原图尺寸50*80, 那么如果指定width为100px, 高度就会表现为160px 只指定height同理 + 如果没有CSS尺寸, 那么就用HTML尺寸 就是标签的属性 ```html ``` + 如果没有HTML尺寸, 就用固有尺寸 对于图片来说, 就是这个图片的原始尺寸大小