CSS盒子模型

约 2163 字大约 7 分钟

2025-10-15

所有的元素都被一个个“盒子”包围着，盒子模型可以实现准确布局、是处理元素排列的关键

盒子分类

区块盒子block

盒子会产生换行
width 和 height 属性可用
默认宽度是父元素空间的100%
内边距、外边距和边框会撑大元素
常见的有：div、p、h、ul、table等

行内盒子inline

盒子不会产生换行
尺寸由内容决定，width 和 height 属性不可用
垂直方向上内边距、外边距不可用
仅水平方向的内边距、外边距可用
常见的有：span、em、a、strong等

盒子模型的组成

这里所说的盒子模型通常指区块盒子，包含内容、内边距、外边距、边框四部分。

内容

显示内容的区域，由内容或指定内容盒子(box-sizing: content-box;)宽高来决定大小

内边距 padding

让盒子内容和边框保留一定的距离,更美观

根据取值数量的不同设置效果不同,语法:


.box {
  padding: 内边距值;
  padding: 上内边距 下内边距;
  padding: 上内边距 左右内边距 下内边距;
  padding: 上内边距 右内边距 下内边距 左内边距;
}

边框 border

边框包住内容和内边距

语法：

border: 边框粗细 边框样式 边框颜色;
/* 
边框样式:
  dotted 圆点虚线
  dashed 短横虚线
  solid 实线
*/

使用场景：

设置盒子边框样式。

.box1 {
  border: 1px dashed red;
}

加上方位名词可以单独更改某一条边框

.box2 {
  border-top: 1px dashed red;
  border-bottom: 1px dashed blue;
  border-left: 1px dashed green;
  border-right: 1px dashed yellow;
}

可以使用 border-radius 设置圆角边框

.box3 {
  border: 1px dashed red;
  border-radius: 10px;
}

小技巧
长方形box设置border-radius: 50%可实现胶囊效果
正方形box设置border-radius: 50%可实现圆形效果

分别对每个角设置圆角

border-radius: 左上右上右下左下;

不需要圆角的设置为0即可

.box4 {
  border: 1px dashed red;
  border-radius: 10px 20px 0 20px;
}

外边距 margin

外边距是盒子周围一圈看不到的空间,用于控制盒子与盒子之间的距离

根据取值数量控制不同方向的边距,

.box1 {
  margin: 上下左右外边距值;
  margin: 上外边距 下外边距;
  margin: 上外边距 左右外边距 下外边距;
  margin: 上外边距 右外边距 下外边距 左外边距;
}

添加方位名词还可单边设置,如:

.box2 {
  margin-left : 上下左右外边距值;
  margin-right: 上外边距 下外边距;
  margin-top: 上外边距 左右外边距 下外边距;
  margin-bottom: 上外边距 右外边距 下外边距 左外边距;
}

小技巧
在块级盒子width确定的前提下, margin:0 auto;可以实现此盒子在视口水平居中
想让行内盒子水平居中的方式是:用块级盒子包裹行内盒子,再让块级盒子居中。

重点1：margin折叠

当两个块级元素为兄弟元素并且相邻时，取两个相邻边中最大的 margin 值作为相邻边的外边距

重点2：margin塌陷

当发生以下场景时,区块元素上下外边距会出现塌陷情况:

当两个块级元素为嵌套(父子)关系时
给子元素上下外边距会让父盒子塌陷移动

示例:

我们给子盒子添加margin-top: 20px 时，想让子盒子形成这样效果

但实际上会让父盒子一起向下:

有三种解决方案:

给父盒子添加上边框(border-top)
给父盒子添加上内边距(padding)
给父盒子添加overflow: hidden;属性

盒子模型的尺寸计算

在CSS盒子模型的默认定义里,除了指定width和height来控制盒子尺寸之外,padding和border也会影响盒子尺寸.

如何控制盒子的尺寸不受padding和border影响呢? 使用box-sizing。

`box-sizing`

box-sizing用于定义元素的盒模型计算方式,控制元素的width和height是否包含padding和border

常用属性值:

属性值	描述
`content-box`	默认值,盒子的`width`和`height`仅控制内容区域的尺寸,`padding`和`border`将在原有宽高基础上向外扩张
`border-box`	盒子的`width`和`height`控制盒子边框的尺寸，此时`padding`和`border`将会向内扩张，不会改变合盒子的宽高

