提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  大数据

当前栏目

【CSS】盒子模型内边距 ④ ( 盒子模型内部尺寸计算 - 内容尺寸、内边距、边框宽度 | 盒子模型尺寸 = 内容尺寸 + 内边距 + 边框宽度 )

计算CSS 模型 内容 内部 宽度 尺寸 盒子
2023-06-13 09:18:08 时间

文章目录

一、盒子模型内部尺寸计算

1、设置内边距和边框对盒子模型的影响

内容尺寸 大小是 固定的 , 设置的 width 和 height 是多少 , 内容尺寸就是多少 ;

如 : 下面的 CSS 样式中 , 设置 div 尺寸为 200 x 200 像素 , 那么内容尺寸就是该大小 ;

div {
	width: 200px;
	height: 200px;
}

如果在 内容尺寸 的基础上 , 添加了 四个方向的内边距 , 则整个 盒子模型 会向四周 扩大 内边距 大小 , 下图中 div 盒子模型

  • 向上扩张了 20 像素
  • 向右扩张了 10 像素
  • 向下扩张了 30 像素
  • 向左扩张了 50 像素
div {
	width: 200px;
	height: 200px;
	
	/* 设置 上内边距 20px , 右内边距 10px ,
	   下内边距 30px , 左内边距 50px */
	padding: 20px 10px 30px 50px;
}

如果 再次向外设置一个有宽度的边框 , 盒子的模型还会再扩大 边框宽度 的大小 ;

因此 , 最终的 盒子模型的大小 , 依赖于 内容尺寸 , 内边距 , 边框宽度 ;

2、盒子模型尺寸计算

上面设置 Padding 会撑大盒子 , 因此在设计 盒子模型 样式的时候 , 要提前计算好

  • 内容尺寸
  • 内边距
  • 边框宽度
  • 外边距

这四个值 , 其中的 内容尺寸 + 内边距 + 边框宽度 最终得到的才是盒子模型的宽度 ;

二、代码示例

1、盒子模型扩展尺寸示例

分析下面的代码 , 盒子模型 的尺寸如下 :

  • 内容尺寸 : 200 x 200 像素 ;
  • 内边距 : 上内边距 20px , 右内边距 10px , 下内边距 30px , 左内边距 50px ;
  • 边框宽度 : 10 像素 ;

盒子模型的宽度 = 内容宽度 200px + 右内边距 10px + 左内边距 50px + 边框宽度 10px * 2 = 280px ;

盒子模型的高度 = 内容高度 200px + 上内边距 20px + 下内边距 30px + 边框宽度 10px * 2 = 270px ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>盒子模型内部尺寸计算</title>
	<base target="_blank"/>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			
			/* 设置边框 */
			border: 10px solid blue;
			
			/* 设置 上内边距 20px , 右内边距 10px , 
			   下内边距 30px , 左内边距 50px */
			padding: 20px 10px 30px 50px;
		}
	</style>
</head>
<body>
	<div>盒子模型内部尺寸计算</div>
</body>
</html>

展示效果 :

使用标尺工具分别测量 盒子模型 的 宽度和高度 :

  • 测量宽度 : 宽度 280 像素 ;
  • 测量高度 : 270 像素 ;

2、盒子模型固定尺寸示例

如果要将盒子模型设置为 200 x 200 像素 , 保持原来的边距不变 , 那么只能修改内容尺寸 ;

分析下面的代码 , 盒子模型 的尺寸如下 :

  • 内容尺寸 : 未知 ;
  • 内边距 : 上内边距 20px , 右内边距 10px , 下内边距 30px , 左内边距 50px ;
  • 边框宽度 : 10 像素 ;
  • 总体盒子模型尺寸 : 200 x 200 像素 ;

盒子模型的宽度 = 内容宽度 x + 右内边距 10px + 左内边距 50px + 边框宽度 10px * 2 = 200px ;

计算出内容宽度 = 200 - 80 = 120 ;

盒子模型的高度 = 内容高度 x + 上内边距 20px + 下内边距 30px + 边框宽度 10px * 2 = 200px ;

计算出内容高度 = 200 - 70 = 130 ;

最终得到内容的尺寸为 120 x 130 像素 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>盒子模型内部尺寸计算</title>
	<base target="_blank"/>
	<style type="text/css">
		div {
			width: 120px;
			height: 130px;
			
			/* 设置边框 */
			border: 10px solid blue;
			
			/* 设置 上内边距 20px , 右内边距 10px , 
			   下内边距 30px , 左内边距 50px */
			padding: 20px 10px 30px 50px;
		}
	</style>
</head>
<body>
	<div>盒子模型内部尺寸计算</div>
</body>
</html>

展示效果 :

测量盒子模型宽度 200 像素 ;

测量黑盒子模型高度 200 像素 ;

相关文章