上篇博客我们介绍了基本的CSS选择器的增加版，这次我们学习一下css很重要的盒子模型
什么是盒子模型？
盒子模型是一个用于描述HTML和CSS中元素布局的概念。在Web开发中，每个HTML元素都可以看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距组成。
组成：
- 内容区域（content）：盒子中呈现实际内容的部分，例如文本、图片等。
- 内边距（padding）：内容区域与边框之间的空白区域，用于控制内容与边框之间的距离。
- 边框（border）：包围内容区域和内边距的线条，可以设定边框的样式、宽度和颜色等。
- 外边距（margin）：盒子与周围元素之间的空白区域，用于控制盒子与其他元素之间的距离。
这里我们使用手机盒子举例帮助大家理解
- 内容区域：手机盒子内部是放置手机的实际空间。
- 内边距：内容区域周围留有一些空白区域，使手机与盒子壁之间有距离。
- 边框：围绕着手机盒子的边缘有一层线条，形成边框。
- 外边距：手机盒子与其他物品之间保持一定的距离。
- 内容:手机可以看成是盒子的内容
图片讲解
结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
.head{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="head">
我是一个粉色的小盒子
</div>
</body>
</html>显示效果
根据这两个属性，大家可以试一试其他不同的颜色
背景图片：
单一的背景颜色比较单调，我们需要为网页增加一个背景图片，以达到好看的效果
属性名称:background-image:url(具体路径);
大家思考一个问题，如果我的背景图片和给定的盒子大小不一样的时候我们该怎么办？
1.更改盒子大小
2.更改图片大小
这两种方法都是属于固定大小了，我们后续想要更改一些图片的话会比较麻烦，但是css刚好给了我们一些自动填充图片的属性
介绍
background-size是CSS背景属性中的一项，用于设置背景图像的大小。它可以接受多个不同的值，来决定如何调整背景图像的尺寸，以适应元素的大小和形状。
常见的background-size取值包括：
- auto：保持背景图像的原始尺寸。
- cover：缩放背景图像以完全覆盖容器，可能会被裁剪。
- contain：缩放背景图像以适应容器，完整显示图像，可能会有空白部分。
- length：指定背景图像的尺寸为一个固定的长度值，可以使用像素、英寸或厘米等单位。
- percentage：指定背景图像的尺寸为一个百分比值，相对于背景容器的大小。
background-repeat是CSS背景属性中的一项，用于定义背景图像被如何重复或平铺。
- repeat：默认属性值，背景图像会在水平和垂直方向上重复平铺，直到填满整个背景区域。
- repeat-x：只在水平方向上重复平铺背景图像。
- repeat-y：只在垂直方向上重复平铺背景图像。
- no-repeat：只在水平和垂直方向上显示一次背景图像。
- space：在水平和垂直方向上重复平铺背景图像，但是最后一行和列不进行重复，在最边缘留出空白。
背景图片一般搭配我标记的两种颜色的属性使用。覆盖和取消平铺
3.边框
现在大家拿一个笔画一个正方形，这个黑色的线条就是边框，那么这个边框由什么组成呢？首先必不可少的就是大小，没有大小的物品那还存在吗？第二个就是要他的样式，我画的这条线可以是实线，也可以是虚线，也可以是一些小点点组成的，还能是两条线组成。反正咋好看咋来。最后这个边框还需要一个颜色，不然默认为主题颜色，我加不加都一样，所以为了不做白费的努力，我决定加上好看^-^
边框的大小
属性名称:
border-width
用法:
border-width:1px;
这里他的大小单位一般都是px。
边框的样式属性:
属性:
border-style
属性值介绍:
这个有点多这里列出来几种常见的
none: 无边框样式，不显示边框。solid: 实线边框样式，使用实线绘制边框。dashed: 虚线边框样式，使用间隔的短横线绘制边框。dotted: 点线边框样式，使用小圆点绘制边框。double: 双线边框样式，使用两条实线绘制边框。
书写方式:
border-style:solid;
边框颜色
属性：
border-color
属性值:
颜色上面介绍的那些格式写就可以
写法
border-color:red;
边框的层叠性：
border:1px solid red; border-bottom:blue;
这里将显示下边框是蓝色，其余三条均为红色后续我们将介绍css的特性时，会讲到这个。这里你也可以更改对应的大小和样式以求达到你想要的效果
边框的圆角效果：
属性名称：border-radius
用法：
border-radius:左上 右上 右下 左下;
数值使用:一般来说当盒子的宽高相同的时候，将border-radius的大小设置成盒子宽高的一半的时候，此时显示的是一个圆形，小于这个数值的变成椭圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS圆角效果</title>
<style>
.head{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="head">
</div>
</body>
</html>
边距
边距分为内边距和外边距，我们先来介绍内边距
内边距
内边距相当于就是你手机盒子和你边框之间的距离，如下图
那么内边距有什么用处呢？
拿上面的div盒子为例，这里我们发现，文字和边框的之间的距离非常小
但是当我们加上内边距的大小为10px的时候(padding:0px 10px),我们会发现这时候文字和边框的左右距离明显加大，这种效果是不是更加好看？
书写方式：总结写法
padding:上 右 下 左; /*这时候如过你想分开写的话,你可以写成*/ /*上 下 左 右*/ padding-top:值; padding-bottom:值; padding-left:值; padding-right:值; /*如果你想简写，此时当四个内边距相同的情况下，你只需要写成*/ padding:值; /*当上下一样左右不同时，只需要写两个值就行*/ padding:值 值;
外边距：
外边距指的是盒子和其他标准流盒子之间的距离，相当于我手机在桌子上，手机和我在桌子上书的距离。如下图
他的使用方法和上面的padding用法一样，只需要把padding更改成margin即可。
练习：
当学到这些的时候你需要做一些小的练习来加深自己的印象，这里我给出一个小的案例。
制作出如下图相同的效果：用户头像显示
素材
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户头像显示</title>
<style>
div{
width: 200px;
height: 200px;
border:4px solid pink;
border-radius: 50%;
background-image: url(./images/3.jpg);
background-size: cover;
margin:100px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这里可能大家会出现问题是在图片路径上。大家仔细看好自己的路径是否正确进阶
上面介绍的基本内容学习之后，我们需要了解一下内边距，边框对盒子的影响以及css3的新属性解决
正常我们定义一个盒子的时候，我们会给这个盒子宽高，以及盒子内容，此时当我们增加内边距的时候，会造成盒子变大。下面我将举一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
Hello, World!
</div>
</body>
</html>
