HTML元素的分类

1.块级元素 (display:block)

特点：

• 占据其父元素（容器）的整个空间；
• 会新起一行
• 可以包含行内元素和其他块级元素

常见块级元素：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>

<header>、<footer>、<aside>、<nav>、<section>、<artical>

2.行内元素 (display:inline)

特点：

• 只占据它对应标签的边框所包含的空间
• 会在水平方向排列
• 不能包含块级元素
• 元素间默认有间距
• 设置width、height、margin(上下)、padding(上下)无效  (替换元素除外)

常见的行内元素：

<a>、<span>、<textarea>、< input >、<button>、<label>、

<em>、<i>、<b>、<small>、<strong>、<select>、<img>

3.行内块元素 (display:inline-block)

使元素同时具有块级元素和行内元素的特性

既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排

4.元素分类

元素可以有不同的分类

1. HTML元素可以分为行内元素（inline）、块级元素(block)、行内块元素(inline-block)
2. 也可以分为替换元素和非替换元素

替换元素：

浏览器根据元素的标签和属性，来决定元素的具体显示内容

替换元素本身没有内容是“空元素”

非替换元素：

HTML大多数元素都是非替换元素，直接将内容展示给浏览器

例如<div>、<span>、<a>、<p>、<li>、<header>等大多数都是

5.行内替换元素

特点：

• 浏览器根据元素的标签和属性来决定具体显示内容
• 替换元素本身没有内容是“空元素”
• 设置width、height、margin（四个方向）、padding（四个方向）属性均有效

例：

• <input> 浏览器会根据<input>标签的type属性来决定是显示输入框、还是单选按钮等
• <img>   根据属性src的值来读取图片信息并显示出来

常见的行内替换元素：

<img>、<input>、<textarea>、<select>、<object>、<embed>、<video>、<audio>、<canvas>、<iframe>

6.行内非替换元素

特点：

• 内容直接表现给用户端
• 真正高度由内容的lline-height控制,与垂直方向的padding、margin、border均无关
• padding、margin左右起作用，上下不会影响行高

常见的行内非替换元素：<a>、<span>、<label>、<strong>