本文详细介绍了CSS盒子模型，包括概念、边框、内容、内边距和外边距。边框可以通过border-color、border-width和border-style属性进行定制。内容是盒子的核心，其大小可通过width、height和overflow属性控制。内边距padding和外边距margin则影响元素间距，margin允许使用负值。
CSS盒子模型
一、盒子模型的概念
一个独立的盒子模型由内容、边框（border）、内边距（padding）和外边距（margin）4部分组成。
1、border是设定边框线条，盒子的其他部分是相对border而言的。
2、padding是指内容与border之间的距离，padding是透明的。
3、margin是border到图中的最外边虚线的范围，也是透明的。
4、最中间是盒子中显示的内容。
二、边框（border）
在设置边框时，可以分别使用border-color（边框的颜色）、border-width（边框的粗细）和border-style（边框的样式）属性。
1、border-color：用于指定border的颜色，可以是十六进制的值也可以是颜色的名称，如“#000000”、“red”。例如：
border-color:#000000;
2、border-width：用于指定border的粗细程度，其属性值可以是thin、medium和thick，也可以是长度计量值。例如：
border-width:5px;
3、border-style：用于指定border的样式，如果没有设置样式，那么边框的其他属性都不其作用，边框将不存在。其属性值如下：
| 属性值 | 功能描述 |
|---|---|
| none | 无边框（默认值） |
| hidden | 隐藏边框，可以用来解决表格中边框冲突的问题 |
| dotted | 点状边框 |
| dashed | 虚线边框 |
| solid | 实线边框 |
| double | 双线边框 |
| groove | 3D凹槽边框 |
| ridge | 3D凸槽边框 |
| inset | 3D凹边边框 |
| outset | 3D凸边边框 |
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框样式</title>
<style type="text/css">
p{
border-color: #0000FF;
border-width: 5px;
}
</style>
</head>
<body>
<p style="border-style: dotted;">为了正义</p>
<p style="border-style: dashed;">为了正义</p>
<p style="border-style: solid;">为了正义</p>
<p style="border-style: double;">为了正义</p>
<p style="border-style: groove;">为了正义</p>
<p style="border-style: ridge;">为了正义</p>
<p style="border-style: inset;">为了正义</p>
<p style="border-style: outset;">为了正义</p>
</body>
</html>
在CSS中可以对边框的三个属性进行如下设置：
（1）对边框设置不同的属性值。
如果给出一个属性值，表示四边的属性。
如果给出两个相同属性的属性值，那么前者表示上下边框的属性，后者表示左右边框的属性。
如果给出三个相同属性的属性值，那么前者表示上边框的属性，中间的表示左右边框的属性，后者表示下边框的属性。
如果给出四个相同属性的属性值，那么依次表示上，右，下，左边框的属性。
例如：
border-style: dashed dotted solid;
border-width: 15px 17px;
border-color: red;
（2）在一行中同时设置边框的宽度、颜色和样式（无固定顺序）。例如：
border: 1px dashed #000000;
（3） 对一条边框可以设置不同的属性，四条边的名称为border-left（左边框）、border-right（右边框）、border-top（上边框）和border-bottom（下边框）。例如：
border-top-color: blue;
border-left: 1px solid #005500;
4、border-radio：用于创建圆角边框，还可以为元素创建圆角背景。例如：
<html>
<head>
<meta charset="utf-8">
<title>圆角边框、背景</title>
<style type="text/css">
.w1{
/* 创建一个圆角边框 */
border: #0000FF 5px solid;
border-radius: 5px;
}
.w2{
/* 创建一个圆角背景 */
background-color: #3399cc;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="w1">春眠不知晓，<br/>处处闻啼鸟。
<br/>夜来风雨声，<br/>花落知多少。</p>
<p class="w2">草长莺飞二月天，<br/>拂提杨柳醉春烟。
<br/>儿童放学归来早，<br/>忙趁东风放纸鸢。</p>
</body>
</html>
在CSS中可以对边框的圆角属性进行如下设置：
（1）对圆角属性设置不同的属性值。
如果给出一个属性值，表示四个角的属性。
如果给出两个相同属性的属性值，那么前者表示左上角和右下角的属性，后者表示左下角和右上角的属性。
如果给出三个相同属性的属性值，那么前者表示左上角的属性，中间的表示左下角和右上角的属性，后者表示右下角的属性。
如果给出四个相同属性的属性值，那么依次表示左上角、右上角、右上角和左下角的属性。
例如：
border-radius: 10px;
border-radius: 1px 2px;
border-radius: 1px 2px 3px;
border-radius: 1px 2px 3px 4px;
（2） 对一条边框可以设置不同的属性，四个角的名称为border-top-left（左上角）、border-top-right（右上角）、border-bottom-right（右下角）和border-bottom-left（左下角）。例如：
border-top-left-radius: 1px;
border-bottom-right-radius: 2px;
5、box-shadow：用于向边框添加阴影。
设置格式如下：
box-shadow：水平偏移值 垂直偏移值 模糊值 尺寸 颜色 类型；
其中水平偏移值和垂直偏移值是必须要设置的，可以为负值；模糊值和尺寸的默认值都为0；颜色默认为黑色；类型默认为外部阴影outset，也可以设置为内部阴影inset。例如：
box-shadow: 4px 5px 3px #969696 inset;
三、内容
内容是盒子模型的核心内容，主要的作用是呈现需要显示的信息。它的大小主要由width、height和overflow属性来设置。
1、width和height属性主要来设置内容的高度和宽度，他们有三种值：自动（auto）、固定值和百分比。
（1）auto：表示根据盒子中的内容自动调整width和height的值。
（2）固定值：一般使用px和em这两个长度计量单位。px为像素值，em为当前文字大小的多少倍。
（3）百分比：设定元素width和height的值占父元素width和height的值的百分比。
2、overflow：用于处理内容太多超出盒子所定义的width和height范围时该怎样处理，它有如下取值：
（1）auto：自动判断内容与盒子height的大小关系，如果不超过，则不显示滚动条；如果超过，则显示滚动条。
（2）hidden：表示当显示的内容超过盒子的height时，不显示溢出的部分。
（3）scroll：表示不管内容的多少，都显示滚动条。
（4）visible：表示当内容超过盒子的height时，溢出的部分显示。为overflow的默认值。例如：
<html>
<head>
<meta charset="utf-8">
<title>盒子内容显示区域的设置</title>
<style type="text/css">
p{
border: #999900 2px solid;
}
.p1,.p2,.p4{
width: 200px;
height: 50px;
}
.p1{
overflow: auto;
}
.p2{
overflow: hidden;
}
.p3{
width: 200px;
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<p>开头 <br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
结尾
</p>
<p class="p1">开头 <br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
结尾
</p>
<p class="p2">开头 <br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
结尾
</p>
<p class="p3">开头 <br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
结尾
</p>
<p class="p4">开头 <br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
结尾
</p>
</body>
</html>
还可以单独定义水平方向和垂直方向上如果超过盒子范围时的处理方式：overflow-x和overflow-y。
四、内边距（padding）
padding主要是设置内容和边框之间的距离。
1、分别设置四个方向的内边距
如果给出一个属性值，表示四个方向的内边距。
如果给出两个相同属性的属性值，那么前者表示上下方向的内边距，后者表示左右方向的内边距。
如果给出三个相同属性的属性值，那么前者表示上方向的内边距，中间的表示左右方向的内边距，后者表示下方向的内边距。
如果给出四个相同属性的属性值，那么依次表示上，右，下，左方向的内边距。
2、对方向单独定义
四个方向的名称为padding-left（左方向）、padding-right（右方向）、padding-top（上方向）和padding-bottom（下方向）。
例如：
padding: 10px;
padding: 10px 30px;
padding: 10px 30px 40px;
padding: 10px 30px 40px 50px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
五、外边距（margin）
主要是为了设置元素和元素之间的距离。设置的方法和内边距一样，但是margin可以为负数。
扫一扫
2753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
