CSS盒子模型及属性

最新推荐文章于 2025-03-26 19:45:04 发布

小赵在练琴

最新推荐文章于 2025-03-26 19:45:04 发布

阅读量2.2k

点赞数 12

分类专栏： HTML&CSS 文章标签： html css3

本文链接：https://blog.csdn.net/annotation_PLZ/article/details/125898814

版权

HTML&CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS中的盒子模型，包括内容区(content)、内边距(padding)、边框(border)和外边距(margin)四个部分，并通过代码示例展示了如何使用width、height、overflow等属性进行元素布局和样式控制。

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

大家好，今天来讲讲CSS盒子模型及属性。

一、盒子模型是什么？

盒⼦模型是⽹⻚设计中经常⽤到的⼀种思维模型，由四个部分构成，从内⽽外分别为内容区（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果。

网页中的每一个元素都可以看做一个盒子模型

二、盒子模型介绍及相关属性

1.内容区/网页元素（content）

内容区是整个盒⼦模型的中⼼，其中存放了⽹⻚的主要元素，这些元素可以是⽂本、图像..

内容区有 width height overflow 三个属性，其中 width 和 height 属性⽤来指定盒⼦内容区域的宽度和⾼度。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        background-color: aqua;
        width: 100px;
        height: 100px;
    }
   </style>
<body>
    <div>内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素</div>
</body>
</body>
</html>

在普通盒子模型中，如果内容过多，超出部分会在盒子外显示。

当内容信息过多，超出内容区设置的范围时，可以使⽤overflow 属性设置溢出内容的处理⽅式 overflow属性的四个可选值：

下⾯示例使⽤overflow属性的hidden值隐藏了内容超出部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        background-color: aqua;
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
   </style>
<body>
    <div>内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素</div>
</body>
</body>
</html>

2.内边距（padding）

内边距是内容区和边框之间的空间，我们可以通过 padding-top 、 padding-right 、 padding-bottom 、 padding-left 及它们的简写属性 padding 来设置内容区各个⽅向上与边框之间的距离。在为盒⼦模型设置背景属性时，背景属性可以覆盖到内边距区域

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #big{
        width: 100%;
        height: 200px;
        background-color: deeppink;
    }
    div{
        background-color: palegreen;
        width: 100px;
        height: 100px;
        /* overflow: hidden; */
        padding: 20px;
    }
   </style>
<body>
    <div id="big">
        <div class="box">盒子模型</div>
    </div>
</body>
</body>
</html>

效果图：

3.边框（border）

边框是环绕内容区和内边距的边界，我们可以使⽤ border-style 、 border-width 和 border-color 及它们的简写属性 border 来设置边框的样式。其中，border-style 属性是边框中最主要的属性，如果没有设置该属性的话，其他的边框属性也会被忽略。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #big{
        width: 100%;
        height: 200px;
        background-color: deeppink;
        border: 10px solid blueviolet;
    }
    div{
        background-color: palegreen;
        width: 100px;
        height: 100px;
        /* overflow: hidden; */
        padding: 20px;
        border: 20px dotted black;
    }
   </style>
<body>
    <div id="big">
        <div class="box">盒子模型</div>
    </div>
</body>
</body>
</html>

效果图：

4.外边距（margin）

外边距位于盒⼦模型的最外围，是边框之外的空间。我们通常使⽤ margin-top 、 margin-bottom 、 margin-left 、 margin-right 及它们的简写属性 margin 来设置外边距，即控制盒子和盒子之间的距离。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        background-color: palegreen;
        width: 100px;
        height: 100px;
        border: 20px dashed black;
        padding: 20px;
        margin: 15px;
    }
    .box2{
        background-color: rgb(255, 247, 0);
        width: 50px;
        height: 50px;
        border: 20px dotted rgb(255, 0, 0);
        padding: 20px;
        margin: 20px;
    }
   </style>
<body>
        <div class="box">盒子模型</div>
        <div class="box2"></div>
</body>
</body>
</html>

运行结果：

5.元素的宽度和高度

当我们使⽤CSS中的 width 和 height 属性设置元素的宽度和⾼度时，实际上设置的只是元素内容区域的宽度和高度，元素的实际宽度和⾼度还取决于其他因素

总结

● 总宽度： width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

● 总高度：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom