CSS(九)盒子模型+CSS3新知识

最新推荐文章于 2024-01-30 16:40:02 发布

司天宏

最新推荐文章于 2024-01-30 16:40:02 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/qq_41532872/article/details/86372857

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

标准盒子模型


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		   	 div{
		   	 	 width: 100px;
		   	 	 height: 100px;
		   	 }
		   	#first{
		   		 /* 左内边距，即内容到左边框的距离 */
		   	 	/* padding-left:20px ;*/
		   	 	  /* 右内边距，即内容到右边框的距离 */
		   	 	/* padding-right:20px ; */
		   	 	  /* 上内边距，即内容到上边框的距离 */
		   	 	/* padding-top:40px ;*/
		   	 	  /* 下内边距，即内容到下边框的距离 */
		   	 	/* padding-bottom:40px; */
		   	 	/*  统一设置4个方向的内边距 */
		   	 	 padding: 40px;
		   	 	 /* 设置4个方向的边框，值：边框宽度  样式  颜色  dashed:虚线边框   solid:实线边框*/
		   	 	/*  border-top:20px  solid  red;
		   	 	  border-bottom: 20px solid  red;
		   	 	  border-left:20px solid  red;
		   	 	  border-right: 20px solid   red; */
		   	 	 	/*  统一设置4个方向的边框 */
		   	 	 border:10px solid red;
		   	 	 /*设置下边的外边距 */
		   	 /*	margin-bottom: 20px;*/
		   	   /*设置4个方向的外边距 */
		     	margin: 20px;
		   	 }
		   	 #second{
		   	 	 border-left:10px dashed  green;
		   	 	  border-right:10px dashed  green;
		   	 }
		   	 input{
		   	 	 border:5px dashed  green;

		   	 }
		</style>
	</head>
	<body>
		<div id="first" style="background-color: green;">我是div中的内容</div>
	<!--	<hr width="90%" size="2" color="aqua">-->
		<div id="second" style="background-color: pink;">我是div2中的内容</div>
		用户名： <input type="text" >
	</body>
</html>

在这里插入图片描述

清除默认样式


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*  清除默认样式，充分利用整个body */
			 *{
			 	margin: 0;
			 	padding: 0;
			 }
		</style>
	</head>
	<body>
		 <div style="background-color: red;">111</div>
	</body>
</html>

在这里插入图片描述

块级元素居中对齐


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*  清除默认样式，充分利用整个body */
			 *{
			 	margin: 0;
			 	padding: 0;
			 }
			 div{
			 	 /*  设置块级元素左右的margin为auto，会自动适应父元素，在水平方向上居中
			 	  * margin:值1(上下的margin)  值2(左右的margin)
			 	  *  */
			 	margin:0px  auto;
			 	/*margin-top:0px;
			 	margin-bottom: 0px;
			 	margin-left: auto;
			 	margin-right:auto ;*/
			 }
		</style>
	</head>
	<body>
		 <div style="background-color: red; width:90%;">111</div>
	</body>
</html>

在这里插入图片描述

CSS3新知识


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			 	div{
		   	 	 width: 200px;
		   	 	 height: 200px;
		   	 	 /* 设置圆角边框 */
		   	 	border-radius: 20px;
		   	 	text-align: center;
		   	 	line-height: 200px;
		   	 }
		</style>
	</head>
	<body>
			<div id="first" style="background-color: red;">我是div中的内容</div>
	</body>
</html>

在这里插入图片描述