【无标题】

妧徽

于 2024-05-10 12:46:43 发布

阅读量103

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/woiyuan/article/details/137869490

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			*{   /* 通配符:指所有标签 */
				margin: 0;
				padding: 0;
			}/* 初始化所有标签的外边距和内边距,写在样式中最开始的位置 */
			.box1{/* solid实线,dotted点线,dashed虚线 */
				border:5px dotted rgb(241,23,189);/* 边框:大小px 实线 颜色 */padding:10px ;/* nei边距 */
				/* top上,bottom下,left左,right右,margin外边距 */
				width: 200px;
				height: 200px;
			}
			.box2{
				border:3px rgb(167,89,246) solid;
				border-top:5px solid #aaaaff;padding:10px ;
				border-bottom:5px #ff5500 dashed;
				width: 200px;
				height:200px;
				font-size:30px;
				/* pandding-top:25px;
				pandding-left:25px; */
				/* 复合写法顺序为四个值：上右下左；三个值：上 （左右）下；俩个值：（上下） （左右）*/
				padding: 10px 30px;
			}
			.box3{
				width: 500px;
				height: 500px;
				background-color: #aaaaff;
				margin: 10px auto 0;/* 水平居中，设置块级盒子,给盒子左右外边距设置为auto */
				margin-bottom: 80px;
			}
			.box4{
				width: 300px;
				height: 300px;
				background-color: #ff5500;
				margin-top: 120px;
			}
			.wbox{
				width: 700px;
				height: 700px;
				background-color: #ff5500;
				margin-top: 100px;
				/*3. overflow: hidden; */
				/*2. padding-bottom: 100px; */
				 /* 1.border:  1px solid red; */
			}
			.nbox{
				
				width: 500px;
				height: 500px;
				background-color: aquamarine;
				margin: 100px 100px;
			}
			/* 1.相邻俩个块级盒子外边距效果取最大的盒子元素 ，所以一般只给一个盒子设置外边距
				2.嵌套的块级盒子外边距的塌陷
				解决方法：1.给父盒子加边框
						2.给大盒子加内边距(可能导致其盒子被撑大)
						3.为父盒子加overflow:hidden*/
		</style>
	</head>
	<body>
		<div class="box1">hello world</div><!-- div盒子标签 -->
		<div class="box2">hello box</div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="wbox">
			<div class="nbox"></div>
		</div>
	</body>
</html>