【CSS】：盒模型-优快云博客

本文链接：https://blog.youkuaiyun.com/2303_79015671/article/details/145434211

🏠大家好，我是Yui_💬
🍑如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🚀如有不懂，可以随时向我提问，我会全力讲解~
🔥如果感觉博主的文章还不错的话，希望大家关注、点赞、收藏三连支持一下博主哦~！
🔥你们的支持是我创作的动力！
🧸我相信现在的努力的艰辛，都是为以后的美好最好的见证！
🧸人的心态决定姿态！
💬欢迎讨论：如有疑问或见解，欢迎在评论区留言互动。
👍点赞、收藏与分享：如觉得这篇文章对您有帮助，请点赞、收藏并分享！
🚀分享给更多人：欢迎分享给更多对编程感兴趣的朋友，一起学习！

1. 什么是盒模型

在 CSS 中，盒模型（Box Model） 是网页布局的基础。所有 HTML 元素在浏览器中都会被当作一个矩形“盒子”来处理，而 盒模型决定了这些“盒子”的尺寸、间距和显示方式。
盒模型的组成：

Content（内容区）：盒子内部的实际内容，如文本、图片等。
Padding（内边距）：内容与边框之间的距离，增加 padding 会增大盒子的可见区域。
Border（边框）：围绕内容和内边距的边界，可以设置颜色、粗细和样式。
Margin（外边距）：盒子与其他盒子之间的距离，不会影响盒子自身的大小。
打开网页的开发者模式，你会看到这样一个矩形：

可以用下图理解盒模型的层级关系：

+------------------------+  <-- margin (外边距)
|                        |
|  +------------------+  |  <-- border (边框)
|  |  +------------+  |  |  <-- padding (内边距)
|  |  |  内容区    |  |  |
|  |  +------------+  |  |
|  +------------------+  |
|                        |
+------------------------+

1.1 边框

基础属性：

粗细：border-width。
样式：border-style，默认没有边框，solid实线边框，dashed虚线边框，dotted点线边框。
颜色：border-color。

<!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>
        div{
            width: 500px;
            height: 250px;
            border-width: 10px;
            border-style:solid;
            border-color:green;
        }
    </style>
</head>
<body>
    <div>
        测试~
    </div>
</body>
</html>

在这里插入图片描述

可以看到图中我们有了一个厚度达10px的边框，同时因为这个边框导致了我们盒子被撑大了，原本盒子：500*250变成了520*270。添加了边框的厚度。
如果你想要操作每一个边框，可以使用以下语法：

border-top/bottom/left/right

来分别控制每个方向的边框。
提问：有没有办法不撑大盒子？
有的，

* {
	box-sizing: border-box;
}

加上这一段代码即可。
在这里插入图片描述

1.2 内边距

padding设置内容盒边框的距离。
基础写法：
默认内容是顶着边框放置的，用padding来控制距离。
同样的，可以控制4个方向：

padding-top。
padding-bottom。
padding-left。
padding-right。

<!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>
        div{
            height: 200px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div>
        测试！
    </div>
</body>
</html>

没加padding
在这里插入图片描述

加上padding后

<!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>
        div{
            height: 200px;
            width: 300px;
            padding-top:5px;
            padding-left:10px;
        }
    </style>
</head>
<body>
    <div>
        测试喵~
    </div>
</body>
</html>

在这里插入图片描述

通过图片，我们看到了一个绿色的内边框。
注意：内边距同样会撑大盒子，解决方法同边框一样。

1.3 外边距

基础写法：
控制盒子与盒子之间的距离：
同样可以控制四个方向：

margin-top.
margin-bottom.
margin-left.
margin-right.

<!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>
        div{
            width: 200px;
            height: 200px;
            margin-left:20px;
        }
    </style>
</head>
<body>
    <div>
        现在是北京时间22点33分~
    </div>
</body>
</html>

在这里插入图片描述

通过观察图片我们可以看到，外边框是不占盒子大小了

1.4 复合写法

现在我会让盒子的各个方向的部分都进行不同的处理。

<!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>
        div{
            width: 200px;
            height: 200px;
            border-left: 10px solid red;
            padding-right: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div>
        <p>who are you?</p>
    </div>
</body>
</html>