元素类型

块元素(block)

1. 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域
   常用的块状元素包块 div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等;
2. 块元素的特点： 1)默认情况下，块状元素都会独占一行，块状元素会按顺序自上而下排列。 2)块状元素都可以直接定义自己的宽度和高度。 3)块状元素遵循盒模型的所有规则，一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。（p 标签除外）

内联元素(inline) 或是行内元素

1. 常见的内联元素如：a,span,i,em,strong,b 等
2. 内联元素的特点： 1)内联元素其后如果是内联元素则会在一行内逐个进行显示； 2)内联元素显示的宽度、高度只能根据所包含内容的高度和宽度来确定，不能直接定义它的宽和高，它的最小内容单元也会呈现矩形形状； 3)内联元素也会遵循盒模型基本规则，但个别属性不能正确显示;（上下间距显示不正确，左右正常显示）

可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。

元素类型转换

1. display 的作用：设置或检索元素的类型。
   属性值 19 个：block/inline/inline-block/none/list-item/table-header-group/table-footer-group….
2. 属性值中有 5 个最常用的属性值
   1)Block
   块元素的 display 默认属性值，当给元素加 display：block 后元素变为块元素
   （注：当元素设置了 float 属性后，就相当于给该元素加了 display:block;属性；）
   2)inline
   内联元素的 display 默认属性值，当给元素加 display：inline 元素变为内联元素
   3)inline-block
   内联块元素默认属性值：行内的其他元素显示在同一行，但可以直接设置宽高，
   如：img,input（注：只有这一个元素类型支持 vertical-align 属性）
   4)none
   元素被隐藏不显示
   5)list-item
   将元素转换成列表。li 的 display 默认属性值；

总结

1. 大部分块元素 display 属性值默认为 block，其中 li 默认值为 list-item。
2. 大部分内联元素(行内元素、行间元素)的 display 属性值默认为 inline,其中 img,input，默认为 inline-block。

扩展

置换元素：
一个内容 不受 CSS 视觉格式化模型控制，CSS 渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。HTML 中的 img、input、textarea、select、object 都是置换元素。这些元素往往没有实际的内容，即是一个空元素

非置换元素：
HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端

---

本文作者：人模人样的搬砖老段
本文链接：元素类型
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

---

最后更新于:2020/01/04

赏

谢谢你让我少搬一块砖

支付宝

微信