CSS盒子模型

努力学习javaee的小白选手

已于 2022-05-20 01:23:58 修改

阅读量370

点赞数

分类专栏： javaee 文章标签： css css3 html

于 2022-05-20 01:22:42 首次发布

本文链接：https://blog.youkuaiyun.com/m0_50555031/article/details/124875019

版权

javaee 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了CSS盒子模型，包括内容区、内边距、边框和外边距。内容区的width、height和overflow属性控制元素尺寸和溢出处理。内边距影响可见框大小，边框设置涉及宽度、颜色和样式。外边距用于调整盒子间距离，不影响可见框大小但影响位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、盒子模型

盒子模型是网页设计中经常用到的一种思维模型，所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，内边距，和实际内容。

下面的图片说明了盒子模型(Box Model)：

盒模型的各个部分：

Content box（内容区）: 这个区域是用来显示内容，大小可以通过设置 width和 height
Padding box（内边距）: 包围在内容区域外部的空白区域;大小通过 padding相关属性设置
Border box（边框）: 边框盒包裹内容和内边距。大小通过 border相关属性设置
Margin box（外边距）: 这是最外面的区域，是盒子和其他元素之间的空白区域，大小通过 margin相关属性设置

下面我会分别描述这几个元素

二、内容区

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

hidden：表示隐藏溢出的部分；
visible：表示显示溢出的部分（溢出的部分将显示在盒子外部）；
scroll：表示为内容区添加一个滚动条，您可以通过滑动这个滚动条来查看内容区的全部内容；
auto：表示由浏览器决定如何处理溢出部分。

实例：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">盒子模型</div>
    </div>
</body>
</html>

运行结果：

三、内边距

内边距（padding）指的是盒子的内容区和盒子边框之间的距离

一共有四个方向的内边距，可以通过：padding-top、padding-right、padding-bottom、padding-left来设置四个方向的内边距

内边距会影响盒子可见框的大小，元素的背景会延伸到内边距

实例

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">盒子模型</div>
    </div>
</body>
</html>

运行结果

四、边框

边框是环绕内容区和内边距的边界，为元素设置边框必须指定三个样式：

border-width:边框宽度
border-color:边框颜色
border-style:边框样式

其中 border-style 属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。

实例

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid black;
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
            border: 10px dashed red;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">盒子模型</div>
    </div>
</body>
</html>

运行结果

五、外边距

外边距位于盒子模型的最外围，是边框之外的空间，通过外边距可以使盒子与盒子之间不会紧凑的连接在一起，是 CSS 布局中的一种重要手段。它不会影响可见框的大小，而是会影响盒子的位置

盒子有四个方向的外边距：margin-top、margin-right、margin-bottom、margin-left。由于页面中的元素都是靠左靠上摆放的，所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

实例：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid black;
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
            border: 10px dashed red;
            padding: 20px;
            margin: 15px;
            background: #CCC;
        }
        div.box-two {
            width: 50px;
            height: 50px;
            border: 10px dotted black;
            padding: 20px;
            margin: 20px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">盒子模型</div>
        <div class="box-two"></div>
    </div>
</body>
</html>

运行结果：

以上就是盒子模型的主要部分~