在开发中常常将所有的盒模型都改成 border-box 形式，代码如下:

* {
  box-sizing: border-box;
}

盒子背景

background 用于设置盒子背景相关属性，包括背景颜色，背景图片，背景位置，背景重复方式等

属性	作用	常用值	示例代码
`background-color`	设置背景颜色	颜色值	`background-color: #f0f0f0;`
`background-image`	设置背景图片	`url(path/to/img`.jpg)	`background-img: url(../img.png);`
`background-repeat`	控制背景图片是否重复	`repeat`(默认), `no-repeat`, `repeat-x`, `repeat-y`	`background-repeat: no-repeat;`
`background-position`	定位背景图片位置	`x y`值, 如`center top;`, `30% 50%`	`background-position: center;`
`background-size`	调整背景图片尺寸	`auto`(默认), `cover`(覆盖),`contain`(包含),`px`,`%`	`background-size: cover;`
`background-attachment`	背景是否随页面滚动	`scroll`(默认,随块滚动), `fixed`(视口内固定，不随块滚动)	`background-attachment: fixed;`

注意：
background-attachment: fixed; 和 background-position 同时存在时，图像的位置是相对于整个视口(浏览器能看到的部分)来做定位的，有可能出现图像不在块级元素区域内，其实它是在整个视口的 position 位置

背景有一种复合写法，可以一句话设置以上所有的属性：

/* 不限顺序 */
.box{
  background: [color] [image] [repeat] [attachment] [position]/[size] ;
}

.box{
    background: pink url(../../ldh.png) no-repeat fixed center/cover;
}

渐变效果

通过对background添加 linear-gradient()（线性渐变）和 redial-gradient()（径向渐变）属性为元素添加渐变效果

属性/方法	描述	示例代码
`linear-gradient(方向1,颜色1 位置1,颜色2，位置2...)`	线性渐变（方向可控）	`background:linear-grandient(to right,#ff6b6b,#4ecdc4)` `background-img:linear-grandient(90deg,#ff6b6b 30%,#4ecdc4 70%)`
`redial-gradient(形状,颜色1，颜色2...)`	位置渐变（形状和位置可控）	`background:redial-grandient(circle,#ff9a9e,#fad0c4)`

背景渐变

设置整个块级元素有一个渐变的背景

style.css

.gradient-box {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #ff0000, #00ff00);
}

index.html

<body>
  <div class="gradient-box"></div>
</body>

文字渐变

背景不仅仅可以设置在块中，也可以设置在块中的文字上:

style.css

.gradient-text {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(to right, #506d52 0%, #ff3434 30%);
  /* -webkit- 前缀用于兼容 WebKit 内核的浏览器（如 Chrome、Safari） */
  -webkit-background-clip: text;
  /* 背景渐变以文字的形式裁剪 */
  background-clip: text;
  /* 文字颜色设为透明，使背景渐变可见 */
  color: transparent;
}

index.html

<body>
  <div class="gradient-text">我是渐变的文字,你喜欢吗?</div>
</body>

阴影效果

box-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [阴影扩展] [阴影颜色]

开发中我们常用的是外阴影，示例如下：

/* box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
向右下角偏移5px，模糊半径10px的灰色阴影。 */
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

但是添加inset参数可以设置内阴影，让阴影向内部扩散：

box-shadow: inset 0 0 20px rgba(0,0,0,0.5);

过渡效果

过渡效果(Transition)用于在元素属性值发生变化时，平滑地过度。

语法:

transition: [过度属性] [过渡时间];
/* 过渡属性：

all: 所有属性都过渡

尺寸：width, height, padding, margin

颜色：color, background-color, border-color

位置：top, left, right, bottom

变换：transform

透明度：opacity

可见性：visibility

*/

一个按钮悬停效果示例：

.button {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  
  /* 简写：背景色和颜色同时过渡 */
  transition: background-color 0.3s, color 0.3s;
}

.button:hover {
  background: #2980b9;
  color: #ecf0f1;
}

卡片悬停动画：

.card {
  transform: scale(1);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  
  /* 简写：变换和阴影同时过渡 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

表单输入焦点效果

.input {
  border: 2px solid #bdc3c7;
  
  /* 简写：边框颜色和阴影同时过渡 */
  transition: border-color 0.3s, box-shadow 0.3s;
}

.input:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}