CSS_6th_盒子模型

最新推荐文章于 2024-04-24 14:14:21 发布

weqpo

最新推荐文章于 2024-04-24 14:14:21 发布

阅读量564

点赞数

分类专栏： CSS 文章标签： html css div 盒子模型

本文链接：https://blog.csdn.net/weqpo/article/details/63683847

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、盒子模型
1、盒子模型的内容包括：content、padding、border、margin。
2、盒子模型分类：
标准盒：正常盒模型、怪异盒模型
伸缩盒：新、旧

二、正常盒模型
1、内边距：padding
1）内边距在content外，边框内
属性描述
padding ----------------设置所有边距
padding-bottom-------设置底边距
padding-left------------设置左边距
padding-right----------设置右边距
padding-top------------设置上边距

2）举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{ margin: 0px; padding: 0px;}
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div>hahaha</div>
	</body>
</html>

总结：content为100*100px的红色正方形，而padding为20px,padding也被认为是红色，所以整个正方形为140*140px的大小，

页面效果：

2、边框：border

1）边框border是内外边距的分界线
属性描述
border-width------------------边框宽度
border-style-------------------边框样式
border-color-------------------边框颜色
border-radius-----------------设置圆角边框
box-shadow-------------------设置对象阴影
border-image-----------------边框背景图片

2）举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{ margin: 0px; padding: 0px;}
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 20px;
				border: 5px solid blue;
			}
		</style>
	</head>
	<body>
		<div>hahaha</div>
	</body>
</html>

总结：border一定要指定线型和颜色，只指定像素值不会显示出来。

页面效果：

3、外边距：margin

1）围绕着内容边框的区域就是外边距，外边距默认为透明区域
2）外边距接受任何长度、百分数值
注意：外边距合并问题
属性描述
margin---------------------设置所有边距
margin-bottom-----------设置底边距
margin-left----------------设置左边距
margin-right--------------设置右边距
margin-top----------------设置上边距

3）举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{ margin: 0px; padding: 0px;}
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 20px;
				border: 5px solid blue;
				margin: 100px;
			}
		</style>
	</head>
	<body>
		<div>hahaha</div>
	</body>
</html>

页面效果：

4、综合举例
1）鞋子与鞋盒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.shoebox{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				padding: 20px;
			}
			.shoe{
				width: 200px;
				height: 200px;
				background-color: brown;
			}
		</style>
	</head>
	<body>
		<div class="shoebox">
			<div class="shoe">
				
			</div>
		</div>
	</body>
</html>

总结：
①一个盒子的width和height指的是其内容的宽和高，要加上外边距并不需要增加宽和高的值，只要给padding属性加上需要的大小即可。
②父级div内部的子级div的大小超过父级div的大小时，父级div不会被撑开，子级div会以父级内容区域左上角为基准，向右下方变大。
③如果父级div内容区域的位置变动（如父级的外边距、内边距、边框发生改变），那么子级div也会跟随父级内容区域左上角发生相应的位置变动。
页面效果：

2）外边距合并问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.shoebox{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				padding: 100px;
				margin-bottom: 50px;
			}
			.shoe{
				width: 200px;
				height: 200px;
				background-color: brown;
			}
			.haha{
				width: 100px;
				height: 100px;
				background-color: black;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="shoebox">
			<div class="shoe">
				
			</div>
		</div>
		<div class="haha"></div>
	</body>
</html>

页面效果：

当把haha的上外边距增加为100px时，页面效果如下：

总结：
①当两个盒子都有外边距时，两个盒子的边框之间的距离不是两者外边距相加，而是以两者中外边距较大的作为两者边框之间的距离。

三、怪异盒子

1）box-sizing属性的content-box取值意为该盒子是一个正常盒子。
2）box-sizing属性的border-box取值意为该盒子是一个怪异盒子。
3）举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background-color: pink;
				box-sizing: border-box;
				padding: 10px;
				border: 5px solid blue;
				margin: 10px;
			}
			.content{
				width: 100px;
				height: 100px;
				background-color: palegreen
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content">
				
			</div>
		</div>
	</body>
</html>

总结：
①怪异盒子固定了盒子的大小为width*height，设置了padding、border的部分会以缩小content区域为代价。
②外边距依然属于width*height之外的区域。
③即怪异盒子把border和padding划分到了width*height区域内。
页面效果：