阿巴阿巴的第十天

最新推荐文章于 2023-10-24 11:33:24 发布

PUDINrua

最新推荐文章于 2023-10-24 11:33:24 发布

阅读量62

点赞数

本文链接：https://blog.csdn.net/PUDINrua/article/details/114671809

版权

dw2.0之css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			
			        .box{
			            width: 500px;
			            height: 400px;
						/* border:5px solid green; */
			           /* padding:50px; */
						background-color: pink;
						/* 四个值:上右下左 顺时针 */
						/* 三个值:上 左右 下 */
						/* /* 两个:上下 左右 */
						/* margin-left:200px */
						/* 给左右外边距设置auto(自动),盒子水平居中显示 */
						margin:10px auto;
						
						over-flow: hidden;
			       }
				   
				   
				   
				   .box2{
				   	width:200px;
				   	height:100px;	
				   	border: solid 5px deeppink ;
					padding:50px;
				   	background-color: skyblue;
					margin:50px auto;
				   }
				   
			    
		</style>
		<title>123</title>
	</head>
	<body>
	<div class="box"><b>盒子模型一</b>
		<div class="box2"><b>盒子模型二</b></div>	
	</div>
	
	</body>
</html>

盒子：
内容区（content）
边框（border）
内边距（padding）
外边距（margin）

相邻两个盒子之间同时设置margin，最终取的值是最大的那一个
避免相邻盒子外边距合并：只给其中一个盒子设置外边距

外边距塌陷：嵌套的俩个盒子之间同时设置margin，最终取的值也是最大的一个
避免嵌套盒子外边距塌陷：给父盒子添加边框、或添加padding、或添加overflow：hidden；