前端页面布局div学习笔记

margin:div之间的间隔,不影响div的尺寸大小

border :div边距,一般用于显示div的位置

padding:一般用于调整div里的内容位置

属性:left/right/top/bottom

代码块:

<!DOCTYPE html>
<html>
	<head>
		<style>
			/* 样式分为id和class样式 ,对应div定义#和. */
			#div1{
				color: blue; 
				background: yellow;
				border: black 50px;
				/* dashed:虚线 solid:实线 */
				border-style: solid;
				box-sizing: border-box;/* 固定大小 */
				/* 
				 margin:  可用设置两个或者多个div之间的间隔大小
				 border:  div的边界设置,不影响div尺寸的大小
				 padding: div的填充物,div里的内容会随着padding的边距大小设置而变化
				 
				 */
				padding-bottom: 100px;
				padding-left: 100px;
			}
			div{
				/* 向左靠 */
				float: left;  
				color: red; 
				width: 300px; 
				height: 400px; 
				background: gray;
				margin: 20px 20px;
			}
			.div2{
				padding-left: 100px;
				box-sizing: border-box;
			}

		</style>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="div1">
			aaa
		</div>
		
		<div class="div2">
			bbb
		</div>
		
		<div>
			ccc
		</div>
	</body>
</html>

效果图:

发布了109 篇原创文章 · 获赞 2 · 访问量 5704

猜你喜欢

转载自blog.csdn.net/Seven71111/article/details/103456270