第五章 CSS盒模型

于 2024-10-11 10:35:44 发布
阅读量420 收藏 8
点赞数 14
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_80572539/article/details/142752459
版权

5.1盒模型的定义

        Web 页面上大部分的元素(特别是块状元素)都可以看作是一个盒子，W3C 组织建议把所有网页上的对象都放在一个盒子(box)中，设计者可以通过创建定义来控制这个盒子的各种属性，这些对象包括段落、列表、标题、图片及层。
        盒子的结构可以看作一个矩形框，包括边框(border)、外边距(margin)、内边距(padding)，以及元素内容(content)，元素会在指定的高度和宽度范围内在页面上显示出来。
        一个页面由许多这样的盒子组成，这些盒子层层嵌套，互相影响，设计者在布局网页和定位Web元素时要充分考虑到这些要素，才能更自如地摆弄这些盒子。
        而网页元素的定位实际上就是这些大大小小的盒子在页面中的定位，这些盒子在页面中是“浮动”的，当某个块状元素被 CSS 设置了浮动属性，这个盒子就会移动到上一块级元素所处的行中。要关注的是这些盒子在页面中如何摆放、如何嵌套的问题，而这么多盒子摆在一起，其中盒子尺寸计算、是否浮动等要素是最需要关注的。

        默认情况下盒子的边框是“无”，背景色是透明的，所以在默让情还态看不到盒子。边距、边框和外边距这些属性都是可选的，默认值都是0。边框的作用就是在内边距和外距之间创建一个隔离带，以避免视觉上的混淆。

        盒子用<div></div>来表示。

5.2 CSS元素的高度和宽度

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

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.1</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				border: 10px solid red;
				padding: 30px;
				margin: 10px;
				float: left;
			}
			img{
				width: 100px;
			}
		</style>
	</head>
	<body>
		<h1>盒模型示例</h1>
		<p>CSS盒模型本质上是一个盒子，外边距是10px；内边距30px；边框10px的红色实线；盒子左浮动在同一行处。</p>
		<div><img src="../img/flower.jpg"/></div>
		<div><img src="../img/flower.jpg"/></div>
	</body>
</html>

5.2.1 盒模型的宽度

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

5.1.2 盒模型的高度

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

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.2</title>
		
		<style type="text/css">
			.ap{
				width: 200px;
				height: 100px;
				border: 2px solid red;
				margin: 10px;
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<div class="ap">这是div块级元素，可设置高度和宽度</div>
		<span class="ap">这是span行集元素，不能设置宽度和高度</span>
	</body>
</html>

        如要为行级元素设置宽度和高度，需要为元素设置display属性，如在示例程序中加入属性“display:block；”

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.2</title>
		
		<style type="text/css">
			.ap{
				width: 200px;
				height: 100px;
				border: 2px solid red;
				margin: 10px;
				background-color: lightblue;
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="ap">这是div块级元素，可设置高度和宽度</div>
		<span class="ap">这是span行集元素，不能设置宽度和高度</span>
	</body>
</html>

5.3 边距设置和边框设置

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

5.3.1 外边距设置

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

        盒子和盒子的距离以及盒子和浏览器的距离

5.3.1.1 上外边距

        语法：margin-top:length I percent I auto

5.3.1.2 右外边距

        参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度。auto值为自动提取边距值，是默认值。
说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元素的 height属性或width 属性，或者设定 position 属性为 absolute。

5.3.1.3 下外边距

        语法：margin-right: length I percent I auto
        参数：同 margin-top。
        说明：同margin-top。

5.3.1.4 左外边距

        语法：margin-bottom:length I percent | auto
        参数：同margin-top。
        说明：同margin-top。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.3</title>
		<style type="text/css">
			#big{
				width: 450px;
				height: 200px;
				margin: 0;
				background-color: #fff;
			}
			#small1,#small2,#small3,#small4{
				width: 200px;
				height: 50px;
				text-align: center;
				background-color: #0FF;
			}
			#small1{
				margin-left: 20px;
				margin-left: 30px;
			}
			#small2{
				margin-right: 20px;
				margin-top: 10px;
				float: right;
			}
			#small3{
				margin-bottom: 5px;
			}
			#small4{
				margin-left: 10px;
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<div id="big">
		<div id="small1">A：左外边距20像素，下外边距30像素</div>
		<div id="small2">B：右外边距20像素，上外边距10像素，右浮动</div>
		<div id="small3">C：下外边距5像素</div>
		<div id="small4">D：左外边距10像素，上外边距15像素</div>
		</div>
	</body>
