（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）
1. 简介
我们知道html中元素对外表现都是一个个盒子或者说是框，那么这些盒子是否都一样呢？前面说过，这些盒子有的是从上到下竖着摆放的，而有的是横着摆放的。另外，有的盒子装的内容是直接展示的，有的却是魔术盒，根据标签和属性决定具体的展示内容。
2. 替换元素和非替换元素
2.1 替换元素
替换元素是指，浏览器会根据元素的标签和属性，来决定元素的具体显示内容。 其内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）。
最明显的两个例子：
- img
浏览器会根据img元素的src属性加载图片信息并显示，如果仅查看HTML代码，只能看到引用地址，而看不到图片的实际内容。 - input
浏览器会根据input元素的type属性决定其展现形式，是显示成输入框，还是单选按钮等。
另外，textarea、select、object、video都是替换元素。这些元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
2.2 非替换元素
HTML 的大多数元素是非替换元素，浏览器直接将其内容显示出来。例如：div, p, span
3. 块级元素和行内元素
3.1 块级元素
普通流中，块元素独占一行。例如：div，p，h1等。
3.2 行内元素
普通流中，行内元素左右可以有其他行内元素。
4. 块级元素，行内替换元素，行内非替换元素表现
4.1 块级元素表现
块级元素，width，height，margin，boder的设置遵循盒模型。
4.2 行内替换元素表现
行内替换元素，width，height，margin，boder的设置遵循盒模型。另外，当其宽高有auto属性时，其表现如下：
4.2.1 行内替换元素的宽度
若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度 。
典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度。若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度
例子同上。若宽度的计算值为 auto 且高度有非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比 。
典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置，这也是为什么img是行内元素，但可以设置宽高的原因。除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px
典型的例子：比如iframe, canvas
4.2.2 行内替换元素的高度
若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
若高度的计算值为 auto 且宽度有非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；
若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值不能大于150px，且宽度不能大于长方形高度的2倍
4.3 行内非替换元素表现
宽高设置是无效的，用line-height来控制高度
padding左右起作用，上下不会影响行高，但是对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠。
margin左右作用起作用，上下不起作用，原因在于：行内非替换元素的外边距不会改变一个元素的行高
5. 块级元素和行内元素的转换
5.1 块级->行内
- display: inline
5.2 行内->块级
- display: block
- 设置float
css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
替换元素和非替换元素
html元素两种分类。替换元素和不可替换元素；块级元素和行内元素
置换元素(替换元素)和非置换元素(不可替换元素)
行内元素与块级元素的总结
置换和非置换元素
