CSS学习笔记7-盒子模型（box model）

最新推荐文章于 2024-04-29 21:14:52 发布

糯米味儿的粽子

最新推荐文章于 2024-04-29 21:14:52 发布

阅读量502

点赞数

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/emmm520/article/details/119881368

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS学习笔记7——盒子模型（box model）

盒子模型介绍

CSS盒模型可以看作是一个盒子，用来装东西的容器，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。在网页中，每个盒子都有自己的位置，大小，还影响着其它盒子的位置和大小。

盒子模型图示如下：
在这里插入图片描述

图源——菜鸟教程

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
width和height-内容的宽度、高度（不是盒子的宽度、高度）。

边框（border）

边框属性

边框的颜色：border-方向（top bottom left right）-color

边框的粗细：border-方向-width

边框的样式：border-方向-style

常用边框样式如下：

属性	描述
none	默认值，无边框，不受任何指定的 border-width 影响
hidden	隐藏边框，IE浏览器不支持
dotted	点线
dashed	虚线
solid	实线
double	双线边框，两条线及其间隔宽度之和等于指定的border-width 值
groove	根据 border-color 定义 3D 凹槽
ridge	根据 border-color 定义 3D 凸槽
inset	根据 border-color 定义 3D 凹边
outset	根据 border-color 定义 3D 凸边

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型——边框</title>
	<style type="text/css">
		.box1{
			/*width和height-内容的宽度、高度（不是盒子的宽度、高度）*/
			width: 400px;
			height: 300px;

			/*边框的宽度*/
			border-top-width: 10px;
			border-bottom-width: 10px;
			border-left-width: 10px;
			border-right-width: 10px;

			/*边框的颜色*/
			border-top-color: red;
			border-bottom-color: black; 
			border-left-color:blue;
			border-right-color: pink;

			/*边框的样式*/
			/*solid：实线*/
			border-top-style: solid;
			/*dashed：虚线*/
			border-bottom-style: dashed;
			/*dotted：点线*/
			border-left-style: dotted;
			/*double：双线边框*/
			border-right-style: double;

			/*设置边框为圆角，参数为圆角的圆半径*/
			border-radius: 30px;

		}
	</style>
</head>
<body>
	<div class="box1">
		<p>这是一个盒子。</p>
	</div>
</body>
</html>

显示效果为：
在这里插入图片描述

外边距（margin）

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型——外边距</title>
	<style type="text/css">
		.box1{
			width: 400px;
			height: 200px;
			border: 10px solid red;
			border-radius: 30px;

			/*设置下外边距*/
			margin-bottom:60px;
			/*设置左外边距*/
			margin-left: 400px;

			/*设置背景颜色*/
			background:pink;
		}

		.box2{
			width: 400px;
			height: 200px;
			border: 10px solid pink;
			border-radius: 30px;
			margin-bottom: 60px;
			margin-left: 200px;
			background: gold;
		}

		.box3{
			width: 400px;
			height: 200px;
			border: 10px solid blue;
			border-radius: 30px;
			background: green;

			/*设置居中*/
			margin-left: auto;
			margin-right: auto;
		}
	</style>
</head>
<body>
	<div class="box1">
		<p>这是盒子1。</p>
	</div>
	<div class="box2">
		<p>这是盒子2。</p>
	</div>
	<div class="box3">
		<p>这是盒子3</p>
	</div>
</body>
</html>

显示效果为：
在这里插入图片描述

内边距（padding）

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型——内边距</title>
	<style type="text/css">
		.box1{
			width: 400px;
			height: 200px;

			border: solid 10px red;

			margin-right: auto;
			margin-left: auto;

			padding-left: 20px;

		}

		.box2{
			width: 100px;
			height: 50px;
			border: dashed 5px gold;
			background: green;
			padding-left: 10px;
			margin-right: auto;
			margin-left: auto;
			

		}
	</style>
</head>
<body>
	<div class="box1">
		<p>这是一个盒子</p>
		<div class="box2">
			<p>套娃盒子</p>
		</div>
	</div>
</body>
</html>

显示效果为：
在这里插入图片描述

综合案例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型——综合案例</title>
	<style type="text/css">
		.b1{
			width: 200px;
			height: 100px;
			/*背景颜色设为渐变色*/
			background: -webkit-linear-gradient(left,red,pink);

			margin: auto;
			margin-bottom: 20px;
		}
		
		.b2{
			width: 200px;
			height: 100px;
			background: -webkit-linear-gradient(left,yellow,gold);
			
			margin: auto;
			/*设置阴影，三个参数分别为水平方向阴影，竖直方向阴影，模糊程度*/
			box-shadow: 30px 15px 5px;
			margin-bottom: 80px;
		}

		.b3{
			width: 200px;
			height: 100px;
			margin: auto;
			background: -webkit-linear-gradient(top,blue,green);

			/*旋转盒子,顺时针旋转30度*/
			transform:rotate(30deg);
		}

	</style>
	
</head>
<body>
	<div class="b1"></div>
	<div class="b2"></div>
	<div class="b3"></div>
</body>
</html>

显示效果如下：
在这里插入图片描述

盒子的大小

在尝试写了一些基础代码后，得出以下结论：

盒子的宽度 = 内容的宽度+左右内边距+左右边框宽度+左右外边距

盒子的高度同理。

糯米味儿的粽子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记7-盒子模型（box model）

CSS学习笔记7——盒子模型（box model）盒子模型介绍CSS盒模型可以看作是一个盒子，用来装东西的容器，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。在网页中，每个盒子都有自己的位置，大小，还影响着其它盒子的位置和大小。盒子模型图示如下：图源——菜鸟教程Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) -
复制链接

扫一扫