CSS盒模型

最新推荐文章于 2024-10-20 16:51:54 发布

byte~

最新推荐文章于 2024-10-20 16:51:54 发布

阅读量138

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_45929209/article/details/121622323

版权

CSS盒模型

内边距（padding）
边框
宽和高
网页布局的一般问题
布局的三种基本形式

内边距（padding）

margin是指在盒子以外的东西，padding是指他是元素包含的内容与元素边框之间的距离，用来调整元素内部所包含元素的显示位置。

三个点来说明margin(外边距)、padding(内边距)不同之处：

外边距会产生交叠，内边距不会，没有边框时可以使用内边距代替外边距
内边距的部分可以由背景图像修饰，而外边距不会受到背景、图片等修饰
内边距可以影响边框的大小，外边距不会影响边框的大小，即border的大小

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内边距</title>
		<style type="text/css">
			div {
				width: 500px;
				height: 50px;
			}
			
			.box1 {
				margin-bottom: 50px;
				border: 1px solid #000000;
			}
			
			.box2 {
				/*margin-top: 50px;*/
				padding-top: 50px ;
				border: 1px solid #00FF00;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			BOX1
		</div>
		<div class="box2">
			BOX2
		</div>
	</body>
</html>

提示：以上代码可以对上面所说几点不同处进行体验

边框

样式
颜色
宽度
代码如下（简单示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内边距</title>
		<style type="text/css">
			div {
				width: 500px;
				height: 50px;
			}
			
			.box1 {
				margin-bottom: 50px;
				border: 1px solid #000000;
			}
			
			.box2 {
				/*margin-top: 50px;*/
				padding-top: 50px ;
				border: 1px solid #00FF00;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			BOX1
		</div>
		<div class="box2">
			BOX2
		</div>
	</body>
</html>

宽和高

元素宽度和高度
元素的宽度和高度分别是指width和height
元素的实际宽度和实际高度
元素的实际宽度= 元素的宽度+2(内边距的宽度padding)+2(边框的宽度border)
元素的实际高度= 元素的高度+2(内边距的高度padding)+2(边框的高度border)
提示：当然我们要根据具体问题具体分析，这个是当左右两边同等宽度时实际宽度的计算方法（高度是相当是上下两边等同的时候的实际高度的计算方法）
元素的总宽度和总高度
元素的总宽度=元素的实际宽度+2(外边距的宽度margin)
元素的总高度=元素的实际高度+2(外边距的高度margin)
提示：同上一样的分析，当左右两边同等宽度时总宽度的计算方法（高度是相当是上下两边等同的时候的总高度的计算方法）