CSS盒子模型

最新推荐文章于 2024-11-16 14:48:02 发布

CodePoorFish

最新推荐文章于 2024-11-16 14:48:02 发布

阅读量540

点赞数

分类专栏：前端笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43350001/article/details/122768342

版权

前端笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS盒子模型，包括内容区、内边距、外边距和边框的概念及属性。内容区是元素的核心，内边距提供了内容与边框的空间，外边距则决定了元素间的间距。边框属性包括宽度、样式和颜色。此外，文章还探讨了宽度和高度如何应用于块元素和行内元素，并通过实例展示了它们的效果。

摘要由CSDN通过智能技术生成

概述

在CSS盒子模型理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。下图为CSS盒子模型的具体结构。
在这里插入图片描述
一个页面由很多这样的盒子组成，这些盒子之间会互相影响；每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
在这里插入图片描述

1、内容区

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的三部分都是可选的。

内容区有三个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区content而言的，并不包括padding部分。

当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方法。

2、内边距

内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。

内边距的属性有五种，即padding-top、padding-bottom、padding-left、padding-right以及综合以上四个方向的简写内边距属性padding。使用这五种属性可以指定内容区与各方向边框之间的距离。

3、外边距

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起。

外边距的属性也有五种：margin-top、margin-bottom、margin-left、margin-right以及综合了以上四个方向的简写外边距属性margin。

同时，CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果。

4、边框

边框属性有border-width、border-style、border-color以及综合了三类属性的简写边框属性border。其中，border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。

宽和高（width和height）

元素的宽度（width）和高度（height）是针对内容区而言的。只有块元素才可以设置width和height，行内元素是无法设置width和height的（不考虑inline-block元素）。
示例（块元素设置width和height）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>块元素设置width和height</title>
    <style>
        .div1{
            width: 100px;
            height: 40px;
            border: 1px solid red;
        }
        .div2{width: 100px;
            height: 80px;
            border: 1px solid rebeccapurple;}
    </style>

</head>
<body>
    <div class="div1">CSDN</div>
    <div class="div2">CSDN</div>
</body>
</html>

在这里插入图片描述
通过这个例子可以很直观地看出来，块元素设置的width和height会生效。此外，要是没有给块元素设置width，那么块元素就会延伸到整行。

示例（行内元素设置width和height）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>行内元素设置width和height</title>
    <style>
        .s1{
            width: 100px;
            height: 40px;
            border: 1px solid red;
        }
        .s2{width: 100px;
            height: 80px;
            border: 1px solid rebeccapurple;}
    </style>

</head>
<body>
    <span class="s1">CSDN</span>
    <span class="s2">CSDN</span>
</body>
</html>

在这里插入图片描述
通过这个例子可以很直观地看出来，行内元素设置的width和height无法生效，它的宽度和高度只能由内容区撑起来。

边框（border）

对于border属性，更经常使用的是简写形式，即直接书写border后加各种属性。
比如：

border: 1px solid red;

说明
第一个值指的是边框宽度（border-width），第二个值指的是边框外观（border-style），第三个值指的是边框颜色（border-color）。

内边距（padding）

内边距（padding），又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。内边距分为四个方向：padding-top、padding-right、padding-bottom和padding-left。跟border属性一样，padding属性也有简写形式。在实际开发中，我们往往使用简写形式，如下：
padding:20px;表示四个方向的内边距都是20px。

padding:20px 40px;表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。

padding:20px 40px 60px 80px;表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>内边距padding</title>
    <style>
        .div1{
            display: inline-block;
            padding: 40px 80px;
            background-color: #ffdead;
        }
        .div2{
            display: inline-block;
            padding: 40px;
            background-color: #42aff8;
        }
    </style>

</head>
<body>
    <div class="div1">CSDN</div>
    <div class="div2">CSDN</div>
</body>
</html>

在这里插入图片描述

外边距（margin）

外边距（margin），指的是边框到“父元素”或“兄弟元素”之间的那一部分。外边距是在元素边框的外部。padding和margin的区别在于：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。跟padding一样，margin也有简写形式。在实际开发中，我们往往使用简写形式。

margin:20px;表示四个方向的外边距都是20px。

margin:20px 40px;表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。

margin:20px 40px 60px 80px;表示margin-top为20px，margin-right为40px，margin bottom为60px，margin-left为80px。大家按照顺时针方向记忆就可以了。