From e2841c93b7c23486d747467fc3684e1fb015f363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?=
 <init_pro@aliyun.com>
Date: Mon, 16 Jul 2018 09:52:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E5=85=83=E7=B4=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/_posts/前端杂烩/替换元素.md | 37 ++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 source/_posts/前端杂烩/替换元素.md

diff --git a/source/_posts/前端杂烩/替换元素.md b/source/_posts/前端杂烩/替换元素.md
new file mode 100644
index 0000000..f9951c1
--- /dev/null
+++ b/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尺寸, 就用固有尺寸
+对于图片来说, 就是这个图片的原始尺寸大小
+
+<!-- 未完成.... -->
\ No newline at end of file