当前位置：首页 > article >正文

re:从0开始的CSS学习之路 7. 盒子模型

article 2024/11/14 13:40:44

1. 盒子模型

盒子模型（box model）：可以把HTML中所有的元素都理解成盒子，用于装内容的容器
目的就是为了将HTML文档中的内容进行归纳整理，方便管理，从而达到布局的效果

内容区 content
边框 border
内边距 padding
外边距 margin

1. 内容区 `content`

元素中所有的子元素和文本等都在内容区中排列
内容区的大小使用width和height属性设置
width 设置内容区的宽度
height 设置内容区的高度

2. 边框 `border`

边框由三个部分组成，缺一不可！

边框的宽度 border-width
1. 可以分别设置四个边框的宽度
  border-top-width
  border-right-width
  border-bottom-width
  border-left-width
2. 可以利用border-width属性直接设置四个边框的宽度
  border-width: 10px 20px 30px 40px; 上右下左（顺时针）
  border-width: 10px 20px 30px; 上左右下（顺时针）
  border-width: 10px 20px; 上下左右
边框的样式 border-style
可选值：
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
1. 可以分别设置四个边框的样式
  border-top-style
  border-right-style
  border-bottom-style
  border-left-style
2. 可以利用border-style直接设置四个边框的样式
  border-style: solid dotted dashed double; （顺时针，和border-width一样）
边框的颜色 border-color
使用方式与border-width一模一样

边框的简写属性：border
border属性可以设置边框所有的样式
border：border-width border-style border-color（顺序无要求）
border-top
border-right
border-bottom
border-left

3. 内边距 `padding`

用于设置内容区域边框之间的距离

可以设置四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
注意：
1. 设置内边距会影响盒子的大小
2. 背景会延伸到内边距

内边距的简写属性：
padding可以直接设置四个方向的内边距
padding: 10px 20px 30px 40px; 上右下左（顺时针）
padding: 10px 20px 30px; 上左右下
padding: 10px 20px; 上下左右
padding: 10px; 上下左右

4. 外边距 `margin`

用于设置盒子与盒子之间的距离，设置外边距并不会影响盒子可见框的大小，但是会影响盒子（其他盒子）的位置

可以设置四个方向的外边距：
margin-top
margin-right
margin-bottom
margin-left
注意：
1. 盒子的排列是由上到下、由左到右进行排列的。因此改变盒子的上外边距和左外边距
  会改变当前盒子的位置
2. 改变盒子的下外边距和右外边距会改变其他盒子的位置
3. 外边距可以设置负值，盒子会向反方向移动

外边距的简写属性
margin 属性可以直接设置四个方向的外边距
margin: 100px 200px 300px 400px; （顺时针，使用方式与padding一样）

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>box model</title>
	.box {
		width: 200px;
		height: 200px;
		background-color: #c7edcc;
	}
	
	.box1 {
		width: 200px;
		height: 200px;
		background-color: #c7edcc;
	
		/* 边框的宽度 */
		/* border-width: 10px; */
		/* border-top-width: 10px;
		border-right-width: 20px;
		border-bottom-width: 30px;
		border-left-width: 40px; */
		/* border-width: 10px 20px 30px 40px; */
		/* border-width: 10px 20px 30px; */
		/* border-width: 10px 20px; */
		/* border-width: 10px; */
	
		/* 边框的样式 */
		/* border-style: solid; */
		/* border-top-style: solid;
		border-right-style: dotted;
		border-bottom-style: dashed;
		border-left-style: double; */
		/* border-style: solid dotted dashed double; */
		/* border-style: solid; */
	
		/* 边框的颜色 */
		/* border-color: red; */
		/* border-color: red yellow blue green; */
	
		/* 边框的简写属性 */
		/* border: 10px solid red; */
	}
	
	.box2 {
		width: 300px;
		height: 300px;
		background-color: #c7edcc;
		border: 1px solid #000;
	
		/* 设置四个方向内边距 */
		/* padding-top: 50px;
		padding-right: 50px;
		padding-bottom: 50px;
		padding-left: 50px; */
		padding: 10px 20px 30px 40px;
		padding: 10px 20px 30px;
		padding: 10px 20px;
		padding: 10px;
	}
	
	.son {
		width: 300px;
		height: 300px;
		background-color: #fde6e0;
	}
	
	.box3,
	.box4 {
		width: 200px;
		height: 200px;
	
	}
	
	.box3 {
		background-color: #c7edcc;
	
		/* 设置盒子的外边距 */
		/* margin-top: 100px;
		margin-left: 100px;
		margin-bottom: 100px;
		margin-right: 100px; */
		margin: 100px 200px 300px 400px;
	}
	
	.box4 {
		background-color: #fde6e0;
		margin-left: -100px;
	}
</head>

<body>
	<div class="box"></div>
	<div class="box1"></div>
	<div class="box2">
		<div class="son"></div>
	</div>

	<div class="box3"></div>
	<div class="box4"></div>
</body>

</html>