Web_0218

最新推荐文章于 2024-07-30 22:47:50 发布

monuo5659

最新推荐文章于 2024-07-30 22:47:50 发布

阅读量138

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/monuo5659/article/details/104369302

版权

HTML 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

1、外边距合并和塌陷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nac,.nav
			{
				width: 200px;
				height: 200px;
				background-color:#bebebe;
			}
			.nav
			{
				margin-bottom: 100px;
			}
			.nac
			{
				background-color:orange;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="nav"></div>
		<div class="nac"></div>
	</body>
</html>

外边距nav的下边距为100px，nac的上边距为50px，我们希望nav和nac之间的边距为150px，结果却是100px，我们则称之为外边距合并，或者外边距塌陷。也就是说上下外边距取的是较大的那个值

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<style>
		*
		{
			border:0;
			margin:0;
		}
		a
		{
			display: inline-block;
			width: 100px;
			height: 50px;
			background-color: #BEBEBE;
			text-align: center;
			line-height: 50px;
			text-decoration: none;
		}
		.a2
		{
			margin-left: 100px;
		}
		.a1
		{
			margin-right: 50px;
		}
	</style>
	<title></title>
</head>
<body>
	<a href="#" class="a1">baidu</a>
	<a href="#" class="a2">huawei</a>
</body>
</html>

左右则不受影响，也就是说左右不受外边距合并影响。

1.2 内嵌套外边距塌陷解决办法

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<style>
		.father
		{
			background-color: #bebebe;
			width: 500px;
			height: 500px;
			border-top: 1px solid transparent;
		}
		.son
		{
			background-color: orange;
			width: 200px;
			height: 200px;
			margin-top:100px;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="father">
		<div class="son">
		</div>
	</div>
</body>
</html>

1、在father（外div）中添加一个border，设置为透明的，就解决了！

2、在father中，给定一个上padding也可以解决。例如：padding-top:1px;

3、给父元素添加overflow：hidden；

1.3圆角边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav
			{
				width:100px;
				height: 100px;
				border:1px solid #000000;
				border-radius: 50%;
			}
			.nav2
			{
				width: 200px;
				height: 200px;
				background-color: orange;
				border-radius: 100px;
			}
			p
			{
				width: 200px;
				height: 30px;
				background-color: orange;
				text-align: center;
				font-size: 14px;
				color:white;
				line-height: 30px;
				border-radius: 15px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			
		</div>
		<div class="nav2">
			
		</div>
		<p>
			今日淘宝特卖
		</p>
	</body>
</html>

圆角边框的目的就是让块元素变成圆的，和让块元素的角变成圆的。

1.4盒子阴影

盒子阴影：box-shadow

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.nav a
			{
				display: inline-block;
				width: 200px;
				height: 300px;
				background-color:orange;
				margin:10px;
				
				
			}
			.nav a:hover
			{
				/*水平阴影，垂直阴影，模糊距离（虚实） 阴影尺寸（影子大小）阴影颜色（通常都是黑色）内外阴影（用外阴影比较多）*/
				box-shadow: 0px 15px 30px rgba(0,0,0,0.3);
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
		</div>
		
		
	</body>
</html>

2、浮动float

1、CSS布局中的三种机制是什么？

理解：

1、能够说出普通流在布局中的特点

2、能够说出我们为什么要用浮动

3、说出我们为什么清除浮动？

应用：

1、能够利用浮动完成导航栏案例；

2、能够清除浮动

3、能够使用PS切工具

布局的三种形式

1、普通流，就是从上至下的顺序；例如（div，hr，h1~h6从上至下的顺序）

2、浮动：让盒子从普通流当中浮起来。

3、定位显示。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<style>
		.nav2{
			width: 500px;
			height: 400px;
			background-color: #BEBEBE;
		}
		.nav{
			width: 300px;
			height: 200px;
			background-color: orange;
			float: left;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="nav">
		
	</div>
	<div class="nav2">
		
	</div>
</body>
</html>

float：left；是让div为漂浮的状态。nav则漂浮在nav2上面。

特性：float会改变元素的display特性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div
			{
				
				height: 200px;
				float: left;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div>
			少壮不努力，老大徒伤悲。
		</div>
	</body>
</html>

当添加float之后不给width，div由块元素相当于改变为行内块元素。不过float元素与float元素之间默认是没有缝隙的。

float总结就是：浮动、漏掉、特性。简称浮漏特

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<style>
		div	{
			width: 200px;
			height:200px;
		}
		.one{
			background-color: mediumslateblue;
			float: left;
		}
		.two{
			background-color: orange;
			float: left;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="one">
		
	</div>
	<div class="two">
		
	</div>
</body>
</html>

float默认之间是没有距离的。需要用margin来设置

清除浮动(float)

2.1为什么要清除浮动

因为父级盒子在很多情况下不方便给高度。但是盒子浮动就不占有位置，最后父级盒子高度为0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father{
				width: 500px;
				background-color: #BEBEBE;
			}
			.one{
				width: 300px;
				height: 300px;
				float: left;
				background-color: orange;
			}
			.two{
				width: 200px;
				height: 350px;
				float: left;
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="one"></div>
			<div class="two"></div>
		</div>
	</body>
</html>

/*father 是父级，但是很多情况下不方便给高度。子盒子有多少内容，就显示多少内容，自动撑开父盒子最为合理*/

清除浮动的本质：**清楚浮动主要是为了解决父级元素因为子集元素所引起的内部高度为0。清除浮动后，父级就会根据浮动的盒子自动检测高度。父级有了高度就不会影响下面的标准流了。

例如：下面的例子中xxx是标准流，因为父级高度为0，所以xxx浮上去了。解决办法用clear

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father{
				width: 500px;
				background-color: blue;
				margin: auto;
			}
			.one{
				width: 300px;
				height: 300px;
				float: left;
				background-color: orange;
			}
			.two{
				width: 200px;
				height: 350px;
				float: left;
				background-color: aliceblue;
			}
			.xxx{
				
				width: 550px;
				height: 300px;
				background-color: #000;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="one"></div>
			<div class="two"></div>
			<div class="xxx">
			</div>
		</div>
	</body>
</html>

所以XXX在CSS中添加 clear：both；就可以清除左右两边的float了。这样father就有高度了。

1、额外标签法

根据w3c的推荐，在浮动元素的末尾添加空标签。<div style="clear :both;"></div>就可以了

2、