---
title: 替换元素
date: 2018-7-12 11:16:32
tags: 
  - 前端
  - css
categories: 
  - 前端杂烩
---

`替换元素`的含义是 **修改元素的某些属性值, 呈现的内容或样式就会被改变** 的元素
`<img> <object> <video> <iframe>` 以及表单元素`<textarea> <input>`都是替换元素
<!-- more -->

替换元素具备以下特性
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
<img src="test.jpg" width="100" height="120" />
```
+ 如果没有HTML尺寸, 就用固有尺寸
对于图片来说, 就是这个图片的原始尺寸大小

<!-- 未完成.... -->