CSS Part2（盒子模型）

heyunh

已于 2022-04-19 23:53:19 修改

阅读量1k

点赞数

文章标签：前端 css css3

于 2022-04-19 23:48:46 首次发布

本文链接：https://blog.youkuaiyun.com/Miratowa_/article/details/124281065

版权

本文详细介绍了CSS中的盒子模型，包括盒子的结构、边框属性（样式、宽度、颜色）以及简写方式，外边距margin和填充padding的设置，强调了box-sizing属性在控制元素尺寸中的重要作用。此外，还探讨了盒子模型在网页布局中的应用及其对后续学习的重要性。

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

一、什么是盒子模型？

我们之前学习的HTML所有元素都可以看成一个盒子，CSS盒子模型实质上就是给盒子添加修饰，例如：盒子的内外边距、边框、主体（实际）内容。

下图就是一个盒子的基本结构：
（在谷歌浏览器中可以按下F12键查看网页中元素的盒子模型）
在这里插入图片描述
下面对各部分进行说明：

Margin(外边距)- 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框（可以设置粗细和颜色）。
Padding(内边距) - 边框到内容的距离，内边距是透明的。
Content(内容) - 盒子的内容，显示文本或图像。

接下来对每一个部分的属性进行介绍.

二、边框属性

1.边框样式

边框样式用border-style属性定义，它有以下属性值：

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

以下了解即可：

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

效果图如下：
在这里插入图片描述

2.边框宽度

通过border-width属性为边框指定宽度。它的值可以直接是长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)。

div {
    width: 200px;
    height: 100px;
	border-width: 5px;
	}

需要注意的是，边框宽度必须要先定义盒子边框类型（solid、dotted、dashed），才能定义边框宽度。

3.边框颜色

用border-color属性设置边框的颜色。

颜色有三种表达方式：
①name - 指定颜色的名称，如 “red”；
②RGB - 指定 RGB 值, 如 “rgb(255,0,0)”；
③16进制值 - 如 “#ff0000"或”#f00”。

注意：边框颜色和边框宽度一样，都要先定义边框样式才可以使用！

4.边框属性简写

1.盒子有上下左右四条边，我们可以对四条边分别设置样式。写法如下：

div
{
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

然而上述写法较为繁琐，所以引入了简写方式
(上述代码可简写为下面的第一条)

以border-style为例，有以下四种简写方式：

border-style：(上)solid (右)solid (下)dotted (左)solid；
border-style：(上)solid (左右)dashed (下)dotted；
border-style：(上下)solid (左右)dashed；
border-style：(上下左右)dashed；

在这里插入图片描述
实际项目中可根据需要对盒子的上下左右边框进行修饰。剩下的两个属性border-width、border-color和border-style的使用方式相同。

2.盒子的三个属性（border-style、border-width、border-color）一般会同时使用，从而引出了边框属性的简写方式。

border： border-width border-style border-color；

三个属性用空格隔开，没有顺序要求，但是提倡的写法是边框宽度、边框样式、边框颜色这样的顺序。

border: 5px solid red;

若需要对每条边分别设置三种属性，可以这样写：

       /* 上边框为1px实线红色 */
            border-top: 1px solid red;
       /* 右边框为2px点线蓝色 */
            border-right: 2px dotted blue;
       /* 下边框为3px虚线粉色 */
            border-bottom: 3px dashed pink;
       /* 左边框为2px实线紫色 */
            border-left: 2px solid purple;

三、外边距margin

margin 清除盒子外边框区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

分开设置时：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

简写为：

margin: 100px 50px 100px 50px;

它的简写方式同边框属性，这里不多赘述。

四、填充（内边距）padding

padding（填充）定义元素边框到元素内容之间的距离，即上下左右的内边距。

分开设置时：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

简写为：

padding: 25px 50px 25px 50px;

它的简写方式也同边框属性，这里不多赘述。

内外边距使用时，因为浏览器本身默认有内外边距，所以为了不影响我们想要达到的效果，我们需要清除内外边距，写法如下：

* {
  padding： 0;
  margin: 0;
  }

五、box-sizing属性

在讲box-sizing属性之前，我们先讨论一下盒子实际大小和内外边距及边框宽度的关系。

从盒子模型的图我们可以看出--------盒子实际大小其实是内边距宽度 + 外边距宽度 +边框大小 + 内容大小。

这就意味着当我们给盒子设置了高度height和宽度width后（注意：height和width形成的矩形其实只是内容的大小），如果在之后又给盒子设置了padding和margin值，此时盒子会被内外边距撑大

此时的实际高度=原来的height+上下padding+上下margin
所以要保持展现在网页上的盒子的大小不变的话，就要手动给原来的高度height和宽度width减去后面加的上下和左右内外边距。

但是这样会大大增加前端程序员的工作量，所以我们引入了box-sizing属性。

box-sizing属性可以让一个元素的 width 和 height 中包含 
padding(内边距)、margin（外边距） 和 border(边框)。

添加了box-sizing:border-box后，当我们设置高度height和宽度width后，之后随意改变padding和margin值，盒子本身的大小一直都是width*height 。

下面介绍box-sizing属性的值

值	解释
content-box（默认值）	height和width形成的矩形是内容的大小
border-box	width 和 height 中包含 padding(内边距)、margin（外边距）和 border(边框)
inherit	继承父元素的值

所以给所有元素使用 box-sizing：border-box 是比较推荐的。

* {
  box-sizing: border-box;
  }

六、实时热搜案例

<head>
<style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        a {
            text-decoration: none;

        }
        div {
            border: 1px solid #cacccb;
            width: 250px;
            height: 165px;
            margin: 30px auto;
        }
        div h3 {
            /* font-weight: normal; */
            font-size: 13px;
            color: #00000b;
            border-bottom: 1px dotted #cacccb;
            height: 30px;
            line-height: 30px;
            padding-left: 15px;
        }
        div ul li {
           
            font-size: 11px;
            list-style: none;
            line-height: 23px;
            margin-left: 15px;
        }
        div ul {
            margin-top: 8px;
        }
        div ul li a {
            color: #756f6f;
        }
        div ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div>
<h3>实时热搜</h3>
<ul>
    <li><a href="#">中国经济开门稳来之不易</a></li>
    <li><a href="#">上海新增本土死亡病例7例</a></li>
    <li><a href="#">31省份新增本土“3297+18187”</a></li>
    <li><a href="#">吴尊友发文解读动态清零及相关误解</a></li>
    <li><a href="#">灵堂飞来仙鹤是殡葬服务?官方回应</a></li>
</ul>
    </div>
</body>

效果图：
在这里插入图片描述
需注意的知识点：

 1.五条热搜排列整齐，所以选择无序列表ul>li>a搭建
 2.ul盒子到div盒子外边距的设置
 3.h3盒子与内容内边距的设置
 4.h3盒子下边框点线的设置
 5.链接伪类选择器的使用
 6.通配符选择器设置box-sizing：border-box和清除内外边距

七、总结

有了盒子模型，就会给后面的网页布局带来极大的便利，后续我们就可以通过摆盒子来布局网页，但是我们目前学的盒子摆放起来有极大的局限性，所以下一节我们将会介绍盒子的类型转换、浮动、定位。类型转换可以把块级元素转换为行内元素，从而可以使该块级元素在一行内摆放多个；浮动可以使盒子周围的元素围绕着它进行摆放；定位可以让一个盒子压着另一个盒子。它们可以让网页上的盒子摆放的更加美观，是我们应该重点学习与掌握的。