盒子模型中边框，内边距，外边距的相关问题

最新推荐文章于 2023-04-09 18:27:45 发布

手搓二十四种设计模式

最新推荐文章于 2023-04-09 18:27:45 发布

阅读量408

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_73892800/article/details/127296762

版权

边框

引子：上篇中讲到设置边框的三种样式：1.border-width

2.border-color

3.border-style 严格来说，这三种样式再写的时候是缺一不可的，但其中：1.border-width你不写的时候是存在默认值的，默认值为2或3个px

2.border-color也是有默认值的，为黑色。

boder-width值的设置：

1.直接写boder-width：10px则四个边框都会变为10px

2.写boder-width：10px 20px 30px 40px则值对应边框的位置为上，右，下，左，从上开始顺时针

3.boder-width：10px 20px 30px 值对应的边框位置为上左右下。

4.boder-top-width：10px表示上边框，当然top也可表示为bottom（下） left（左）right（右）

注：第二，三点在每个值之间必须带空格。

boder-color与boder-style的使用规则其实和boder-width一样

boder-style中常用值：solid（实线）

dotted（点状虚线）

dashed（虚线）

double（双线）

具体的可以查相关资料：https://www.w3school.com.cn/css/css_border.asp

这莫写其实有亿点点麻烦，可以try一try，border的简写属性，同时设置样式，并没有顺序要求

border：10px orange solid 这就是个边框为10px颜色为橙色的实线边框（值与值之间仍然要加空格）

内边距

引子：内边距，padding，是指内容与边框的距离，他会影响盒子的大小。其实一个盒子可见框（能看到的部分）的大小由内容区，内边距和边框共同决定，所以在计算盒子大小时，需要将三个区域加到一起计算。他也有简写属性，也可以指定四个方向的内边距，和boder-width使用方法差不多。

内边距主要有一个问题，在这里我们直接上代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	
	<style>
		.box1{
			background-color: red;
			height: 100px;
			width: 100px;
			border: 50px yellow solid;
			padding-top: 50px ;
			
			
			
		}
		
	</style>
</head>
<body>
	<div class="box1">我是内容区</div>
	

	
	
</body>
</html>

他就会生成：

文字只会在内容区出现，很显然内边框的颜色会延用内容区，这样不仅难以区分，而且很影响美观。

解决方法：只需在再写一个填满内容区的元素且颜色不同，直接上代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	
	<style>
		.box1{
			background-color: red;
			height: 100px;
			width: 100px;
			border: 50px yellow solid;
			padding-top: 50px ;
			
			
			
		}
		.box2{
			background-color: blue;
			height: 100px;
			width: 100px;
			
		}
		
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2">我是内容区</div>
	</div>
	

	
	
</body>
</html>

这样就可以很容易区分