盒 子 模 型 的 介 绍
盒子概念
- 页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便进行布局
- 浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们称之为盒子
盒子模型
- CSS中规定每个盒子分别由以下内容构成
- 内容区域（content）
- 内边距区域（padding）
- 边框区域（border）
- 外边距区域（margin）
盒子模型与现实中的包装盒类似
盒 子 模 型 内 容 区 域 宽 高 设 置
边 框 border 相 关 属 性 设 置
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线solid、虚线dashed、点线dotted、双实线double |
| 边框颜色 | border-color | 颜色取值 |
边框border的连写形式
- 单个取值的连写，取值之间以空格隔开
- 如：border：10px solid red;
边框border的单方向设置
- 只给盒子的某个方向单独设置边框
- border - 方位名词
- 如：border-top：10px solid red;
- 顶部 top
- 底部 bottom
- 左边 left
- 右边 right
- 如：border-top：10px solid red;
盒子实际大小计算公式
- 盒子实际大小（宽度）=左边框+内容宽度+右边框
内边距（padding）-取值
- 作用：设置边框与内容区域之间的距离
- 常见取值
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding：10px; | 上右下左设置为10px |
| 两个值 | padding：10px 20px; | 上下设置为10px、左右设置为20px |
| 三个值 | padding：10px 20px 30px; | 上设置为10px、左右设置为20px、下设置为30px |
| 四个值 | padding：10px 20px 30px 40px; | 上设置为10px、右设置为20px、下设置为30px、左设置为40px |
规则：从上开始赋值，顺时针赋值
内边距（padding）-单方向设置
- padding - 方位名词
- padding-top：20px;
新 浪 导 航 栏 实 例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.box a {
height: 40px;
width: 80px;
display: inline-block;
text-align: center;
line-height: 40px;
color: #4c4c4c;
text-decoration: none;
font-size: 12px;
}
.box a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
</html>
外边框（margin）-取值
- 作用：设置边框以外，盒子与盒子之间的距离
- 属性名：margin
- 常见取值：
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | margin：10px; | 上右下左设置为10px |
| 两个值 | margin：10px 20px; | 上下设置为10px、左右设置为20px |
| 三个值 | margin：10px 20px 30px; | 上设置为10px、左右设置为20px、下设置为30px |
| 四个值 | margin：10px 20px 30px 40px; | 上设置为10px、右设置为20px、下设置为30px、左设置为40px |
规则：从上开始赋值，顺时针赋值
外边框（margin）-单方向设置
| 方向 | 属性 | 效果 |
|---|---|---|
| 水平方向 | margin-left | 让当前盒子往右移动 |
| 水平方向 | margin-right | 让右边盒子往右移动 |
| 垂直方向 | margin-top | 让当前盒子往下移动 |
| 垂直方向 | margin-bottom | 让下面盒子往下移动 |
外边距折叠现象
行内元素的 margin 和 padding 无效情况
- 场景：给行内元素设置margin和padding时
- 结果：
- 水平方向的margin和padding布局中有效
- 垂直方向的margin和padding布局中无效
