css中的盒子模型及其组成

超级马里澳

已于 2022-06-24 18:44:58 修改

阅读量850

点赞数

文章标签： css 前端 html

于 2022-06-24 18:44:05 首次发布

本文链接：https://blog.csdn.net/qq_48802281/article/details/125449317

版权

一盒子模型简介

我们把元素布局到页面，需要知道其大小，可以把元素想成一个盒子，就是简单的盒子模型。

盒子模型又称盒模型，框模型。

盒子模型构成：内容区(content)，内边距(padding),边框(border)，外边距(margin)

盒子大小跟内容区，内边距，边框有关系，和外边距没有关系

二内容区

元素中所有的子元素和文本内容都在内容区中排列

width: ;设置内容区宽度，height: ;设置内容区高度

三边框

3.1 使用border-width可以分别指定四个边框的宽度

可跟多个值：

4个值上右下左

3个值上左右下

2个值上下左右

1个值上下左右

3.2 除了border-width，CSS中还提供了四个border-xxx-width

xxx的值可能是top right bottom left

专门用来设置指定边的宽度

3.3

border-style设置边框的样式

可选值：

none，默认值，没有边框

solid 实线

double 双线

dashed [dæʃt] 虚线

dotted ['dɔtid] 点状边框

style也可以分别指定四个边的边框样式，规则和border-width一致，

同时它也提供border-xxx-style四个样式，来分别设置四个边

border-top border-right border-bottom border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

注意：边框会影响盒子大小

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* .box{
				width: 200px;
				height: 200px;
				background-color: rgb(99, 97, 9);
				border-width: 10px ;
				border-color: rgb(228, 24, 24);
				border-style: solid;
			} */
			/* 小箭头的做法 */
			.box{
				width: 0px;
				height: 0px;
				border-width: 10px;
				border-color: transparent transparent transparent  black;
				border-style: dashed;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

四内边距

内边距（padding），指的是盒子的内容区与盒子边框之间的距离

一共有四个方向的内边距，可以通过：

* padding-top

* padding-right

* padding-bottom

* padding-left

* 来设置四个方向的内边距

内边距会影响盒子的可见框大小，元素的背景会延伸到内边距，盒子的大小由内容区、内边距和边框共同决定。

使用padding可以同时设置四个边框的样式，规则和border-width一致。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		   .box1{
			   width: 100%;
			   height: 100%;
			   background-color: #00FFFF;
		   }
		   .box{
			   width: 200px;
			   height: 200px;
			   background-color: #bfa;
			   border: 20px solid red;
			   padding: 50px;
		   }
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
		</div>
	</body>
</html>

五外边距

5.1 外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。

盒子有四个方向的外边距：

margin-top

上外边距，设置一个正值，元素会向下移动

margin-right

默认情况下设置margin-right不会产生任何效果

margin-bottom

下外边距，设置一个正值，其下边的元素会向下移动，挤别的元素

margin-left

左外边距，设置一个正值，元素会向右移动

5.2 外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动

5.3 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box1{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #00FFFF;
				border: 20px solid red;
				margin-top: 1.25rem;
				margin-bottom: 30px;
			}
			.box2{
				width: 6.25rem;
				height: 6.25rem;
				background-color: blue;
				border: 20px;
				/* margin-left: 1.25rem;
				margin-top: 1.25rem; */
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>