前端学习——css的盒子模型和简单的定位

<html>
	<head>
		<title>css的盒子模型和简单的定位</title>
		<meta charset="UTF-8"/>
		<!--
			css的盒子模型学习：
			div标签：
			       块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
			       特点：
			       默认宽度是页面的宽度，但是可以设置。
			       高度默认是没有的，但是可以设置（可以顶开)
			       如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
			盒子模型：
			       外边距：margin
			        作用：  用来设定元素与元素之间的间隔
			        居中设置：margin:0px auto;上下间隔0px,左右水平居中
			        可以根据需求单独的设置上下左右的外边距。
			     边框：border
			           作用：用来设置元素的边框大小
			                    可以单独设置上下左右
			     内边距：padding
			             作用：设置内容和边框之间的距离
			             注意：内边距不会改变内容区域的大小
			             可以单独设置上下左右的内边距
			       内容区域：
			              作用：改变内容区域的大小
			             设置宽和高即可改变内容区域的大小
		--> 
		<style type="text/css">
			img{
				width:49.59%;
			}
			#showdiv{
				border: solid 3px red;
				width: 40%;
				height: 330px;	
				margin-bottom: 10px;
				margin-left: 100px;
				margin: auto;
				padding: 10px;
			}
			#div01{
				border: dashed 2px;
				width: 40%;
				height: 300px;
				margin-left: 100px;
				
			}
			
		</style>
	</head>
	<body><br /><br />
		<div id="showdiv">
			<img src="img/1.jpg" alt="" />
			<img src="img/1.jpg" alt="" />
		</div>
		<div id="div01">
			
		</div>
	</body>
</html>
效果展示：
前端学习——css的盒子模型和简单的定位

猜你喜欢
