content

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
		/*整个大盒子*/
		#content{width:1000px;height:620px;margin:0 auto;}
		/*小盒子,content内的div,给他浮动*/
		#content>div{float:left;}

		#content>h1{color: indianred;size: A5;font-style: inherit;}

		#d1{width:609px;height:377px;margin-bottom:10px;
			background: aliceblue;
				margin-right:10px;}

		#d2{width:381px;height:377px;margin-bottom:10px;
		background: cornsilk}

		#d3{width:376px;height:233px;margin-right:10px;background: mediumturquoise}

		#d4,#d5,#d6{width:198px;height:233px;background: lightpink}

		#d4,#d5{margin-right:10px;background: antiquewhite;}
	</style>
 </head>
 <body>
		<div id="content">
			<div id="d1">1</div>
			<h1 style="float: bottom">pxpxpxpx</h1>
			<div id="d2">2</div>
			<div id="d3">3</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d6">6</div>
		</div>
 </body>
</html>

#content和#content>div的区别

content可以理解为一个大盒子

**是整个这一块**

content>div是值每一小块,即div中的div

这样对设置的大布局下,特别改变小处的样式

 posted on 2020-09-22 16:26  魂蛋  阅读(249)  评论(0编辑  收藏  举报