替换元素尺寸的计算规则
最近在阅读张鑫旭老师的书《CSS世界》这本书很适合对于css有一定了解，却又想深入了解的同学，张老师把css世界描绘成了一个魔法世界，对于像我这样一个还没有真正步入职场的年轻码农来讲，太适合不过了。
阅读本书总会有豁然开朗的感觉，总会发出“啊~原来是这个样子”的感叹。对于一些css知识，开始知其所以然，所以决定记录下来。
这篇文章主要讲替换元素，至于替换元素的定义这里我就不再赘述啦，这里我想呈现一些我曾经不知道的知识，希望能给同样在学习css知识的同学一点帮助，如果有错误的地方，请多多包涵~
第一个是替换元素的默认display值
首先这里有一个小知识：button按钮会自动换行，原因在于input按钮默认的white-space值为pre，button按钮默认的值为normal，当文字很多很多的时候，button按钮就会换行。
其次是对于很多替换元素，不同浏览器的默认display值并不一样，
简单的举几个有差异的例子：
textarea以及input元素在Chorme与IE中为inline-block，而在fire-fox中为inline。这种差异毫无规律可言，其差异的根本原因可能与浏览器厂商有关，其他的不得而知，但是火狐确实有自己的独特之处。
但是无论是inline，还是inline-block，替换元素的尺寸的计算规则都是一样的
主要有三类：
1.固有尺寸
基本定义是替换内容原本的尺寸，《CSS世界》这本书中把他理解为“不加修饰的默认尺寸”，
下面是 一个空的video。
<video controls src=""></video>
<!-- 默认宽高为300px 150px -->
<video controls src=""></video>
<!-- 默认宽高为300px 150px -->
原书中举了input的例子，在控制台看到的空白input的尺寸就是其固有尺寸，同时在没有链接内容的video标签上，可以看到他的默认宽高是 300px 150px 单位为px ，这样可以保证这些元素不会受到外界CSS代码的影响
2.HTML尺寸
这个概念确实有点难理解，这些尺寸只能通过html原生属性改变，比如img的height 和width ，我有个更有趣的例子，如果人的身高把头发算在内的话，头发是人的原生属性，那我们其实可以通过留长发让我们看来了高一点。
<img width= "300"height="300">
<input type="file" size="30">
<textarea cols="20" rows="5"> </textarea>
<img width= "300"height="300">
<input type="file" size="30">
<textarea cols="20" rows="5"> </textarea>
3.CSS尺寸
可以通过width 、height 、min/max-width、min/max-height设置
接下来是不同情况下的属性值计算
如果没有css尺寸和html尺寸，那么就使用固有属性作为最终的宽高
假如我们使用img插入一张图片，什么宽高都不去设置，此时的宽高就是图片本身的宽高。
如果我们添加了HTML尺寸
<img sre="banner.jpg" width="1200" height="900" >
此时最后呈现的大小就是1200px × 900px
如果我们加入css代码：
img{
width=600px;
}
此时高度也会等比例的计算 height=600×900/1200=450px；
以上这些内容是张鑫旭老师就本题目的一些铺垫性的内容，具体想要继续了解的同学可以阅读《css世界》
或者阅读张鑫旭老师的博客文章：张鑫旭老师关于本主题的博客链接