内容概要：



一、div和span

(1)块级标签：div

(2)内联标签：span

如图所示：




二、盒模型(重要)


注：可用浏览器的调试工具可查看盒子


（1）margin:盒子外边距



（2）padding:盒子内边距（会改变块的大小）


（3）border:盒子边框宽度

（4）width:盒子宽度

（5）height:盒子高度


例子：


①：外边距和内边距区别：



demo.html



	
		Div+Css布局(div+span以及盒模型)
		
		
		
			body{
				margin:0;
				padding:0;
				background:#C5C1AA;
			}
			div{
				height:500px;
				margin:60px;
				padding:o;
				border:solid 2px black;
				background-color:rgba(255,0,0,0.7);
				}
			div.div1{
				height:400px;
				margin:0 audio;
				border:solid 3px black;
				background-color:rgba(0,0,255,0.7);
			}
			
		
				
				
			
		
	
	
		

			
				欢迎登录系统
				账号:
				密码:


②：盒子模型div摆放例子：



demo.html



	
		Div+Css布局(div+span以及盒模型)
		
		
		body{
			margin:0;
			padding:0;
			background-color:rgba(0,0,255,0.3);
		}
		div{
			width:500px;
			height:500px;
			background-color:rgba(250,128,10,0.8);
			margin:0 auto;   /* 使div居中*/


			border:solid black;
		}
		div.div1{
			float:left;   /* 向左排列/*
			background-color:rgba(255,0,0,0.4);
			border:solid blue;
			height:244px;
			width:244px;	
			margin:0;
			padding:0;
		}