</html>

5.3.1.5 外边距

        语法：margin-left: length I percent I auto
        参数：同 margin-top。
        说明：同 margin-top。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.4</title>
		<style type="text/css">
			div{border: solid #0000ff 1px;
			width: auto;
			margin: 5px;
			float: left;
			}
			.margin1{
				background-color: #9f6;
				border: none;
				width: 200px;
				height: 80px;
				margin: 0px 15px 5px 30px;
			}
			.margin2{
				background-color: yellow;
				border: none;
				width: 200px;
				height: 80px;
				margin: 5px  30px 15px;
			}
			.margin3{
				background-color: lightgreen;
				border: none;
				width: 200px;
				height: 80px;
				margin:10px 30px;
			}
			.margin4{
				background-color: #fc0;
				border: none;
				width: 200px;
				height: 80px;
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="margin1">上、右、下、左外边距分别为：0px、15px、5px、30px</div>
		</div>
		<div>
			<div class="margin2">上外边距为：5px，下外边距为：15px，左右外边距为：30px</div>
		</div>
		<div>
			<div class="margin3">上、下外边距为10px，左、右外边距为30px</div>
		</div>
		<div>
			<div class="margin4">上、下、左、右外边距为15px</div>
		</div>
	</body>
</html>

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;
			}
			.div1{
				background-color: yellow;
				margin-bottom: 30px;
				padding: 30px;
			}
			.div2{
				background-color: lightpink;
				margin-top: 30px;
				padding: 30px;
			}
		</style>
	</head>
	<body>
		<div class="div1">黄色div</div>
		<div class="div2">粉红色div</div>
	</body>
</html>


