第五章CSS盒模型

小沐在学习

于 2024-10-11 22:08:53 发布

阅读量578

点赞数 14

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_81614658/article/details/142750313

版权

5.1盒模型的定义

盒子的结构可以看作一个矩形框，包括边框(border)、外边距(margin):内边距(padding),以及元素内容(content),元素会在指定的高度和宽度范围内在页面上显示出来。它们之间的关系，如图所示：

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

5.2 CSS元素的高度和宽度

1.盒模型的宽度

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

<style>
	div{
		/*盒模型宽度*/
		width: 200px;
</style>

2.盒模型的高度

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

<style>
	div{
		/*盒模型高度*/
		height: 100px;
</style>

5.3 边距设置和边框设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章</title>
		<style>
			div{
				/*盒模型宽度*/
				width: 400px;
				/*盒模型高度*/
				height: 300px;
				/*边距设置和边框设置*/
				border: 5px solid;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

5.3.1 外边距设置

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

1.上外边距

语法:margin-top:length Ipercent I auto

2.右外边距

语法:margin-right:length I percent I auto

3.下外边距

语法:margin-bottom:length I percent I auto

4.左外边距

语法:margin-left:length I percent I auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章</title>	
		<style>
			div{
				/*盒模型宽度*/
				width: 200px;
				/*盒模型高度*/
				height: 100px;
				/*边距设置和边框设置*/
				border: 5px solid;
                /*上边距*/
				margin-top: 30px;
                /*右边距*/
				margin-right: 40px;
                /*下边距*/
				margin-bottom: 50px;
                /*左边距*/
				margin-left: 60px;
			}
			img{
				width:200px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div><img src="img/ssh.jpg"/></div>
		<div><img src="img/ssh.jpg"/></div>
	</body>
</html>

5.外边距

语法:margin:lengthIpercent Iauto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章</title>	
		<style>
			div{
				/*盒模型宽度*/
				width: 200px;
				/*盒模型高度*/
				height: 100px;
				/*边距设置和边框设置*/
				border: 5px solid;
                /*外边距距离*/
				margin: 50px;
			}
			img{
				width:200px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div><img src="img/ssh.jpg"/></div>
		<div><img src="img/ssh.jpg"/></div>
	</body>
</html>

5.3.2 外边距的合并

1.行级元素外边距合并

<span></span>

<! DOCTYPE html> 
<html> 
	<head> 
		<meta charset="utf-8"/> 
		<title>第五章</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>

2.块级元素外边距合并

<div></div>

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

5.3.3 内边距设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章</title>
		<style>
			div{
				/*盒模型宽度*/
				width: 200px;
				/*盒模型高度*/
				height: 100px;
				/*边距设置和边框设置*/
				border: 5px solid;
				margin: 50px;
				padding: 50px;
			}
			img{
				width:200px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div><img src="img/ssh.jpg"/></div>
		<div><img src="img/ssh.jpg"/></div>
	</body>
</html>

5.3.4 边框设置

1.上边框

语法:border-top:border-style I border-width| border-color

2.右边框

语法:border-right:border-style Iborder-widthI border-color

3.下边框

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

4.左边框

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章</title>	
		<style>
			div{
				/*盒模型宽度*/
				width: 200px;
				/*盒模型高度*/
				height: 100px;
				/*边距设置和边框设置*/
				/*上边框*/
				border-top: 5px #00ff00 solid;
				border-right: 5px #001100 solid;
				border-bottom: 5px #ff0011 solid;
				border-left: 5px #aabbcc solid;
                /*外边距距离*/
				margin: 30px;
			}
			img{
				width:200px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div><img src="img/ssh.jpg"/></div>
		<div><img src="img/ssh.jpg"/></div>
	</body>
</html>

5.边框样式

在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在Web页面中边框就
不会显示。

border-top: 5px #00ff00 solid;/*实线*/
border-right: 5px #001100 dashed;/*虚线*/
border-bottom: 5px #ff0011 double;/*点线*/
border-left: 5px #aabbcc inherit;/*双线*/

6.边框宽度

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

<html>
	<head>
		<meta charset="utf-8">
		<title>第四章</title>	
		<style>
			div{
				/*盒模型宽度*/
				width: 200px;
				/*盒模型高度*/
				height: 100px;
				/*边距设置和边框设置*/
				/*边框*/
				border-top: 5px #00ff00 solid;
				border-right: thin #001100 dashed;/*细线*/
				border-bottom:medium #ff0011 dotted;/*中等*/
				border-left: thick #aabbcc double;/*粗线*/
                /*外边距距离*/
				margin: 30px;
			}
			img{
				width:200px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div><img src="img/ssh.jpg"/></div>
		<div><img src="img/ssh.jpg"/></div>
	</body>
</html>

7.边框颜色

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

5.3.5 新增边框属性

1.圆角边框

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章</title>	
		<style>
			div{
				/*盒模型宽度*/
				width: 200px;
				/*盒模型高度*/
				height: 100px;
				/*边距设置和边框设置*/
				border: 5px solid;
				/*圆角边框*/
				border-radius: 25px;
                /*外边距距离*/
				margin: 30px;
			}
			img{
				width:200px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div><img src="img/ssh.jpg"/></div>
		<div><img src="img/ssh.jpg"/></div>
	</body>
</html>

2.阴影边框

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

<style>
    div{
	/*阴影边框 右偏移量 下偏移量 模糊距离 颜色*/
	box-shadow: -15px 20px 50px #ff00ff;
    }
</style>

3.图片绘制边框

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

<! DOCTYPE html> 
<html> 
	<head> 
	<meta charset="utf-8"/> 
	<title>第四章</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)来增加排版的灵活性和适应性。
语法:position:static | relative I absolute I fixed

5.4.1 static 定位（静态定位）

static是HTML元素的默认值。

<!DOCTYPE html>
<html>
	<head> 
	<meta charset="utf-8"/> 
	<title>第四章</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定位（相对定位）

相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。

让我们把.son1里面的内容改成绝对定位，然后看看效果图：

.son1{
	border:2px double red;
	background-color: yellow; 
	width: 200px; 
	height: 80px; 
	position: relative;
	top: 15px;
	left: 30px;
}

5.4.3 absolute定位

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

1.相对浏览器绝对定位

.son1{
	border:2px double red;
	background-color: yellow; 
	width: 200px; 
	height: 80px; 
	position: absolute;
    top: 15px;
	left: 30px;
}

2.相对父盒子绝对定位

先将父盒子变成相对定位，然后把子盒子设置为绝对定位

.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: 15px;
	left: 30px;
}

5.4.4 fixed定位

fixed类似于absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置相对于浏览器窗口是固定不变的。

<!DOCTYPE html>
<html>
	<head> 
	<meta charset="utf-8"/> 
	<title>第四章</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;
			bottom: 15px;
			right: 30px;
		}
		.son2{ 
			border:2px double red; 
			width: 200px; 
			height: 25px; 
			margin-top:50px; 
		}
		</style> 
	</head> 
	<body> 
		<div class="father">父盒子:无定位
			<div class="son1">子盒子1:absolute定位的盒子
			</div> 
			<div class="son2">子盒子2:无定位的盒子</div> <br/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div> 
	</body> 
	</html>

5.5 CSS元素的浮动

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

1.盒子的浮动添加

语法:float:left I right I none

<!DOCTYPE html>
<html>
	<head> 
	<meta charset="utf-8"/> 
	<title>第四章</title> 
		<style type="text/css"> 
		.father {
			background-color:#ffccff;
			border:2px solid red;
			padding: 5px;
		}
		.father div{
			border:2px dashed blue;
			background-color:#ccffff; 
			width: 100px; 
			height: 20px; 
			padding: 10px;
			margin: 10px;
		}
		.father p{ 
			border:2px 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>

2.盒子的浮动清除

语法:clear:left|right |both I none

清除盒子浮动产生的影响。

未清除前，盒子直压<p>标签的内容

在p标签内清除盒子之后：

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

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

<!DOCTYPE html>
<html>
	<head> 
	<meta charset="utf-8"/> 
	<title>小沐美食空间</title> 
		<style type="text/css"> 
		*{
			background-color: #ffff99;
		}
		.all{
			width: 700px;
			height: 650px;
			margin: 10px auto;
			padding: 5px;
			background-image: url();
		}
		.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;
			border: 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: 255px;
			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;
		}
		</style> 
	</head> 
	<body> 
		<div class="all">
			<div class="bammer">
				<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><br>
					</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="150px" height="140px"/>
						<img src="img/good_3.jpg" width="150px" height="140px"/>
					</marquee>
				</div>
			</div>
			<div class="bottom">
				<hr color="#0000ff"/>
				<center style="font-family:'楷体'";>博主&copy;小沐在学习<br />
				地址：江西应用工程职业学院</center>
			</div>
		</div>
	</body> 
</html>