CSS入门10-替换元素和非替换元素，块级元素和行内元素

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 简介

我们知道html中元素对外表现都是一个个盒子或者说是框，那么这些盒子是否都一样呢？前面说过，这些盒子有的是从上到下竖着摆放的，而有的是横着摆放的。另外，有的盒子装的内容是直接展示的，有的却是魔术盒，根据标签和属性决定具体的展示内容。

2. 替换元素和非替换元素

2.1 替换元素

替换元素是指，浏览器会根据元素的标签和属性，来决定元素的具体显示内容。 其内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）。

最明显的两个例子：

1. img 浏览器会根据img元素的src属性加载图片信息并显示，如果仅查看HTML代码，只能看到引用地址，而看不到图片的实际内容。
2. 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 行内替换元素的宽度

1. 若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度 。 典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度。
2. 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度 例子同上。
3. 若宽度的计算值为 auto 且高度有非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比 。 典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置，这也是为什么img是行内元素，但可以设置宽高的原因。
4. 除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px 典型的例子：比如iframe, canvas

4.2.2 行内替换元素的高度

1. 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
2. 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
3. 若高度的计算值为 auto 且宽度有非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；
4. 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值不能大于150px，且宽度不能大于长方形高度的2倍

4.3 行内非替换元素表现

1. 宽高设置是无效的，用line-height来控制高度
2. padding左右起作用，上下不会影响行高，但是对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠。
3. margin左右作用起作用，上下不起作用，原因在于：行内非替换元素的外边距不会改变一个元素的行高

5. 块级元素和行内元素的转换

5.1 块级->行内

1. display: inline

5.2 行内->块级

1. display: block
2. 设置float

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

替换元素和非替换元素

html元素两种分类。替换元素和不可替换元素；块级元素和行内元素

置换元素(替换元素)和非置换元素(不可替换元素)

行内元素与块级元素的总结

置换和非置换元素