CSS高级(中)

最新推荐文章于 2024-02-23 21:43:47 发布

疯子在辉

最新推荐文章于 2024-02-23 21:43:47 发布

阅读量70

点赞数

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/m0_53679492/article/details/120090665

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS高级

文章目录

CSS高级

边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
		input{
				width: 400px;
				height: 40px;
				padding: 5px;
				border-radius: 10px;/* 设置圆角边框 */
				outline: none;/* 取消网页默认样式 */
			}
			#in:hover{
				border: blue 2px solid;
			}
			#in:focus{
				border: red 2px solid;
			}
		</style>
	</head>
	<body>
		<div id="">
			<input type="text" name="search" id="in" value="" />						
		</div>
		</body>
</html>

外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;/* 去掉标签的内外边距 */
		}
			div{
				background-color: #00BFFF;
				width: 160px;
				height: 60px;
				padding: 20px ;
				border: 2px red solid;
			}
				
			#d2{
				/*margin: auto; 上下有auto时，值为零 */
				margin-left: auto;/* 左右设置外边距的值为auto，外边距会自动为最大值；外边距的上下不能设置auto，必须给具体的值 */
			}
		</style>
	</head>
	<body>
		<!-- 
		 外边距：一个标签到另一个标签的距离，不会影响标签的大小，会影响标签的位置。
		 -->
		 <div id="d1">
		 	
		 	<img src="img/logo.png" >
		 </div>
		 <div id="d2">
		 	
		 	<img src="img/logo.png" >
		 </div>
		 <p>诗和雪缴缠</p>
	</body>
</html>

文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.dh{
				background-color: #0000FF;
				width: 200px;
				float: left;
				padding: 10px;
				text-align: center;
			}
			#d1{
				background-color: #FF0000;
				height: 100px;
				width: 1000px;
				margin:10px auto;
			}
			#dh_box{
				margin: auto;
				width: 1100px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 文档流：标签在网页中的默认排放顺序：从左至右，从上到下，一个标签接一个标签排放
		 块级标签占一行，行级标签一个接一个，直到一行放不下才会重新开启一行。
		 网页布局就是通过浮动、定位来打破默认文档流。
		 浮动：让标签脱离原来的文档流，漂浮起来，把原来的空间释放出来。
		 行级标签，块级标签都可以浮动，浮动后，标签的宽度为内容的宽度，可以设置宽度
		 -->
		 
		 <div id="dh_box">
		 	
		 
		 <div class="dh">首页</div>
		 <div class="dh">公司</div>
		 <div class="dh">新闻</div>
		 <div class="dh">联系客服</div>
		 <div class="dh">关于我们</div>
		 <!--
		 浮动的问题：不占原来文档流中的空间，下面的标签就会向上移动
		 高度塌陷，不占原来空间，导致父级标签没有撑开
		 解决办法：1、手动给父级标签，设置一个高度
		 				  2、清除浮动：自动根据浮动标签的高度撑开父级标签
		 -->
		 <div style="clear: left;"> </div>
		 </div>
		 <div id="d1"> </div>
	
		
	</body>
</html>