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

一文搞懂CSS盒子模型

news 来源：原创 2024/5/7 7:09:10

一文搞懂CSS盒子模型

1.盒子模型概述
2.宽高：width、height
3.边框：border
4.内边距：padding
5.外边距：margin

1.盒子模型概述

在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间

在这里插入图片描述

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding），二是理解多个盒子之间的相互关系（往往是margin）

盒子模型是由4个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）

在这里插入图片描述

2.宽高：width、height

元素的宽度（width）和高度（height）是针对内容区而言的🙌

只有块元素才可以设置width和height，行内元素是无法设置width和height的。

3.边框：border

例如：

border:1px solid red;

第1个值指的是边框宽度（border-width），第2个值指的是边框外观（border-style），第3个值指的是边框颜色（border-color）

4.内边距：padding

内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的

内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left

语法：

padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;

“padding:20px;”表示4个方向的内边距都是20px。

“padding:20px 40px;”表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。

“padding:20px 40px 60px 80px;”表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。

实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>IMUSTCTF</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			padding: 80px 20px;
		}
	</style>
</head>
<body>
	<div>
		我的世界
	</div>
</body>
</html>

在这里插入图片描述

5.外边距：margin

外边距margin，指的是边框到“父元素”或“兄弟元素”之间的那一部分。外边距是在元素边框的外部的

外边距分为4个方向：margin-top、margin-right、margin-bottom、margin-left

实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>IMUSTCTF</title>
	<style type="text/css">
		div {
			width: 200;
			height: 200px;
			padding: 80px 20px;
			margin: 50px 50px;
		}
	</style>
</head>
<body>
	<div>
		我的世界
	</div>
</body>
</html>