什么是盒子模型

onnx

于 2023-09-03 00:45:00 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java进阶文章标签：学习笔记 html 前端

本文链接：https://blog.youkuaiyun.com/DeepLearning_/article/details/132642355

Java进阶专栏收录该内容

6 篇文章

订阅专栏

什么是盒子模型

盒子模型，也可以称为框模型。

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

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

不同部分的说明:

Margin（外边距）: 清除边框区域。Margin没有背景颜色，它是完全透明。
Border（边框）: 边框周围的填充和内容。边框是受到盒子的背景颜色影响。
Padding（内边距）: 清除内容周围的区域。会受到框中填充的背景颜色影响。
Content（内容）: 盒子的内容，显示文本和图像。

为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。

元素的宽度和高度

下面的例子中的元素的总宽度为 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

完整的 HTML 代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title></title>
<style>
	div.ex
	{
		width:220px;
		padding:10px;
		border:5px solid gray;
		margin:0px;
	}
</style>
</head>

<body>

	<div class="ex">The picture above is 250px wide.
					The total width of this element is also 250px.</div>

</body>
</html>

上述示例运行的结果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

值得注意的是: 当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，还必须添加填充，边框和边距。

边框

CSS 边框属性允许指定一个元素边框的样式和颜色。

CSS 边框属性常见如下:

border-width: 设置边框的宽度
border-color: 设置边框的颜色
border-style: 边框的样式

设置边框的宽度

如果设置一个值，则同时设置边框的四个方向的宽度。如下代码:

border-width: 10px;

上述代码则表示同时四个方向的边框宽度为 10px。

如果设置两个值，则第一个值表示设置边框的上下方向宽度，第二个值表示设置边框的左右方向宽度。

border-width: 10px 20px;

如果设置三个值，则第一个值表示设置边框的上边宽度，第二个值表示设置边框的左右方向宽度，第三个值表示设置边框的下边宽度。

border-width: 10px 20px 30px;

如果设置四个值，则分别表示设置上、右、下和左四个方向的边框宽度。

border-width: 10px 20px 30px 40px;

除了上述方式设置边框宽度，CSS 还提供如下方式分别设置上、右、下和左边框的宽度。

属性名称	描述
border-top-width	设置一个元素的顶部边框的宽度。
border-right-width	设置一个元素的右边框的宽度。
border-bottom-width	设置一个元素的底部边框的宽度。
border-left-width	设置一个元素的左边框的宽度。

设置边框的颜色

如果设置一个值，则同时设置边框的四个方向的颜色。如下代码:

border-color: red;

上述代码则表示同时四个方向的边框颜色为 red。

如果设置两个值，则第一个值表示设置边框的上下方向颜色，第二个值表示设置边框的左右方向颜色。

border-color: red orange;

如果设置三个值，则第一个值表示设置边框的上边颜色，第二个值表示设置边框的左右方向颜色，第三个值表示设置边框的下边颜色。

border-color: red orange yellow;

如果设置四个值，则分别表示设置上、右、下和左四个方向的边框颜色。

border-color: red orange yellow blue;

除了上述方式设置边框颜色，CSS 还提供如下方式分别设置上、右、下和左边框的颜色。

属性名称	描述
border-top-color	设置一个元素的顶部边框的颜色。
border-right-color	设置一个元素的右边框的颜色。
border-bottom-color	设置一个元素的底部边框的颜色。
border-left-color	设置一个元素的左边框的颜色。

设置边框的样式

边框样式的常用备选想如下:

边框样式	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
inherit	规定应该从父元素继承边框样式。

如果设置一个值，则同时设置边框的四个方向的样式。如下代码:

border-style: dotted;

如果设置两个值，则第一个值表示设置边框的上下方向样式，第二个值表示设置边框的左右方向样式。

border-style: dotted solid;

如果设置三个值，则第一个值表示设置边框的上边样式，第二个值表示设置边框的左右方向样式，第三个值表示设置边框的下边样式。

border-style: dotted solid dashed;

如果设置四个值，则分别表示设置上、右、下和左四个方向的边框样式。

border-style: dotted solid dashed double;

除了上述方式设置边框样式，CSS 还提供如下方式分别设置上、右、下和左边框的样式。

属性名称	描述
border-top-style	设置一个元素的顶部边框的样式。
border-right-style	设置一个元素的右边框的样式。
border-bottom-style	设置一个元素的底部边框的样式。
border-left-style	设置一个元素的左边框的样式。