5.3.3 内边距设置

        元素的内边距用来控制边框和内容区之间的空白距离，并非实体，用 padding属性表示，类似于HTML中表格单元格的填充属性。内边距(padding)和外边距(margin)很相似，都是透明不可见的，只是内边距和外边距之间还有边框。从语法和用法上来说，内边距的属性与外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性，padding属性接受length 值或pereent值，区别于外边距，内边距不可以使用负值。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.7</title>
		<style type="text/css">
			span{
				background-color: #ffff99;
			}
			div{
				width: auto;
				height: auto;
				margin: 15px;
				float: left;
			}
			.padding1{
				padding-top: 30px;
				padding-left: 15px;
			}
			.padding2{
				padding-bottom: 30px;
				padding-right: 30px;
			}
			.padding3{
				padding: 5px 30px;
			}
			.padding4{
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div class="padding1">
			<span>文字元素的上内边距为30px，左内边距为15px</span>
		</div>
		<div class="padding2">
			<span>文字元素的下内边距为30px，右内边距为30px</span>
		</div>
		<div class="padding3">
			<span>文字元素的上、下内边距为5px，左、右内边距为30px</span>
		</div>
		<div class="padding4">
			<span>文字元素的上、右、下、左内边距均为20px</span>
		</div>
	</body>
</html>

5.3.4 边框设置

        元素外边距内就是元素的边框(border)，它是围绕内边距和元素内容的一条或多条线在内边距和外边距之间。边框的四条边分别用border-top、border-right、border-bottomborder-left表示，它们的属性与内外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性。
边框作为盒模型的某个组成部分，边框的CSS样式设置将直接影响到盒子的尺寸和外观。而通过使用border属性，可以创建出更佳的边框效果，还可以应用于任何元素。bonde属性设置通常有3种：样式(border-style)、宽度(border-width)和颜色(border-color)。

5.3.4.1上边框

        语法：border-top：border-style I border-width I border-color
        参数：该属性是复合属性。需要通过参数设置来实现

5.3.4.2右边框

        语法：border-right:border-style I border-width I border-color
        参数：该属性是复合属性。需要通过参数设置来实现

5.3.4.3下边框

        语法：border-bottom:border-style I border-width I border-color

        参数：该属性是复合属性。需要通过参数设置来实现。

5.3.4.4 左边框

        语法：border-left:border-style I border-width I border-color

        参数：该属性是复合属性。需要通过参数设置来实现

5.3.4.5 边框样式

        在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在Web页面中边框就不会显示。
        border-style是一个复合属性，可以同时取1~4个值，取值方法与外边距相似。边框属性有12个值可选，包括默认(initial)和无边框(none)。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS盒模型</title>
			<style>
				*{
					margin: 0px;
					padding: 0px;
				}
				img{
					width: 80px;
					height: 80px;
				}
				div{
					width: 80px;
					height: 80px;
					border: 20px #ff0000 solid;
					margin: 30px;
					display: block;
					padding: 30px;
					border-top:  10px #ff0000 solid;
					border-bottom: thick  #00ff00 double ;
					border-left: medium #ff00ff dotted;
					border-right: thin #cb00ff dashed;
					
				}
			</style>
	</head>
	<body>
		<div><img src="img/flower.jpg"/></div>
		<div><img src="img/flower.jpg"/></div>
	</body>
</html>

5.3.4.6 边框宽度

        在CSS中，宽度是通过border-width属性来设置边框粗细的。
        与 border-style 属性相同，border-width 也是一个复合属性。设置边框宽度时，可以直接输入 length 确定长度值，如5px或2cm，但不可以为负值；或者选择系统预设属性值。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS盒模型</title>
			<style>
				*{
					margin: 0px;
					padding: 0px;
				}
				img{
					width: 80px;
					height: 80px;
				}
				div{
					width: 80px;
					height: 80px;
					border: 20px #ff0000 solid;
					margin: 30px;
					display: block;
					padding: 30px;
					border-top:  10px #ff0000 solid;
					border-bottom: thick  #00ff00 double ;
					border-left: medium #ff00ff dotted;
					border-right: thin #cb00ff dashed;
					
				}
			</style>
	</head>
	<body>
		<div><img src="img/flower.jpg"/></div>
		<div><img src="img/flower.jpg"/></div>
	</body>
</html>

5.3.4.7 边框颜色

        在CSS中，边框颜色是通过border-color属性来设置的，该属性可以使用任何类型的颜色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的 border-style 设置为none 或者 border-width 设置为0，本属性将失去作用。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.8</title>
		<style type="text/css">
			h2{
				text-align: center;
				border-bottom: dashed 5px red;
			}
			p{
				font-family: "楷体";
				border-top: solid thin purple;
				border-right: dashed 5px #99ff66;
				border-bottom: double thick purple;
				border-left: dashed 5px #ff9999;
			}
			div{
				border-style: solid dashed double;
				border-width: 10px;
				border-color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<h2>边框的实现</h2>
		<p>这个页面主要显示边框的不同样式、宽度和颜色。以实现对象的美观化。</p>
		<div>1.h2处所用边框CSS是5像素红色虚线的下边框；<br/>
		2.p处所用边框CSS是细的紫色实线上边框、5像素水绿色虚线右边框、粗的紫色双实线下边框、5像素粉红色虚线左边框；<br/>
		3.div处所用边框CSS是10像素蓝色实线、虚线、双实线。
		</div>
	</body>
</html>

5.3.5 新增边框属性

        CSS3中对边框新增了几个属性，设计者可以通过这些属性创建圆角边框、添加边框阴影、使用图片来绘制边框等。

5.3.5.1圆角边框

        border-radius：设置边框四个角有弧度成为圆角，需要设置相关参数

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS盒模型</title>
			<style>
				*{
					margin: 0px;
					padding: 0px;
				}
				img{
					width: 80px;
					height: 80px;
				}
				div{
					width: 80px;
					height: 80px;
					border: 20px #ff0000 solid;
					margin: 30px;
					display: block;
					padding: 30px;
					border-top:  10px #ff0000 solid;
					border-bottom: thick  #00ff00 double ;
					border-left: medium #ff00ff dotted;
					border-right: thin #cb00ff dashed;
					border-radius: 100px;
				}
			</style>
	</head>
	<body>
		<div><img src="img/flower.jpg"/></div>
		<div><img src="img/flower.jpg"/></div>
	</body>
</html>

5.3.5.2阴影边框

        box-shadow：向四个边框添加一到多个阴影，需要设置相关参数。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS盒模型</title>
			<style>
				*{
					margin: 0px;
					padding: 0px;
				}
				img{
					width: 80px;
					height: 80px;
				}
				div{
					width: 80px;
					height: 80px;
					border: 20px #ff0000 solid;
					margin: 30px;
					display: block;
					padding: 30px;
					border-top:  10px #ff0000 solid;
					border-bottom: thick  #00ff00 double ;
					border-left: medium #ff00ff dotted;
					border-right: thin #cb00ff dashed;
					border-radius: 100px;
					box-shadow: -20px 10px 20px #cb00ff;
				}
			</style>
	</head>
	<body>
		<div><img src="img/flower.jpg"/></div>
		<div><img src="img/flower.jpg"/></div>
	</body>
</html>

5.3.5.3图片绘制边框

        border-image：设置所有边框用图片显示，需要嵌入相关图片，但是部分浏览器不支持此属性。

浏览效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.11</title>
		<style type="text/css">
			div{
				margin: 100px;
				border: 50px solid blue;
				border-image: url(img/border.jpg)5 10 round;
			}
		</style>
	</head>
	<body>
		<div>利用border-image属性设置图片边框铺满效果。上下内偏移5像素，左右内偏移10像素。</div>
	</body>
</html>

5.4 CSS元素的定位

        前面所讲的盒模型都是标准流情况下可用的，但是盒模型仅有的儿种排版对布局有很的限制，导致元素无法在页面中随意地摆放，因此，我们需要使用盒子的定位(position)来增加排版的灵活性和适应性。
        定位(positim)的思想是，它允许你定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
position属性值有4个。
        语法：position: static I relative I absolute I fixed
        参数：static是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认，又称静态定位。relatives是相对定位，生成相对定位的元素，相对于其正常位置进行定位。ab-solute是绝对定位，相对于父元素或者浏览器窗口进行定位，需要 top、right、bottom 和 left属性辅助完成。fixed是固定定位，相对于浏览器窗口进行定位，需要top、right、bottom和let属性辅助完成

5.4.1 static 定位

        static（静态）是HTML元素的默认值（可省略），不受top、right、bottom和left属性影响，元素出现在正常的文档流中。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
		<div class="son2">子盒子2：无定位的盒子</div></div>
	</body>
</html>

5.4.2 relative定位

        relative不脱离文档流的布局，需要参照父元素的四条边(不是浏览器)，设置自身的top、right、bottom 和 left 属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: relative;
				top: 10px;left: 30px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
		<div class="son2">子盒子2：无定位的盒子</div></div>
	</body>
</html>

5.4.3 absolute定位

        absolute脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子，如果父盒子没有定位，那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置。

5.4.3.1 相对浏览器绝对定位

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: absolute;
				top: 10px;
				right: 30px;
			}
			.son2{
				border: 2px double red;
				width: 200px;height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：独立上浮，相对浏览器右边水平偏离30像素，相对浏览器上边垂直偏离10像素
		</div>
		<div class="son2">子盒子2：无定位的盒子</div></div>
	</body>
</html>

5.4.3.2 相对父盒子绝对定位

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
				position: relative;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: absolute;
				top: 30px;
				right: 10px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：独立上浮，相对浏览器右边水平偏离10像素，相对浏览器上边垂直偏离30像素
		</div>
		<div class="son2">子盒子2：无定位的盒子</div></div>
	</body>
</html>

5.4.4 fixed定位

        fixed类似于absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置，相对于浏览器窗口是固定不变的。（若添加多个<br/>会显示滚动条，但是盒子的位置保持不变。）

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: fixed;
				top: 30px;
				right: 10px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：独立上浮，相对浏览器右边水平偏离10像素，相对浏览器上边垂直偏离30像素
		</div>
		<div class="son2">子盒子2：无定位的盒子</div></div>
	</body>
</html>

5.5 CSS元素的浮动

        在CSS的盒模型布局上，除了使用定位避免按照标准流的方式进行排版的限制性问题，还可以使用浮动来避免。而使用浮动(float)和清除(clear)属性设置，可以解决各种页面错位的现象。

5.5.1 盒子的浮动添加

        一般情况下，页面中的块状元素在水平方向上宽度会自动延伸，直到父元素的边界；而在垂直方向上会按照元素在页面中出现的先后次序依次排列，即所说的标准流排列。

        语法：float: left I right I none
        参数：left元素浮动到左边，即向左侧靠拢，则右边可以有文字环绕；right元素浮动到右边，即向右侧靠拢，左边可以有文字环绕；默认值none就是标准流通常的显示状态。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.17</title>
		<style type="text/css">
			.father{
				background-color: #ffccff;
				border: 2px solid red;
				padding: 5px;
			}
			.father div{
				width: 100px;
				height: 20px;
				padding: 10px;
				margin: 10px;
				border: 2px dashed blue;
				background-color: #ccffff;
			}
			.father p{
				border: 20px dotted green;
				background-color: #ffff99;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<h2>父盒子</h2>
			<div style="float:right">右浮动盒子1</div>
			<div>标准流盒子2</div>
			<div>标准流盒子3</div>
			<p>css中, 有一个float 属性, 默认为 none, 也就是标准流通常的情况。若果将 float 属性的值设置为left 或 right, 元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>
</html>

5.5.2 清除盒子浮动造成的影响

        元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想要清除这种影响，需要使用clear属性完成。
        由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最好工具。
        语法：clear:left I right I both I none
        参数：left清除左边浮动元素，即不允许左边有浮动对象；right清除右边浮动元素，即不允许右边有浮动对象；Both同时清除左右两边的浮动元素，即不允许左右两边有浮动对象；默认值none。

浏览效果如下：

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.17</title>
		<style type="text/css">
			.father{
				width: 500px;
				background-color: #ffccff;
				border: 2px solid red;
				padding: 5px;
			}
			.father div{
				width: 100px;
				height: 20px;
				padding: 10px;
				margin: 10px;
				border: 2px dashed blue;
				background-color: #ccffff;
			}
			.father p{
				border: 20px dotted green;
				background-color: #ffff99;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<h2>父盒子</h2>
			<div style="float:right">右浮动盒子1</div>
			<div style="float: right;">右浮动盒子2</div>
			<div style="float: right;">右浮动盒子3</div>
			<p>css中，有一个float属性，默认为none，也就是标准流通常的情况。若果将float属性的值设置为 left 或 right, 元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下, 盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>
</html>

5.6 综合案例——昵心美食空间

浏览效果如下：

示例代码如下：

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>昵心美食空间</title>
		<link rel="stylesheet" href="css/157综合案例1.css" type="text/css"/>
	</head>
	<body>
		<div class="all">
		<div class="banner">
			<img src="img/banner.jpg" width="700px" height="70px"/>
		</div>
		<div class="menu">
			<img src="img/menu.jpg" width="690px" height="40px"/>
		</div>
		<div class="main">
		<div class="left">
			<marquee direction="up">
			<img src="img/mm_1.jpg" width="150px" height="140px"/>
			<img src="img/mm_2.jpg" width="150px" height="140px"/>
			<img src="img/mm_3.jpg" width="150px" height="140px"/>
			</marquee>
		</div>
		<div class="middle">
		<div class="one">
			<img src="img/font.jpg" width="25px" height="25px"/>为您推荐
			<br><br>
			<img src="img/x_1.jpg" width="80px" height="40px"/>
			<img src="img/x_2.jpg" width="80px" height="40px"/>
			<img src="img/x_3.jpg" width="80px" height="40px"/>
			<img src="img/x_4.jpg" width="80px" height="40px"/>
			<img src="img/x_5.jpg" width="80px" height="40px"/>
			<img src="img/x_6.jpg" width="80px" height="40px"/>
		</div>
		<center>
			<div class="two">
				<h1>昵心美食空间</h1>
			</div>
		</center>
		<div class="three">
			<img src="img/font.jpg" width="25px" height="25px"/>团购信息
			<br>
			<a href="#">1.火锅团购</a><br>
			<a href="#">2.烧烤团购</a><br>
			<a href="#">3.自助餐团购</a><br>
			<a href="#">4.新春特惠</a>
		</div>
		</div>
		<div class="right">
			<marquee direction="up">
			<img src="img/good_1.jpg" width="150px" height="140px"/>
			<img src="img/good_2.jpg" width="148px" height="140px"/>
			<img src="img/good_3.jpg" width="148px" height="140px"/>
			</marquee>
		</div>
		</div>
		<div class="bottom">
			<hr color="#0000ff"/>
			<center style="font-family: "楷体";">版权所有&copy；昵心美食空间<br/>
			地址：江门市大学路XXX号 邮编：500000 电话：0750-9999999</center>
		</div>
		</div>
	</body>
</html>

CSS代码：


	*{
		background-color: #ffff99;
	}
	a{
		color: red;
	}
	.all{
		width: 700px;
		height: 650px;
		margin: 10px auto;
		padding: 5px;
		background-image: url(img/bg1.JPG);
		}
		.banner{
			width: 700px;
			height: 70px;
		}
		.menu{
			width: 690px;
			height: 40px;
			padding: 5px;
		}
		.main{
			width: 700px;
			height: 450px;
			margin: 5px 0px;
			position: relative;
		}
		.left,.right{
			width: 150px;
			height: 440px;
			margin: 1px solid #999;
			float: left;
		}
		.middle{
			width: 384px;
			height: 450px;
			margin: 0px 5px;
			float: left;
			font-size: 20px;
			font-family: "楷体";
			font-weight: 700;
			color: #0000ff;
		}
		.one{
			width: 380px;
			height: 155px;
			border: 1px solid #999;
		}
		.two{
			width: 250px;
			height: 100px;
			border: 5px double red;
			margin-top: 20px;
			margin-bottom: 20px;
			border-radius: 25px;
		}
		.three{
			width: 380px;
			height: 135px;
			border: 1px solid #999;
		}
		.bottom{
			width: 700px;
			height: 70px;
		}

廖廖不潦潦
关注
【CSS3】第5章 盒子模型
笔触狂放的博客
12-29 2069
熟悉盒子模型的概念，能够说出盒子模型的基本结构。掌握标签的用法，能够使用标签制作页面模块。掌握边框属性的用法，能够为盒子设置不同的边框效果。掌握边距属性的用法，能够使用内边距和外边距设置盒子空间距离。了解盒子宽度属性和高度属性，能够计算盒子的实际宽度。掌握box-shadow属性的用法，能够为盒子添加阴影。熟悉box-sizing属性的用法，能够控制盒子宽度和高度范围。掌握背景属性的用法，能有为盒子设置不同样式背景。
第五章 CSS盒子模型
2402_87161397的博客
10-02 1431
width在CSS中，border属性是一个简写属性，可以用来一次性设置边框的宽度、样式和颜色。每个方向的边框也可以单独设置，如border-top和。这些属性各自接受三个值：宽度（）、样式（）和颜色（通过对border及其相关属性的灵活运用，你可以轻松地控制元素边框的各种细节，从而实现丰富多彩的视觉效果。无论是在简单的网页布局还是复杂的设计项目中，边框都是一个不可或缺的工具，它不仅提升了用户体验，也增强了页面的整体美观度。记住，在进行布局时考虑到边框的存在及其对元素尺寸的影响，合理利用。
第五章 - CSS盒模型
zl960320的博客
11-18 230
我们学习页面布局要学习三大核心，盒子模型，浮动和定位，盒子模型能够非常好的帮助我们定位。接下来对这些内容进行详细介绍。 1. 盒模型 1. 1 看透网页布局的本质 我们在进行网页布局的过程中，需要做以下准备： 先准备好相关的网页元素，网页元素基本都是盒子BOX 利用CSS设置好盒子样式，然后摆放到相应位置 往盒子里面装内容 网页布局的核心本质：利用CSS摆放盒子 1.2 盒子模型组成 所谓的盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。 CSS盒模型本
第五章CSS盒模型
2401_84288452的博客
10-09 943
盒模型的宽度=左外边距(margin-left)+左边框(border-let)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(borler-right)+右外边距(margin-right)。
第五章 CSS盒模型课后习题
最新发布
2302_80786141的博客
10-10 74
【代码】第五章 CSS盒模型课后习题。
css盒子模型
2401_83342251的博客
06-12 1109
之前我们设置的div盒子，它只是盒子最里面内容的大小，当你在设置内边距和边框，整个盒子的宽和高都会增大，但是怪异盒模型是刚开始设置的div盒子大小包括了内边距和边框，就是当你给盒子加内边距和边框时，整个盒子的大小不变，只是原本没设置内边距和边框时，盒子大小都是盒子最里面那部分的，当你设置了内边距和边框以后，最里面部分开始变小，内边距和边框的大小就是最里面那部分减去的。width/height(元素的内容宽或高)：内容区(content)、内边距(padding)以及边框(border)的总和。
前端css中盒子模型的各种属性
小蜗牛764号的博客
04-28 1241
本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定吧布局的内容放到弹性盒子模型中讲。部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。
CSS盒模型布局
m0_74995879的博客
04-16 1121
css盒模型喔！
CSS盒模型完整介绍
陈坚泓的博客
03-07 8420
CSS盒模型完整介绍盒模型的认识一、基本概念：标准模型+IE模型二、标准模型和IE模型的区别三、css如何设置获取这两种模型的宽和高四、javascript如何设置获取盒模型对应的宽和高五、外边距重叠六 、BFC推荐阅读 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 盒模型的认识 文章主要有以下内容 基本概念：标准模型+IE模型。 包括margin,border,padding,content 标准模型和IE模型的区别 css如何设置获取这两种模型的宽和高 js如何
第五章 CSS盒模型 案例所需图片
10-09
第五章 CSS盒模型 案例所需图片
网页设计与制作教程(HTMLCSSJavaScript)第2版第5章CSS盒模型.pptx
11-13
网页设计与制作教程（HTML+CSS+JavaScript）第2版第5章CSS盒模型 本章节主要介绍CSS盒模型的概念和应用，包括盒模型的组成部分、边框和外边距、内边距、盒模型的宽度和高度、块级元素与行级元素的区别、margin叠加...
第16章 CSS盒模型[下].pdf
04-27
在HTML5中，CSS盒模型是构建网页布局的核心概念，它决定了元素框处理元素内容（content）、内边距（padding）、边框（border）以及外边距（margin）的方式。在给定的文件内容中，涉及到了CSS盒模型的三个主要学习...
第16章 CSS盒模型[上]
08-11
标题“第16章 CSS盒模型[上]”暗示我们将讨论盒模型的基本概念和属性，可能涵盖内容区、填充、边框和外边距的设置。通常，这部分会讲解如何使用CSS来调整这些属性，以便在不同浏览器间实现兼容性布局。 在描述中...
深入浅出 CSS 定位：全面解析与实战指南
2301_79175212的博客
10-04 1631
在当今互联网时代，网页设计不仅需要具备美观的视觉效果，还需确保用户体验的流畅与便捷。而实现这一目标的关键，往往隐藏在细节之中。CSS（层叠样式表）作为前端开发的重要组成部分，其定位（Positioning）机制在布局设计中扮演着至关重要的角色。无论你是初涉前端世界的新手，还是希望提升技能的开发者，掌握 CSS 定位的各种技巧与应用，无疑会为你的网页设计增色不少。本文将以通俗易懂的语言，详细解析 CSS 定位的各类属性，并通过实际案例，助你轻松驾驭这一强大工具。CSS 定位允许你控制 HTML 元素在页面上的
CSS3-Day1
m0_74039531的博客
10-10 613
CSS3圆角CSS3盒阴影box-shadowCSS3边界图片CSS3 background-clip属性padding-box 沿着边框填充content-box 在边框外面。
高频CSS总结
qq_51384850的博客
10-10 867
盒模型、BFC、选择器权重计算方式、清除浮动、垂直居中、CSS3新特性、隐藏页面元素、em/px/rem/vh/vw区别、flex布局、CSS提高性能、画一个三角形、两栏布局：左边定宽，右边自适应方案
CSS 布局——清除浮动 （二）
m0_74012211的博客
10-06 426
CSS 布局——清除浮动
CSS——文字闪烁效果
懒羊羊大王的博客
10-02 1692
今天来完成一个文字闪烁的动态效果，包含倒影、闪烁、可编辑等细节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值