替换元素

source/_posts/前端杂烩/替换元素.md

@@ -0,0 +1,37 @@
+---
+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尺寸, 就用固有尺寸
+对于图片来说, 就是这个图片的原始尺寸大小
+
+<!-- 未完成.... -->