块元素和内联元素、置换元素和非置换元素

一、块元素和内联元素

一般而言，将HTML标签分为两类：块元素和内联元素。

1、块元素的特点：

• 另起一行，独立成块；
• 高度、行高、边距都可控制；
• 默认宽度为其容器宽度100%；

2 、内联元素特点：

• 与其他内联元素挤在一行；
• 高度、行高、上下边距均不可控；
• 宽度是其内容（文字或图片）宽度，不可改变；

3 、常见块元素：

div / p / header / footer /nav / h1-h6 / hr / form / fieldset / dl / address / blockquote / table / ul / ol / pre / noscript

4 、常见内联元素：

a / abbr / br / cite / code / em / i / img / input / lable / q / select / small / strong / sub / sup / textarea

但是这样划分并不完全准确，比如一个常见的面试问题：img是行内标签，但是却可以设定宽高。这是因为这样一分为二的分类方法并不完善，还有一种划分方法：置换元素与非置换元素。使用这两种方法就可以将元素准确分类。

二、置换元素与非置换元素

1、置换元素

置换元素就是浏览器根据元素的标签和属性，来决定元素的具体展示内容。

一个内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。置换元素一般有内在尺寸，所以具有width和height，可以进行设定。

HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

2、非置换元素

官网并未对非置换元素做出具体定义，可以认为除去置换元素都是非置换元素。HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

3、行内级置换的宽度定义

1. 若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度 

例：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度

2. 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度 

3. 若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比 

例：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置，这也是为什么img是行内元素，但可以设置宽高的原因

4.除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px（为什么是300，参见下一条）

例：比如iframe, canvas

4、行内级置换的高度定义

1. 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；

2. 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；

3. 若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；

4. 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍。

博客参考：https://blog.csdn.net/qq_38602656/article/details/79510379

最后

以上就是迅速小馒头为你收集整理的块元素和内联元素、置换元素和非置换元素的全部内容，希望文章能够帮你解决块元素和内联元素、置换元素和非置换元素所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。