盒子模型
HTML中的所有元素都可以看作是一个盒子，在CSS中，盒子模型，即"box model"，这一术语是用来设计和布局时使用。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- Margin(外边距)——清除边框外的区域，外边距是透明的。
- Boeder(边框)——围绕在内边距和内容外的边框。
- Padding(内边距)——清除内容周围的区域，内边距是透明的。
- Content(内容)——盒子的内容，显示文本和图像。
边框属性
- 边框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性</title>
<style>
.bxo1{border-style:none;}
.bxo2{border-style:dotted;}
.bxo3{border-style:dashed;}
.bxo4{border-style:solid;}
.bxo5{border-style:double;}
.bxo6{border-style:groove;}
.bxo7{border-style:ridge;}
.bxo8{border-style:inset;}
.bxo9{border-style:outset;}
.bxo10{border-style:hidden;}
</style>
</head>
<body>
<p class="bxo1 ">无边框。</p>
<p class="bxo2 ">虚线边框。</p>
<p class="bxo3 ">虚线边框。</p>
<p class="bxo4 ">实线边框。</p>
<p class="bxo5 ">双边框。</p>
<p class="bxo6 "> 凹槽边框。</p>
<p class="bxo7 ">垄状边框。</p>
<p class="bxo8 ">嵌入边框。</p>
<p class="bxo9 ">外凸边框。</p>
<p class="bxo10 ">隐藏边框。</p>
</body>
</html>
- 边框宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框宽度</title>
<style>
.p1
{
border-style:solid;
border-width:5px;
}
.p2
{
border-style:solid;
border-width:medium;
}
.p3
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="p1">文本</p>
<p class="p2">文本</p>
<p class="p3">文本</p>
</body>
</html>
注意:"border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。
- 边框颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框颜色</title>
<style>
.p1
{
border-style:solid;
border-color:blue;
}
.p2
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>
<p class="p1">实线蓝色边框</p>
<p class="p2">实线绿色边框</p>
</body>
</html>
注意:"border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。
- 设置各边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置各边</title>
<style>
p
{
border-top-style:dotted;
border-right-style:groove;
border-bottom-style:inset;
border-left-style:solid;
}
</style>
</head>
<body>
<p>四个不同的边界样式。</p>
</body>
</html>
外边距(Margin)
- 单边外边距属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单边外边距属性</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>
- 简写
margin:25px 50px 75px 100px;
| 上边距 | 25px |
|---|---|
| 右边距 | 50px |
| 下边距 | 75px |
| 左边距 | 100px |
margin:25px 50px 75px;
| 上边距 | 25px |
|---|---|
| 左右边距 | 50px |
| 下边距 | 75px |
margin:25px 50px;
| 上下边距 | 25px |
|---|---|
| 左右边距 | 50px |
margin:25px;
| 所有的4个边距 | 25px |
|---|
内边距(Padding)
- 单边内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单边内边距</title>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body>
</html>
- 简写
padding:25px 50px 75px 100px;
| 上填充 | 25px |
|---|---|
| 右填充 | 50px |
| 下填充 | 75px |
| 左填充 | 100px |
padding:25px 50px 75px;
| 上填充 | 25px |
|---|---|
| 左右填充 | 50px |
| 下填充 | 75px |
padding:25px 50px;
| 上下填充 | 25px |
|---|---|
| 左右填充 | 50px |
padding:25px;
| 所有的填充 | 25px |
|---|