html框模型（盒模型）

最新推荐文章于 2022-09-13 21:13:58 发布

河北颜良

最新推荐文章于 2022-09-13 21:13:58 发布

阅读量1k

点赞数

文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/zhe06/article/details/105850460

版权

框模型 - box model
1.什么是框模型
框：页面中元素皆为框。
框模型：定于元素的尺寸和距离的一种计算方式。
box model ：盒模型方框属性
包含：尺寸边框 外边距 内边距
在这里插入图片描述

当框模型属性介入到元素的时候，元素的整体占地尺寸会发生改变，计算方式如下：
占地宽度 = 左右外边距 + 左右边框 + 左右内边距 + 宽
占地高度 = 上下外边距 + 上下边框 + 上下内边距 + 高
2.外边距
1.什么是外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。那div块举例，外边距就是div块外部的地方，学会了控制外边距就可是将元素在html里放在任意你想放的地方。
2.属性
1.margin
最多能够设置四个方向的外边距
2.margin-top
上边距的值
3.margin-right
右边距的值
4.margin-bottom
下边距的值
5.margin-left
左边距的值
2.取值
1.取值为Px 或者 %为单位的。
2.取值为auto
自动：自动计算左右外边距的值。
注意：auto只能应用在左右外边距上，上下边距无效。
2.只能设置宽度的会计元素设置左右外边距为auto，目的是为了让块级元素水平居中。
3.margin的简介写法：
1.margin:value;
value表示上下左右四个方向外边距距离。
2.margin:v1 v2;
v1:上下外边距距离
v2：左右外边距距离

3.margin:v1 v2 v3;
v1:上外边距距离
v2：左右外边距距离
v3:下外边距距离

4.margin:v1 v2 v3 v4;
v1:上外边距距离
v2:右外边距距离
v3:下外边距距离
v4：左外边距距离

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style> 
	div{
		width:100px;
		height:100px;
		background:yellow;
		margin-top: 500px;
		margin-left: 200px;
		}
</style>
</head>
<body>
<div></div>
</body>
</html>

3.内边距
1.什么是内边距
内容与边框之间的距离
注意：内边距会扩大元素边框的所占区域
2.语法：
属性：
padding:四个方向的内边距的值。
padding-top/right/bottom/left:值；
取值：
以px 为单位或者%
简单写法：
padding:value;四个方向的值。
padding:v1 v2 v3 v4; 上右下左。
3.页面中具备默认内边距的元素
1.ul ol
2.文本框密码框按钮

 案例
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style> 
	div{
		width: 300px;
		height: 40px;
		border: 1px solid #000;
		padding-top: 10px;
		}
</style>
</head>
<body>
<div>ajs</div>
</body>
</html>

4.box-sizing
1.作用
指定框模型（尺寸，边框，内边距）的计算方式。
2.语法
属性：box-sizing
值：
1.centent-box
默认值，元素的width和height，只规定到元素的内容区域的宽和高，内边距和边框的尺寸是需要额外计算在附加到当前元素的。
例子：
div{
width: 300px;
height: 40px;
border: 1px solid #000;
padding: 1px 12px;
box-sizing: content-box;
}
内容宽度：300
内容高度：40
左右边框：1px
上下边框：1px
左右内边距：12
上下内边距：1
整体宽度：300+2+24 = 326
整体高度：40 + 2+2 = 44
2.border-box
元素的width 和height，能够规定到元素的边框，内边距以及内容尺寸的。
#div2{
width: 300px;
height: 40px;
border: 1px solid #000;
padding: 1px 12px;
box-sizing: border-box;
}
内容宽度：300
内容高度：40
左右边框：1px
上下边框：1px
左右内边距：12
上下内边距：1
整体宽度：300-2-24 = 274
整体高度：40 - 2-2 = 36

 案例： 不理解的，将这段代码写好后用浏览器查看 摁F12查看盒模型，就明白了。
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style> 
	#div1{
			width: 300px;
			height: 40px;
			border: 1px solid #000;
			padding: 1px 12px;
			box-sizing: content-box;
			}
	#div2{
			width: 300px;
			height: 40px;
			border: 1px solid #000;
			padding: 1px 12px;
			box-sizing: border-box;
			margin-top: 200px;
		}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>