【HTML+CSS】HTML中的元素分类及盒子模型内部结构详解

1 HTML中的元素分类

大多数HTML元素被定义为块级元素或内联元素，还有少部分被称为内联块级元素，下面本文将对这些元素进行简单介绍，并给出示例易于理解。

1.1 块级元素

HTML中常用的块级元素有：<div>、<ul>、<li>、<p>、<h1>…<h6>等等，HTML根据元素本身的特征来对元素进行分类。块级元素的特征为：独占一行并且支持宽度、高度等对齐方式。
下图为宽度500px、高度50px、文字水平居中的div元素示例，为了方便观察，本节将元素背景改为红色。

1.2 内联元素

HTML中常用的内联元素包括：<a>、<span>等，这些内联元素的特征为：不独占一行(宽度由内容多少决定)，并且不支持宽度、高度等对齐方式。
下图为内联元素示例，修改元素样式的CSS代码同块级元素。由于内联元素自身特征影响，无法改变内联元素的宽度、高度以及对齐方式。

1.3 内联块级元素

HTML中常见的内联块级元素有：<img>、<input>、<table>等，为了便于CSS美化，内联块级元素包含了块级元素和内联元素的全部优点：不独占一行，支持宽度、高度等对齐方式。

1.4 块级元素和内联元素的不同与联系

在CSS中，块级元素和内联元素的区别在于display的属性值不同：块级元素的display为block；内联元素的displlay为inline。可以通过改变元素的display属性值将块级元素 / 内联元素转化为内联元素 / 块级元素。
由于实际需要，我们经常会将块级元素和内联元素嵌套使用，下面介绍一下块级元素和内联元素的嵌套规则：

• 1 块级元素可以包含内联元素及一些块级元素(如div既可以包含div、ul、li等块级元素，也可以包含span、a等内联元素)。内联元素只能包含内联元素。
• 2 常用块级元素中p、h1…h6只能包含内联元素。

2 弹性盒子模型

由于块级元素独占一行的特性，所以当定义两个块级元素时，无论这两个块级元素中的内容多少，这两个块级元素都会竖向排列，如图，

由于美化需要，大多数时候我们需要使元素横向排列，并且使元素可以进行宽度、高度调整，以及支持对齐方式，这时就需要使用弹性盒子模型对元素进行调整布局。
弹性盒子模型特征：弹性盒子内子元素始终横着布局，且子元素高度一致。CSS将上面两个块级元素设置为弹性盒子步骤如下：

• 1 首先需要定义一个块级元素或内联元素作为盒子，其中包含两个块级元素。
• 2 将外部盒子的display属性值设置为flex。（注意是将外部盒子变为弹性盒子，而不是盒子内部的元素本身。）
  html代码如下：

	<div class="box">
        <div class="box_red">我是块级元素</div>
        <div class="box_green">我也是块级元素</div>
    </div>

css代码如下：

		.box_red {
            background-color: red;
        }
        .box_green {
            background-color: green;
        }
        .box {
            display: flex;
        }

通过这种方式将上图中的两个块级元素转化为弹性盒子元素结果如下：

3 盒子模型内部结构

下图为上节中盒子box的结构图，盒子内部结构：由内到外分别是内容区、填充区、边框区、外边距区。

其中中心蓝色区域为内容区，css中的width、height属性默认对内容区起作用；
绿色区域为填充区，即为盒子边框与内容之间的区域，填充区大小取决于padding属性；
再外一层的黄色区域为边框区，可以使用border系列的属性值更改边框样式；
最外面一层的橙色区域为外边距区，用于决定盒子边框与其他盒子(元素)边框的距离，距离大小取决于margin属性。
盒子模型还有一个常用css属性为box-sizing：用于决定盒子大小是否变化。属性值分为content-box与border-box两种：

• 1 content-box只使用内容区计算盒子大小，且盒子大小随着内容变大而变大。
• 2 border-box使用内容区+填充区+边框区计算盒子大小，且盒子大小为固定值，内容可能会超出盒子范围。

4 盒子内部结构设置方式

4.1 填充区属性padding

padding设置方式：
单独设置：

	/*分别为上、右、下、左的填充*/
	padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;

同时设置：

padding: 10px 20px 30px 40px;

加入padding会使盒子变大。参数含义：上面开始，顺时针旋转，没指定的方向填充大小与对称方向相等。

4.2 边框区属性border

border设置方式：
单独设置：

	/*边框线宽度为1像素*/
	border-width: 1px;
	/*边框线样式为实线（虚线为dashed，点线为dotted，双边框为double）*/
	border-style: solid;
	/*边框颜色*/
    border-color: blue; 

统一设置

	/*各子属性位置不影响效果*/
	border: 1px solid blue;

4.3 外边距区属性margin

margin设置方式
与padding类似，margin也可以单独设置上下左右的外边距，如下：

	margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;

也可以统一设置：

	/*从左到右分别为上、右、下、左*/
	margin:10px 20px 30px 40px;
	/*上边距为0，水平居中*/
	margin:0 auto;

结语

本文主要解释了HTML中块级元素、内联元素、内联块级元素各自的特性以及不同元素的区别与转化，并说明了弹性盒子模型的特点，以及盒子模型的内部结构设置。