html+css复习(四)

最新推荐文章于 2023-01-01 21:40:30 发布

df5465695

最新推荐文章于 2023-01-01 21:40:30 发布

阅读量471

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/df5465695/article/details/126118275

版权

1.盒子边框的颜色样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			div{
				width: 500px;
				height: 500px;
				background-color: #ccc;
				/* 在设置颜色之前，首先应该设置边框类型 */
				border-style: solid;
				/* border-top-color: #f00;
				border-right-color: #0f0;
				border-bottom-color:#00f ;
				border-left-color:#0ff ; */
				
				/* border-color: #f00; */
				/* border-color: #f00 #0f0; */
				/* border-color: #f00 #0f0 #00f; */
				border-color: #f00 #0f0 #00f #ff0;
			}
			
		</style>
	</head>
	<body>
		<div>我是div元素</div>
	</body>
</html>

2.盒子边框的粗细样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			div{
				width: 500px;
				height: 500px;
				background-color: #ccc;
				/* 在设置粗细之前，首先应该设置边框类型 */
				border-style: solid;
				
				/* border-top-width: 10px;
				border-right-width: 20px;
				border-left-width: 5px;
				border-bottom-width: 30px; */
				
				/* border-width: 10px; */
				/* border-width: 10px 20px; */
				/* border-width: 10px 20px 30px; */
						border-width: 10px 20px 30px 40px;
			}
			
		</style>
	</head>
	<body>
		<div>我是div元素</div>
	</body>
</html>

3.盒子边框的类型样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 500px;
				height: 500px;
				
				border-top-style: solid;
				border-right-style: dashed;
				border-bottom-style: dotted;
				border-left-style: double;
			}
			
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

4.盒子边框按照边设置样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #ccc;
				
				/* 设置上边框为实线、红色、5px */
				/* border-top-style:solid;
				border-top-width: 5px;
				border-top-color: #f00; */
				/* border-top:5px solid #00f;
				border-right:10px dashed #f00;
				border-bottom: 20px dotted #ff0;
				border-left: 40px double #0f0; */
				
				/* 四条边的样式、粗细、颜色一致 */
				border:10px solid #f00;
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

5.盒子外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father{
				border: 2px solid #f00;
			}
			
			.son{
				width: 300px;
				height: 300px;
				border: 1px solid #00f;
				
				/* margin-top: 30px;
				margin-right: 50px;
				margin-bottom: 50px;
				margin-left: 25px; */
				
				/* margin: 50px; */
				/* margin: 30px 50px; */
				/* margin: 30px 50px 80px; */
				margin: 30px 50px 80px 100px;
			}
			
		</style>
	</head>
	<body>
		<!-- 
		 外边距：盒子与盒子之间的距离
		 内边距：盒子里的内容与盒子边框之间的距离
		 
		 
		 -->
		 <div class="father">
			 <div class="son"></div>
		 </div>
	</body>
</html>

6.外边距实现盒子居中对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: #f00;
				text-align: center;
				margin: 30px auto;
			}
			
		</style>
	</head>
	<body>
		<div>hello</div>
	</body>
</html>

7.内边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father{
				border: 1px solid #f00;
				width: 300px;
				/* 设置外层盒子里面内容与边框之间的距离：内边距 */
				/* padding-top: 10px;
				padding-right: 20px;
				padding-bottom: 30px;
				padding-left: 40px; */
				
				/* padding: 10px; */
				/* padding: 10px 20px; */
				/* padding: 10px 20px 30px; */
				padding: 10px 20px 30px 40px;
				
				
			}
			
			.son{
				width: 300px;
				height: 300px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

8.display控制元素的显示和隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 100px;
			}
			
			.first{
				background-color: #ccc;
				display: block;
			}
			
			.second{
				background-color: #f00;
			}
			
			a{
				background-color: #ff0;
				width: 300px;
				height: 100px;
				display: inline;
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<a href="#">qwert</a>
	</body>
</html>

9.display控制元素的显示模式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 100px;
			}
			
			.first{
				background-color: #ccc;
				display: inline;
			}
			
			.second{
				background-color: #f00;
				display: inline;
			}
			
			a{
				background-color: #ff0;
				width: 300px;
				height: 100px;
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="first">1111</div>
		<div class="second">2222</div>
		<a href="#">qwert</a>
		<b>dsadadasd</b>
	</body>
</html>

10.display让元素具备行内元素和块级元素特征

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: #f00;
				margin: 10px;
				display: inline-block;
			}
			
		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</body>
</html>