简写设置边框

CSS 提供了 border 属性允许同时设置边框的宽度、颜色和样式。

border: 5px solid red;

值得注意的是: 设置的顺序没有明确要求。

除了上述方式设置边框，CSS 还提供如下方式分别设置上、右、下和左边框。

属性名称	描述
border-top	设置一个元素的顶部边框。
border-right	设置一个元素的右边框。
border-bottom	设置一个元素的底部边框。
border-left	设置一个元素的左边框。

内边距

CSS Padding（内边距）属性定义元素边框与元素内容之间的距离。

如果设置一个值，则同时设置内边距的四个方向。如下代码:

padding: 25px;

如果设置两个值，则第一个值表示设置内边距的上下方向，第二个值表示设置内边距的左右方向。

padding: 25px 50px;

如果设置三个值，则第一个值表示设置内边距的上边，第二个值表示设置内边距的左右方向，第三个值表示设置内边距的下边。

padding: 25px 50px 75px;

如果设置四个值，则分别表示设置上、右、下和左四个方向的内边距。

padding: 25px 50px 75px 100px;

除了上述方式设置内边距，CSS 还提供如下方式分别设置上、右、下和左边的内边距。

属性名称	描述
padding-top	设置一个元素的顶部内边距。
padding-right	设置一个元素的右边内边距。
padding-bottom	设置一个元素的底部内边距。
padding-left	设置一个元素的左边内边距。

外边距

CSS Margin（外边距）属性定义元素周围的距离。

外边距不会影响元素的可见大小，但是会影响元素的位置。

属性名称	描述
margin-top	设置元素的上外边距。
margin-right	设置元素的右外边距。
margin-left	设置元素的左外边距。
margin-bottom	设置元素的下外边距。

设置上和左外边距

margin-top: 100px;
margin-left: 50px;

由于元素在 HTML 页面中默认是靠左靠上显示的。所以默认情况下，修改左外边距和上外边距时，会影响当前元素的位置。

设置下和右外边距

margin-bottom: 100px;
margin-right: 50px;

修改右和下外边距时会影响其他元素相对于当前元素的位置。

简写设置外边距

如果设置一个值，则同时设置外边距的四个方向。如下代码:

margin: 25px;

如果设置两个值，则第一个值表示设置外边距的上下方向，第二个值表示设置外边距的左右方向。

margin: 25px 50px;

如果设置三个值，则第一个值表示设置外边距的上边，第二个值表示设置外边距的左右方向，第三个值表示设置外边距的下边。

margin: 25px 50px 75px;

如果设置四个值，则分别表示设置上、右、下和左四个方向的外边距。

margin: 25px 50px 75px 100px;

外边距重叠

当同时为两个相邻的 <div> 标签设置外边距，为第一个 <div> 标签设置下外边距，为第二个 <div> 标签设置上外边距。具体代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*为上边的元素设置一个下外边距*/
				margin-bottom: 100px;
			}		
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				/*为下边的元素设置一个上外边距*/
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>	
	</body>
</html>

上述示例代码，最终运行的结果是: 两个 <div> 之间的距离为 100px。

垂直方向的相邻的外边距会发生外边距的重叠现象，兄弟元素的相邻外边距会取最大值。

值得注意的是: 外边距的重叠现象只会出现在垂直方向，而水平方向并不存在外边距重叠现象。

如果定义两个 <div> 标签是父子关系的话，当为作为子元素的 <div> 设置上外边距，该上外边距会传递给作为父元素的 <div>。具体代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<style type="text/css">		
			.box3{
				width: 300px;
				height: 200px;
				background-color: skyblue;
			}
			
			.box4{
				width: 100px;
				height: 100px;
				background-color: red;
				/*设置一个margin-top*/
				margin-top: 100px;
			}			
		</style>
	</head>
	<body>		
		<div class="box3">
			<div class="box4"></div>
		</div>
	</body>
</html>

上述外边距的重叠现象，可以通过为作为父元素的 <div> 下内边距解决。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<style type="text/css">		
			.box3{
				width: 300px;
				height: 100px;
				background-color: skyblue;
				padding-top: 100px;
			}
			
			.box4{
				width: 100px;
				height: 100px;
				background-color: red;
			}			
		</style>
	</head>
	<body>		
		<div class="box3">
			<div class="box4"></div>
		</div>
	</body>
</html>