css 盒子模型

最新推荐文章于 2025-02-07 20:14:20 发布

不豫

最新推荐文章于 2025-02-07 20:14:20 发布

阅读量108

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_44912697/article/details/100784404

版权

前端专栏收录该内容

11 篇文章

订阅专栏

盒子模型知识点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: green; 

/*边框样式*/
			/*border-top-color: #000;
			border-top-width: 3px;
			border-top-style: solid; 单独使用*/
			/* 实线 solid  虚线 dashed 点线 dotted*/

			/*border-top:3px solid #000;

			border-right: 3px dashed #000;

			border-left:  3px dotted #000;

			border-bottom: 3px dotted #000;  简化版*/

			/* 群攻 */
			border:3px dotted #000;

/*内容与边框距离  注格子长宽会变 (height width是指内容的长宽)*/
			/*padding-left: 20px;
			padding-top: 20px;
			padding-bottom: 20px;
			padding-right: 20px;*/
			padding: 20px ;  
			/*顺时针方向  3个值时，左右为中 2个值时，上下为一，左右为二*/

/*盒子与浏览器距离*/
			/*margin: 100px;*/
			/*居中*/
			/*margin: 100px auto ;*/
			
		}
		body{
			/*盒子贴边（body自带8px空间）*/
			margin:0px;

		}
		
		.box2{
			width: 202px;
			height: 156px;
			background-color: gold;
			margin: 100px auto;

		}

	/*	.box2 div{
			width: 200px;
			height: 30px;
			border: 1px solid green;
			border-bottom: 0px;
		}
		.box2 .last{
			border-bottom: 1px solid green;
		}*/
/*或者*/
         .box2 div{
         	width: 200px;
			height: 30px;
			border: 1px solid green;
			margin-top: -1px;
			/*合并技巧 只占1px*/
         }
		


	</style>
</head>
<body>
	<div class="box">撒娇哦安静的开发雕刻手法和进口安哈斯哦哈氨基酸开始好的u爱哦符合度四ui饿啊我会哈都恢复爱哦会徽的手机发额安徽哦色戒发嗲的卡拉水平的卡拉大大的卡拉借读费怕速度快垃圾地方了多久啊的杀富济贫卡尔皮肤杜甫 </div>
	<div class="box2">
		<div ></div>
		<div ></div>
		<div></div>
		<div></div>
		<div class="last"></div>
	</div>
	
</body>
</html>

margin作用

1.设置元素水平居中 margin：100px auto;
2.margin负值让元素位移并边框合并
3.垂直合并

垂直合并

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style type="text/css">
		.box{
			width: 170px;
			height: 170px;
			background-color: gold;

			border:10px solid #000;

			padding-top:20px;
			padding-left:20px;

			
		}
		/*垂直距离合并 距离取两者中较大的*/
		.box2 .l1,.l2{
			width: 200px;
			height: 30px;
			background-color: gold;
		}
         .box2 .l1{
         	margin-bottom: 30px;
         }
         .box2 .l2{
         	margin-top: 20px;
         }
         
	</style>
</head>
<body>
	<div class="box">安徽省撒和都是进口的环境安航空的发挥哦啊好的爱的后悔啥都将哦读书打火机看</div>
	<div class="box2">
		<div class="l1">1</div>
		<div class="l2">2</div>
	</div>
</body>
</html>