盒子模型(div)

盒子模型

div标签

是块级标签，主要进行网页布局，会将其中的子元素内容作为一个整体来显示

特点

默认宽度是页面的宽度，但可以设置，没有默认高度，也可以设置

如果子元素设置了百分比的高或宽，占据的是div的百分比，不是页面的

注

边界和内边框都不会改变div区域的大小，只是往外扩

<html>
	<head>
		<title>盒子模型学习</title>
		<meta charset="UTF-8"/>
		
		<style type="text/css">
			img{
				width:49.5%;
			}
			#showdiv{
				
				/*可以设置边框大小，也可单独设置上下左右*/
				border:solid 10px;
				
				/*内容区域
					改变内容区域的大小
					设置宽和高就会改变
				*/
				width:40%;
				height:250px;
				
				/*外边框，用margin，可以是上下左右任意，会以这个div为中心，生成一个看不到的外边框
				用来设置元素与元素之间的间隔*/
				margin-bottom:10px;
				/*使元素居中
				100px指上下各100px
				
				一般写的是margin: 0px auto;  上下间隔是0，水平居中
				然后上下按想要的效果挪*/
				margin: 100px auto;
				
				/*内边框 padding
					指内容区域与边框的距离
					可单独设置上下左右
				*/
				padding:10px;
			}
			#div01{
				border:dashed 3px orange;
				width:40%;
				height:200px;
				margin:auto;
			}
		</style>
	</head>
	<body>
		<div id="showdiv">
			<img src="img/6.jpg"/>
			<img src="img/7.jpg"/>
		</div>
		<div id="div01">
		</div>
	</body>
</html>

盒子模型应用

如果要写四个div，并且两个为一行，一般是写两个大的div，再把一行中的两个装进去，如果直接写4个，会被干扰

<html>
	<head>
		<title>盒子模型应用</title>
		<meta charset="UTF-8"/>
		
		<style type="text/css">
			div{
				width:300px;
				height:300px;
			}
			
			#header,#footer{
				width:650px;
				margin:auto;
				margin-top:20px;
			}
			
			#div01{
				border:solid 1px orange;
				float:left;
				margin-right:20px;
			}
			#div02{
				border:solid 1px red;
				float:left;
			}
			#div03{
				border:solid 1px blueviolet;
				float:left;
				margin-right:20px;
				
			}
			#div04{
				border:solid 1px coral;
				float:left;
				
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div id="div01">
			我是div01
			</div>
			<div id="div02">
			我是div02
			</div>
		</div>
		<div id="footer">
			<div id="div03">
			我是div03
			</div>
			<div id="div04">
			我是div04
			</div>
		</div>
	</body>
</html>