本文详细介绍了CSS盒子模型，包括内容区(content)、内边距(padding)、边框(border)和外边距(margin)的属性和用法。内容区设置元素的宽度和高度；内边距调整元素内部空间；边框可定制宽度、样式和颜色；外边距影响元素间的间距，不影响元素尺寸。了解这些概念对于精确布局和美化网页至关重要。
一、什么是盒子模型
1. 定义：CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
2.别称：盒模型、盒子模型、框模型（box model）
3. 四个属性：
内容(content)，也就是元素的 width、height
内边距(padding)
边框(border)
外边距(margin
注意：
影响盒模型的大小：内容区、内边距、边框，不关外边距的事。
①内容区(content)
元素中所有的子元素和文本内容都在内容区中排列
width 设置内容的宽度
height 设置内容的高度
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列
width 设置内容的宽度
height 设置内容的高度
*/
#box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
土用解在。
</div>
</body>
</html>展示为 宽：100px 高：100px
②内边距(padding)
指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：
padding-top 上内边距
padding-right 右侧内边距
padding-bottom 底部内边距
padding-left 左侧内边距
来设置四个方向的内边距
为 <div> 元素的所有四个边设置不同的内边距：
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}③边框(border)
1-1. border-width 默认值一般是3px
使用border-width可以分别指定四个边框的宽度
4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 上下左右
1-2. 除了border-width，CSS中还提供了四个border-xxx-width
xx的值可能是top right bottom left
专门用来设置指定边的宽度
1-3.border-color 设置边框的颜色 默认值是黑色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
1-4.border-style
设置边框的样式
可选值：
none，默认值，没有边框
solid 实线
double 双线
dashed [dæʃt] 虚线
dotted ['dɔtid] 点状边框
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
border
边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
而且没有任何的顺序要求
border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*3:边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式 宽度 样式 颜色
*/
#box {
width: 100px;
height: 100px;
border-right :10px solid pink;
background-color: gold;
}
</style>
</head>
<body>
<div id="box">
土用解在。
</div>
</body>
</html>展示为 宽：100px 高：100px 右边框为10px 样式：为实线且样式的颜色为粉色
③ 外边距(margin）
外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。
盒子有四个方向的外边距：
margin-top 上外边距，设置一个正值，元素会向下移动
margin-right 默认情况下设置margin-right不会产生任何效果
margin-bottom 下外边距，设置一个正值，其下边的元素会向下移动，挤别人
margin-left 左外边距，设置一个正值，元素会向右移动
由于页面中的元素都是靠左靠上摆放的，
所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置（挤别人）
外边距也可以指定为一个负值，
如果外边距设置的是负值，则元素会向反方向移动
外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
规则和padding一样
代码展示
为 <p> 元素的所有四个边设置不同的外边距：
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}小技巧之 Margin - 简写属性：为了缩减代码，可以在一个属性中指定所有外边距属性。
margin: 25px 50px 75px 100px;
上外边距是 25px
右外边距是 50px
下外边距是 75px
左外边距是 100px
演示
p {
margin: 25px 50px 75px 100px;
}总结：
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定
扫一扫
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
