CSS盒子模型

最新推荐文章于 2024-08-26 19:57:53 发布

小脑斧123

最新推荐文章于 2024-08-26 19:57:53 发布

阅读量125

点赞数

分类专栏： Pyhon高级

本文链接：https://blog.csdn.net/weixin_42219287/article/details/106890854

版权

Pyhon高级专栏收录该内容

75 篇文章 0 订阅

订阅专栏

盒子模型解释

元素在页面中显示成一个小方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度（height），盒子的边框（border）、盒子的内容和边框之间的间距（padding）,盒子与盒子之间的间距（margin）。

盒子的宽度 = witdh + padding左右 + border左右

盒子的高度 = height + padding上下 + border上下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子模型</title>
	<style type="text/css">
		.box{
			width:200px;  /*content宽*/
			height:200px;  /*content高*/
			
			/*border-top-color: #000;  黑色简写
			border-top-width: 10px;
			border-top-style: solid;  实线：solid 虚线：dashed 点线：dotted
			*/
			/*顶部边框*/
			border-top: #000 10px solid;

			/*左边边框*/
			border-left: #000 10px dashed; 
			
			/*右边边框*/
			border-right: #000 10px dotted;
			
			/*底部边框*/
			border-bottom: #000 10px solid;

			/*合并写四个边框*/
			border: #000 10px solid;
			
			/*盒子会变长
			padding-top: 20px; 
			padding-left: 40px;
			padding-right: 80px;
			padding-bottom: 100px;
			*/
			
			padding: 40px;  /*四个边的padding值*/
			
			/*
				分别设置盒子的 上边  右边 下边 左边的padding值
				padding: 20px 80px 100px 40px;

				分别设置盒子的 上边  左右 下边 的padding值
				padding: 20px 80px 100p;

				分别设置盒子的 上下边  左右 的padding值
				padding: 20px 80px;

				分别设置盒子的 上下左右 的padding值
				padding: 20px;
			*/ 
		
			/*
			margin-top: 100px;
			margin-left: 100px;
			*/
			margin: 100px 0 0 100px;




			background-color: gold;

		}

	</style>
</head>
<body>
	<div class="box">把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度（height），盒子的边框（border）、盒子的内容和边框之间的间距（padding）,盒子与盒子之间的间距（margin）</div>  <!--快捷键：.box-->

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子模型</title>
	<style type="text/css">
		.box01{
			width:380px;
			height:35px;
			font:bold 20px 'Microsoft Yahei';
			color: #333;

			border-top: 1px solid #f00;
			border-bottom:3px solid #666;
			padding-top: 15px;
			padding-left: 20px;
			line-height: 20px;
		}

		.box02{
			width:380px;
			height:35px;
			font:bold 20px 'Microsoft Yahei';
			color: #333;

			border-top: 1px solid #f00;
			border-bottom:3px solid #666;
			padding-top: 15px;
			/*padding-left: 20px;*/
			/*line-height: 20px;*/
			line-height: 50px;  /*等于高度 = 垂直居中*/
			text-align: 20px  /*首行缩进*/
		}

	</style>
</head>
<body>
	<h3 class="box01"> 新闻列表</h3>
	<br/>
	<h3 class="box02"></h3>

</body>
</html>

Margin使用技巧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> 
		.box01{
			width: 200px;
			height: 200px ;
			background-color: gold;
			/*margin: 50px auto 100px auto;*/
			margin: 50px auto 100px;
		}



		body{
			margin: 0;  /*body本身带有8px的边框*/
		}

		.box02{
			width: 202px;
			height: 156px ;
			background-color: pink;
			/*margin-left: -50px; 缩小50px*/
			margin:50px auto 100px;

		}

		.box02 div{
			width: 200px;
			height: 30px;
			border: 1px solid green;
			/*border-bottom: 0px;  上下单元格有两条线*/
			background-color: gold;
			margin-top: -1px  /*上单元格叠一个像素*/
		}
		
		/*
		.box02 .last{
			border-bottom: 1px solid green;
		}
		*/

	</style>
</head>
<body>
	<div class="box01"></div>
	<div class="box02">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div class="last"></div>
	</div>
</body>
</html>

垂直外边距合并（左右不会合并）

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> 
		.box01,.box02{
			width: 200px;
			height: 200px;
			background-color: gold;
		}

		.box01{
			margin-bottom: 30px;
		}

		.box02{
			margin-top: 0px;
		}

	</style>
</head>
<body>
	<div class="box01">外边距合并</div>
	<div class="box02">外边距合并</div>
</body>
</html>

解决方法：

1、使用这种特性
2、设置一遍的外边距，一般设置margin-top
3、将元素浮动或者定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> 
		.box{
			width: 500px;
			border: 1px solid #000;
			margin: 50px auto 0;
		}

		.box div{
			/*
			margin-left: 20px;
			margin-right: 20px;
			margin-top: 20px;
			margin-bottom: 20px;  margin上下取最大值
			*/
			margin: 20px;
		}

	</style>
</head>
<body>
	<div class="box">
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
		</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
		</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
		</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
		</div>
	</div>
</body>
</html>

margin-top的塌陷

在两个盒子嵌套的时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决办法如下：

1、外部盒子设置一个边框

border: 1px solid #000;

2、外部盒子设置（缺点：元素溢出时会裁剪掉）

overflow: hidden;

3、使用伪元素类

.clearfix:before{
			content: "";
			display: table;
		}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		.clearfix:before{
			content: "";
			display: table;
		}  /*第三种解决塌陷的方法类似于第一种方法*/
		
		.con{
			width: 300px;
			height: 300px;
			background-color: gold;
			/*border: 1px solid #000; 第一种解决塌陷的方法*/
			/*overflow: hidden;  第二种解决塌陷的方法*/

		}	
		
		.box{
			width: 200px;
			height: 100px;
			background-color: green;
			margin-top: 100px;  /*margin塌陷*/
			margin-left: 50px
		}



	</style>
</head>
<body>
	<div class="con clearfix">
		<div class="box">
			
		</div>
	</div>
</body>
</html>