CSS 盒子模型
在网页布局的世界里,CSS 盒子模型是一切布局的基础。无论是简单的文本段落还是复杂的页面组件,都可以被看作是一个个矩形的"盒子"。掌握盒子模型的工作原理,是成为前端开发者的必备技能。
详细阐述了 CSS 盒子模型的构成,包括内容区、内边距、边框和外边距的作用及相互关系。重点解析了外边距合并(塌陷)现象及其三种解决方案。此外,介绍了圆角边框、盒子阴影和文字阴影的语法参数与实战案例,展示了如何通过 CSS 属性提升页面视觉质感与交互体验。

在网页布局的世界里,CSS 盒子模型是一切布局的基础。无论是简单的文本段落还是复杂的页面组件,都可以被看作是一个个矩形的"盒子"。掌握盒子模型的工作原理,是成为前端开发者的必备技能。
CSS 盒子模型是一种将 HTML 元素视为矩形盒子的布局模型,每个盒子由四个部分组成:
这四个部分共同决定了元素在页面中的大小和位置,是页面布局的三大核心之一(另外两个是浮动和定位)。
边框是盒子最外层的可见边界,由三个属性共同定义:宽度、样式和颜色。
#div1 {
width: 300px;
height: 200px;
border-width: 10px; /* 边框宽度 */
border-style: solid; /* 边框样式 */
border-color: pink; /* 边框颜色 */
}
也可以使用简写形式,顺序可以任意调整:
#div1 {
border: 10px solid pink; /* 宽度 样式 颜色 */
}
边框样式是必须指定的属性,常用值包括:
solid:实线边框dashed:虚线边框dotted:点线边框我们可以单独设置盒子四个方向的边框,利用 CSS 的层叠性可以简化代码:
#div2 {
width: 200px;
height: 200px;
border: 5px solid blue; /* 先设置四边为蓝色 */
border-top: 5px solid red; /* 再单独设置上边框为红色 */
}
重要提示:边框会增加盒子的实际大小。例如,一个宽度为 100px 的盒子,如果设置了 5px 的边框,其实际宽度将变为 110px(100 + 5×2)。
解决方案:
表格边框默认会有重叠问题,使用 border-collapse: collapse 可以合并相邻边框:
table, td, th {
border: 1px solid pink;
border-collapse: collapse; /* 合并相邻边框 */
}
内边距用于控制内容区与边框之间的距离,让内容不会紧贴边框。
内边距有四个方向的属性:
padding-top:上内边距padding-right:右内边距padding-bottom:下内边距padding-left:左内边距也可以使用简写形式,规则如下:
.div3 {
/* 1 个值:上下左右都为 5px */
/* padding: 5px; */
/* 2 个值:上下 5px,左右 10px */
/* padding: 5px 10px; */
/* 3 个值:上 5px,左右 10px,下 20px */
/* padding: 5px 10px 20px; */
/* 4 个值:上 5px,右 10px,下 20px,左 30px(顺时针方向) */
padding: 5px 10px 20px 30px;
}
与边框类似,指定了宽高的盒子设置内边距会使盒子变大。例如,一个 200×200px 的盒子,设置 10px 内边距后,实际大小会变为 220×220px。
解决方案:如果需要保持盒子总大小不变,应从 width/height 中减去内边距的总和。
当导航栏中每个菜单项的字数不同时,使用内边距代替固定宽度可以实现更灵活的布局:
#nav {
height: 41px;
line-height: 41px; /* 垂直居中 */
background-color: #fcfcfc;
}
#nav a {
display: inline-block;
padding: 0 20px; /* 左右内边距撑开盒子 */
text-decoration: none;
}
这种方式能保证每个菜单项的内容与边缘距离一致,且能自适应内容长度。
如果盒子没有指定 width/height 属性,设置内边距不会撑开盒子大小:
.div5 {
width: 300px;
height: 100px;
background-color: pink;
}
.div5 p {
padding: 50px; /* p 元素没有指定宽高,不会超出父元素 */
}
外边距控制盒子与其他盒子之间的距离,其语法与内边距类似。
外边距同样有四个方向的属性:
margin-top:上外边距margin-right:右外边距margin-bottom:下外边距margin-left:左外边距简写规则与 padding 完全一致,这里不再赘述。
外边距最常用的技巧之一是实现块级元素的水平居中,需要满足两个条件:
.header {
width: 500px;
height: 200px;
background-color: skyblue;
margin: 100px auto; /* 上下 100px,左右自动居中 */
}
对于行内元素或行内块元素,水平居中需要给其父元素设置 text-align: center。
使用 margin 定义垂直方向的外边距时,可能会出现外边距合并的现象。当父元素没有设置'阻隔'(如边框、内边距、overflow 等)时,父元素的 margin-top 会与子元素的 margin-top 合并,表现为:
例如:
#father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
}
#son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px; /* 会导致父元素一起下移 */
}
解决方法:
border: 1px solid transparent;padding: 1px;overflow: hidden(推荐,不改变盒子大小)#father {
/* 其他样式不变 */
overflow: hidden; /* 解决外边距塌陷 */
}
网页中很多元素(如 ul、p 等)会自带默认的内外边距,且不同浏览器表现不一致。因此,布局前通常会先清除这些默认样式:
* {
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
注意:行内元素为了兼容性,建议只设置左右方向的内外边距,上下方向可能不起作用(转换为块级或行内块元素后可正常使用)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
/* 注意,这句话应为我们使用 CSS 时的第一句话 */
* {
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
/* 1. border */
#div1 {
width: 300px;
height: 200px;
border-width: 10px;
border-style: solid;
border-color: pink;
}
/* 2. 边框分开写法 */
#div2 {
width: 200px;
height: 200px;
border: 5px solid blue;
border-top: 5px solid red;
}
/* 3. 表格细线边框 */
table, td, th {
border: 1px solid pink;
border-collapse: collapse;
}
/* 4. 内边距 padding */
.div3 {
width: 200px;
height: 200px;
background-color: pink;
padding: 5px 10px 20px 30px;
}
/* 5. 内边距的应用 */
#nav {
height: 41px;
line-height: 41px;
background-color: #fcfcfc;
}
#nav a {
display: inline-block;
padding: 0 20px;
font-size: 15px;
color: #4c4c4c;
text-decoration: none;
}
#nav a:hover {
background-color: #eee;
color: #ff8500;
}
/* 6. 外边距 margin */
.header {
width: 500px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
}
/* 7. 外边距合并 */
#father {
width: 400px;
height: 400px;
background-color: purple;
overflow: hidden;
}
#son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<table align="center">
<thead><tr><th>排名</th><th>关键词</th></tr></thead>
<tbody><tr><td>1</td><td>鬼吹灯</td></tr></tbody>
</table>
<div class="div3">这是盒子模型的内边距测试</div>
<div id="nav"><a href="">新浪微博</a></div>
<div class="header"><span>里面的文字,为行内元素</span></div>
<div id="father"><div id="son"></div></div>
</body>
</html>
在网页设计中,细节决定品质。圆角边框、盒子阴影和文字阴影这三个 CSS 属性,虽然看似简单,却能瞬间提升页面的精致度和立体感。
默认情况下,HTML 元素的边框都是直角的,显得生硬刻板。border-radius 属性通过设置"圆角半径",能让元素边缘呈现平滑的弧形效果,是现代 UI 设计的基础。
圆角效果的原理是在元素的每个角落绘制一个圆形(或椭圆),圆形与边框的交集形成弧形边缘。border-radius 的值就是这个圆形的半径,值越大,圆角越明显。
/* 基础语法 */
selector {
border-radius: length; /* 可以是 px、% 等单位 */
}
圆形效果
当元素是正方形时,将 border-radius 设置为宽度的 50%,即可得到完美圆形:
.yuanxing {
width: 300px;
height: 300px; /* 宽高相等的正方形 */
background-color: pink;
border-radius: 50%; /* 半径=宽高的一半,形成圆形 */
}
圆角矩形
对于长方形,将 border-radius 设置为高度的一半,可得到两侧半圆的胶囊形:
.juxing {
width: 300px;
height: 100px; /* 高度是宽度的 1/3 */
background-color: pink;
border-radius: 50px; /* 50px = 100px 高度的一半 */
}
自定义不规则圆角
border-radius 支持为四个角分别设置不同半径,顺序为左上角→右上角→右下角→左下角(顺时针):
.radius1 {
width: 200px;
height: 200px;
background-color: pink;
/* 单独设置左上角圆角 */
border-top-left-radius: 30px;
/* 也可简写:border-radius: 10px 20px 30px 40px; */
}
现实世界中,物体总会因为光线产生阴影,box-shadow 属性正是通过模拟这种光影效果,让平面的元素产生立体感。
selector {
box-shadow: h-shadow v-shadow blur spread color inset;
}
各参数含义:
h-shadow:必需,水平阴影位置(正值向右,负值向左)v-shadow:必需,垂直阴影位置(正值向下,负值向上)blur:可选,模糊距离(值越大,阴影越模糊)spread:可选,阴影尺寸(正值扩大阴影,负值缩小)color:可选,阴影颜色(常用 rgba 设置半透明)inset:可选,将外阴影改为内阴影(默认是外阴影,不可写 outset)hover 交互阴影
鼠标悬浮时显示阴影,提升交互体验:
.shadow1 {
width: 200px;
height: 200px;
background-color: pink;
transition: box-shadow 0.3s; /* 平滑过渡 */
}
.shadow1:hover {
/* 鼠标经过时显示阴影 */
box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}
基础阴影效果
为元素添加轻微阴影,增强层次感:
.shadow1 {
width: 200px;
height: 200px;
background-color: pink;
/* 水平 11px、垂直 17px、模糊 14px、半透明黑色阴影 */
box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}
文字作为页面的核心内容,适当的阴影能增强可读性和视觉冲击力。text-shadow 的用法与 box-shadow 类似,但作用对象是文字。
selector {
text-shadow: h-shadow v-shadow blur color;
}
参数与盒子阴影基本一致,只是没有 spread(阴影尺寸)和 inset(内阴影)属性。
#character {
font-size: 50px;
color: orange;
font-weight: 700;
/* 水平 5px、垂直 5px、模糊 6px、半透明黑色阴影 */
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
这段代码会让文字产生轻微的立体感,同时与背景形成更好的区分度。
立体字效果:叠加多个方向的阴影,模拟光照层次感
发光效果:使用与文字同色的阴影,设置较大的模糊值
.glow-text {
color: white;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de;
}
将三个属性结合使用,能快速提升组件质感。例如一个产品卡片:
.product-card {
width: 300px;
padding: 20px;
background: orange;
border-radius: 10px; /* 圆角边框 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* 轻微外阴影 */
}
.product-card h3 {
font-size: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影 */
}
这样的卡片会显得精致且有层次,远胜于生硬的直角和扁平效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框 + 盒子阴影 + 文字阴影</title>
<style>
/* 1. 圆角边框 */
.yuanxing {
width: 300px;
height: 300px;
background-color: pink;
border-radius: 50%;
}
.juxing {
width: 300px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
.radius1 {
width: 200px;
height: 200px;
background-color: pink;
border-top-left-radius: 30px;
}
/* 2. 盒子阴影 */
.shadow1 {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
.shadow1:hover {
box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}
/* 3. 文字阴影 */
#character {
font-size: 50px;
color: orange;
font-weight: 700;
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
.glow-text {
color: aqua;
font-size: 100px;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px aqua;
}
.product-card {
width: 300px;
padding: 20px;
background: orange;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.product-card h3 {
font-size: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<!-- 圆形 -->
<div class="yuanxing"></div>
<!-- 圆角矩形 -->
<div class="juxing"></div>
<div class="radius1"></div>
<!-- 盒子阴影测试 -->
<div class="shadow1"></div>
<!-- 文字阴影测试 -->
<div id="character">你是阴影,我是火影</div>
<div class="glow-text">glow 测试</div>
<div class="product-card">
<h3>大夏境内,诸神禁行</h3>
</div>
</body>
</html>

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML 转 Markdown 互为补充。 在线工具,Markdown 转 HTML在线工具,online
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML 转 Markdown在线工具,online
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online