CSS -------- div盒子模型

最新推荐文章于 2024-08-25 14:00:04 发布

qq_42412646

最新推荐文章于 2024-08-25 14:00:04 发布

阅读量285

点赞数 1

本文链接：https://blog.csdn.net/qq_42412646/article/details/102643987

版权

由于html对网页的布局太过复杂，我们在css引入了块处理模型，来方便网页布局。

<html>
	<head>
		<title>盒子模型div</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			img{
				width: 250px;
				height: 300px;
			}
			div{
				width: 300px;
				height: 300px;
				text-align: center;
				margin: 20px;
				/*background: pink;*/
				/*text-align-last: center;*/
			}
			#top,#bottom{
				width: 800px;
				margin: auto;
				margin-top: 30px;
			}
			#div01{
				float: left;
				border: solid 1px red;
				margin-right: 30px;
			}
			#div02{
				float: left;
				border: solid 1px yellow;
				margin-left: 30px;
			}
			#div03{
				float: left;
				border: solid 1px aqua;
				margin-right: 30px;
			}
			#div04{
				float: left;
				border: solid 1px pink;
				margin-left: 30px;	
			}
				
		</style>
	</head>
	<body>
		<div id="top">
			<div id="div01">
				<img src="../img/0.jpg" alt="" />
			</div>
			<div id="div02">
				<img src="../img/9.jpg" alt="" />
			</div>
		</div>
		<div id="bottom">
			<div id="div03">
				<img src="../img/4.jpg" alt="" />
			</div>
			<div id="div04">
				<img src="../img/8.jpg" alt="" />
			</div>
		</div>
		
	</body>
</html>

div标签：块级标签，来进行网页布局

设置盒子的大小（宽和高），其中宽度默认是页面的宽度，高度默认没有。其内部的子元素如果是百分比占的是div的百分比，如果是像素则是整个页面的像素。

盒子模型：

外边距：margin:用来设置元素和元素之间的距离。而margin:0px auto,设置上下间隔为0px，左右的距离为居中。

边框：border:用来设置元素的边框大小。可以单独设置也可以依附于其他的盒子。

内边框：padding：设置内容与边框之间的距离，注：内边距不会改变内容区域的大小（可以单独设计大小）