第五章CSS盒模型

最新推荐文章于 2025-04-21 10:15:53 发布

东隅412

最新推荐文章于 2025-04-21 10:15:53 发布

阅读量982

点赞数 20

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2302_81317864/article/details/142750220

版权

5.1盒模型的定义

盒模型是 CSS定位布局的核心内容，页面中所有的元素都是放进一个容器内的，这个容器可以看成是一个盒子。可以通过 CSS 来控制这些盒子的各种显示属性，把这些盒子进行定位，完成整个页面的布局。在掌握了盒子模型以及其中每个元素的用法后，才能拥有较完善的布局观。

Web页面上大部分的元素(特别是块状元素)都可以看作是一个盒子，W3C组织建议把所有网页上的对象都放在一个盒子(box)中，设计者可以通过创建定义来控制这个盒子的各种属性，这些对象包括段落、列表、标题、图片及层。
盒子的结构可以看作一个矩形框，包括边框(border)、外边距(margin)、内边距(padding)，以及元素内容(content)，元素会在指定的高度和宽度范围内在页面上显示出来。

一个页面由许多这样的盒子组成，这些盒子层层嵌套，互相影响，设计者在布局网页和定位 Web元素时要充分考虑到这些要素，才能更自如地摆弄这些盒子。

5.2 CSS元素的高度和宽度

当设计者布局一个网页时，网页最终的宽度和高度会超出预计的数值，这是因为盒模型的宽度或高度计算误差造成的。指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。而浏览器实际大小的元素，还必须添加内边距、外边距和边框。而增加或减少内边距、外边距和边框，不会影响内容区域的尺寸，只会增加盒模型的总尺寸。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}/*全局声明*/
			div{
				width: 40px;
				height: 30px;
				border: 10px solid;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}/*全局声明*/
			img{
				width: 40px;
				height: 30px;
			}
			div{
				width: 40px;
				height: 30px;
				border: 10px solid;
				margin: 20px;
				
			}
		</style>
	</head>
	<body>
		<div><img src="img/photo.jpg"/></div>
		<div><img src="img/photo.jpg"/></div>
	</body>
</html>

5.2.1 盒模型的宽度

盒模型的宽度=左外边距(margin-left)+左边框(border-lef)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(border-night)+右外边距(margin-right)。

5.1.2 盒模型的高度

盒模型的高度=上外边距(margin-top)+上边框(border-top)+上内边距(padding-top)+内容高度(height)+下内边距(padding-bottom)+下边框(border-bottom)+下外边距(margin-bottom)。

5.3 边距设置和边框设置

mrgin-border-padding 模型是最常用的盒子布局形式。对于任何一个盒子，都可以分别通过设置四条边各自的外边距(margin)、边框(border)和内边距(padding)，实现各种各样的排版效果，而且它们各自的四条边在多参数同时设置时，均按照上一右→下一左的顺序(顺时针)

5.3.1 外边距设置

外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top、margin~nght、margin-bottom、margin-left，也可以用 margin 属性一次性设置所有外边距。

5.3.1.1 上外边距

语法:margin-top:length|percent|auto

参数;lengt 包括长度值和长度单位，包括绝对单位和相对单位。pereent是基于父对复
的高度。auo 值为自动提取边距值，是默认值。

5.3.1.2 右外边距

语法:margin-right:lengthlpercentlauto

参数：同margin-top。

说明:同 margin-top。

5.3.1.3 下外边距

语法:margin-bottom:lengthlpercentlauto
参数:同 margin-top。
说明:同 margin-top。

5.3.1.4 左外边距

语法:margin-left:lengthlpercent l auto
参数:同 margin-top。
说明:同 margin-top。

5.3.1.5 外边距

语法:margin:lengthlpercentlauto
参数:length 包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度，左右外边距允许使用负数。auto 值为自动提取边距值，是默认值。

说明:设置对象四边的外边距，包括 margin-top(上外边距)、margin-right(右外边距)、margin-bottom 下外边距)、margin-lef(左外边距)，外边距始终是透明的。

5.3.2 外边距的合并

通常，盒子与盒子之间的外边距相遇会互相影响，必须对 margin 属性深人了解，才能精确地控制盒子的位置。

5.3.2.1 行级元素外边距合并

行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.5</title>
		<style type="text/css">
			*{
				margin : 50px ;
			}
			.hb1{
				background-color:yellow ;
				margin-right:20px ;
				padding:30px ;
			}
			.hb2{
				background-color :lightpink;
				margin-left : 30px ;
				padding:30px ;
			}
		</style>
	</head>
	<body>
		<span class="hb1">黄色 span</span><span class="hb2">粉红色 span</span>
	</body>
</html>

5.3.2.2 块级元素外边距合并

块级元素的盒子相遇，盒子与盒子之间的距离等于两盒子中外边距的较大者。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.6</title>
		<style type="text/css">
			*{
				margin: 50px;

最低0.47元/天解锁文章