CSS box model ：盒子模型

沃和莱特

已于 2022-07-11 20:41:02 修改

阅读量506

点赞数 16

分类专栏：前端文章标签： css css3 html

于 2022-05-28 21:11:07 首次发布

本文链接：https://blog.csdn.net/weixin_64122448/article/details/124971811

版权

前端专栏收录该内容

23 篇文章 9 订阅

订阅专栏

前言

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

在学习过程中总觉得基础巩固不好，那有可能就是理论没有得到很好的实践，亲自将代码实现出来才能更容易掌握所学，比如刷题就是一个很好的选择，边学边练，学完即练！
牛客网
 https://www.nowcoder.com/exam/oj?page=1&tab=HTML/CSS&topicId=260&fromPut=pc_csdncpt_wlxfd_qianduan

属性

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。（默认情况下padding=0）
Content(内容) - 盒子的内容，显示文本和图像。

在这里插入图片描述

计算方式

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度(width)+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

例子

<head>
		<meta charset="utf-8">
		<title>CSS盒模型</title>
		<style type="text/css">
		div{
			width: 300px;/*这是宽度*/
			padding: 25px;/*左右填充一共是50px*/
			border: 25px green solid;/*左右边框一共是50px*/
			margin: 25px;/*左右边距一共是50px*/
		}
		</style>
	</head>
	<body>
		<h>这是一个盒模型，元素的总宽度就是450px</h>
		<div>hello worder</div>
	</body>

如果觉得不是很容易看，我们可以利用截图看一下参数：
在这里插入图片描述宽度350px，这就是width+2padding（左右填充）

接下来我们看一下盒模型中border的用法：

边框border，边框属于盒子的边缘边框里面属于盒子的内部，除了边框就是盒子的外部
border-width边框宽度
border-style边框类型
border-color边框颜色
使用border-width可以指定四条边的边框宽度

border-width：

<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style type="text/css">
		#main{
		      height: 200px;
			    width: 200px;
				  border: 2px red solid;
			    background-color: #00BFFF;
			    border-width: 10px 20px 30px 40px;
				}
     </style>
	 </head>
	<body>
		<div  id="main">
		hello world
		</div>
	</body>