HTML 块级元素 & 行内元素 & 可替换元素

HTML 元素分类

为了更好的进行 CSS 样式布局，HTML 元素可以分为两类: 块级元素 和 行内元素

块级元素 & 行内元素

常见的块级元素:

div , p , ul , li , h1-h6, table , form

常见的行内元素:

a , span , em , b , i , strong , img

区别:

	是否独占一行	width、height	padding、margin	默认宽高
块级元素	是	有效	有效	撑满父元素
行内元素	否	无效	padding 有效，margin 水平方向有效	随内部元素内容变化
行内块级元素	否	有效	有效	随内部元素内容变化

可替换元素

<img> 是行内元素，但是却可以设置宽高，这是为什么呢？ 因为它也属于 可替换元素

可替换元素（replaced element） ：内容不受 CSS 视觉格式化模型控制，CSS 渲染模型不考虑对此内容的渲染，且元素本身一般y拥有固有尺寸(宽度，高度，宽高比)，CSS 可以影响到可元素的位置，但是不会影响到元素自身的内容

典型的可替换元素有： iframe，video，embed，img

这些元素往往没有实际的内容，即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。

例如: 浏览器会根据 <img> 标签的 src 属性的值来读取图片信息并显示出来，而如果查看 html 代码，则看不到图片的实际内容

display

行内元素 和 块级元素之间是可以互相转换的，这里我们使用到 display 属性

# 隐藏当前元素，不占用位置
display: none;

# 将当前元素以 行内元素 样式展示
display: inline;

# 将当前元素以 块级元素 样式展示
display: block;

# 将当前元素以 行内块级元素 样式展示
display: inline-block;