目录
一、介绍
概念
在CSS视角下，所有HTML元素可以看作盒子。所谓的盒子在HTML中就是一个盛装元素内容的容器。盒子由内容区（content)，内边距（padding），边框（border），外边距(margin）组成。
内容（Content）：盒子的实际内容，如文本、图像等。
内边距（Padding）：内容和边框之间的空白区域。内边距可以设置为固定大小或者百分比。
边框（Border）：内边距和外边距之间的边界，用于包围内容和内边距。
外边距（Margin）：边框和相邻元素之间的空白区域。外边距可以设置为固定大小或者百分比
盒子的尺寸
- 总宽度和总高度决定了盒子的尺寸。
- CSS盒子模型的大小由内容、内边距、边框和外边距的总和确定。可以使用CSS属性来控制盒子模型的各个部分的大小、颜色和样式，以实现所需的布局效果。
二、实例
运行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#img1{
/*设置内容物宽高*/
width: 400px;
height: 250px;
/*背景色*/
background-color: gray;
/*设置盒子边框*/
border: 3px blue solid;
/*设置盒子边框四个角弧度*/
border-radius: 10px;
/*设置盒子内边距*/
padding: 20px;
/*设置盒子外边距*/
/*margin: 50px;*/
margin-top: 50px;
margin-left: 17px;
/*单独控制边框四个角弧度，直接写（顺时针：左上，右上，右下*/
border-radius: 0px 0px 30px 0px;
}
</style>
</head>
<body>
<img src="./img_scr/tu.jpg" id="img1" alt="">
</body>
</html>运行效果：
三、盒子的属性
1、块级元素和内联（行内）元素
| 块级元素 | 行内元素 |
| 块元素会在页面独占一行（自上向下垂直排列） | 行内元素不会在页面独占一行，只占自身的大小 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| 一般块级元素可以包含行内元素和其他块级元素 | 一般行内元素包含内联元素不包含块级元素 |
Tips:
- 通过设置display属性为inline-block，可以使块级元素以行内元素的方式显示。
- 行内元素不能设置上下的外边距（margin）和内边距（padding）。
- 行内元素不能使用块级元素常用的属性，如width、height、margin、padding等，只能使用部分属性，如color、font-size等。
常见的块级元素
- div、form、h1~h6、hr、p、table、ul等
- 无展示元素的块级标签<div>
常见的内联（行内）元素
- span、a、b、em、i、strong等
- 内联元素可以设置宽高的元素：img、input（可以理解为行内块级元素，可设置宽高）
- 无展示效果的内联标签：
- span元素不会单独占据一行，但可以将行内定义若干区域，从而实现行内布局。
<span>标签用来定义文档中一行的一部分，是行内元素，<span>元素的内容通常主要是文本。
2、边框
| border | 四边宽度、样式、颜色(border-width,border-style,border-color) |
| border-top | 上边框宽度、样式、颜色 |
| border-bottom | 下边框宽度、样式、颜色 |
| border-right | 右边框宽度、样式、颜色 |
| border-left | 左边框宽度、样式、颜色 |
CSS新增属性：圆角边框（border-radius）
3、内边距
| padding | 四个方向内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
| padding-right | 右内边距 |
| padding-left | 左内边距 |
4、外边距
| margin | 四个方向外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
Tips：外边距始终是透明的（不受背景填充颜色影响）
四、练习
运行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#ins1{
width: 400px;
height: 50px;
background-color: gray;
border: 5px green solid;
display: block;
margin-top: 50px;
margin-left: 17px;
}
#ins2{
width: 400px;
height: 50px;
background-color: gray;
border: 5px blue solid;
display: block;
margin-top: 50px;
margin-left: 17px;
padding: 20px;
}
#img1{
width: 100px;
height: 200px;
background-color: gray;
border: 3px red solid;
padding: 50px;
border-radius: 10px 10px 10px 10px;
margin-top: 50px;
margin-left: 17px;
}
#img2{
width: 200px;
height: 300px;
background-color: gray;
border: 3px red solid;
padding: 50px;
border-radius: 50px;
border-radius: 10px 30px 10px 10px;
margin-top: 50px;
margin-left: 17px;
}
#img3{
width: 300px;
height: 400px;
background-color: gray;
border: 3px red solid;
padding: 50px;
border-radius: 10px 10px 10px 10px;
margin-top: 50px;
margin-left: 17px;
}
</style>
</head>
<body>
<b id="ins1">加粗文本</b>
<ins id="ins2">下划线文本</ins>
<img src="./img_scr/tu.jpg" id="img1">
<img src="./img_scr/tu.jpg" id="img2">
<img src="./img_scr/tu.jpg" id="img3">
</html>