6月8号DIV和SPAN_divaspan区别-CSDN博客

本文链接：https://blog.csdn.net/Dashen__Daiwo/article/details/106629051

6月8号
1.DIV和SPAN
（1）DIV和SPAN的区别在整个HTML中，没有任何意义，他们存在是为了应用css样式
（2）Div和span的区别在于，span是内联元素，div是块级元素
2.盒模型
（1）盒子外边距：margin
（2）盒子内边距：padding
（3）盒子边框宽度：width
（4）盒子高度：height
3.布局相关属性
3.1position定位方式
（1）正常定位：relative
（2）根据父元素进行定位：absolute
（3）Fixed：根据浏览器窗口进行定位
（4）static：没有定位
（5）继承：inherit
3.2定位
（1）left:10px
（2）Right
（3）Top
（4）bottom
3.3Z-index层覆盖先后顺序
3.4Display显示属性
（1）display:none,层不显示
（2）Block块状显示，在元素后面换行,显示下一块元素
（3）inline内联显示，多块可以显示在同一行内
3.5Float浮动属性
（1）left左浮动
（2）Right右浮动
3.6Clear清除浮动
3.7Overflow溢出处理

<!doctype html>
<html>
	<head>
		<title>div+css布局(div+span以及盒模型)</title>
		<meta charset="uft-8">
		<style type="text/css">
		    <!--/*div{
			    background-color:orange;
				color:#fff;
				width:500px;
				height:100px;
				padding:0px;
				margin:10px;'
				border:solid 10px;
			}
		    span{
			    background-color:pink;
				color:#fff;
			}
			body{
			    margin:0;
				border:0;
				padding:0;
			}*/-->
			/*.div{
			    width:600px;
				height:600px;
				background-color:red;
				position:relative;
				left:10px;
				top:10px;
			} 
			<!--.diva{
			    float:left;
			    width:240px;
				height:240px;
				background-color:green;
			}
			.divb{
			    float:left; 
			    width:240px;
				height:240px;
				background-color:blue; 
			}
			.div div{
			    margin:10px;
				padding:10px;
				border:solid 10px;
			}-->
			span{
			    position:absolute;
				background-color:purple;
				color:#fff;
                top:-10px;
                right:0;	
                display:block;
              				
			}
			.fixed{
			    position:fixed;
				background-color:purple;
				color:#fff; 
                top:200px;<!--相对于浏览器窗口进行定位-->
                z-index:1;				
			}
			*/
			body{
			    padding:0;
				margin:0;
			}
			div{
			    width:960px;
				height:600px;
				margin:0;
				background-color:#f1f1f1;
			}
			left{
			    float:left;
				width:260px;
				height:460px
				background:#ccc;
			 }
			 right{
			    float:left;
				width:700px;
				height:460px;
				background-color:#ddd;
			 }
		</style>
	</head>
	<body>
	    <!--  <div>麦子学院DIV</div>   一整行背景表现为橙色
		<span>麦子学院SPAN</span>   仅字体内容部分背景有颜色
		<span>麦子学院SPAN</span>  -->
		<!--div class="div">
						<div class="diva"></div>
						<div class="divb"></div>
			<span>浏览数次：332</span>
			<span>浏览数次：332</span>
			<span>浏览数次：332</span>
		</div>
		<!--div class="fixed">
		    <p>联系电话：111111</p>
			<p>联系QQ：2045935640</p>
			<p>联系地址：四川成都</p>
		</div-->
	  	<div class="div">
		    <div class="left"></div>
			<div class="right"></div>
			<div class="bottom"></div>
		</div>
		
</html>

<!doctype html>
<html>
	<head>
		<title>div+css布局(div+span以及盒模型)</title>
		<meta charset="uft-8">
		<style type="text/css">  				
	body{
			    padding:0;
				margin:0;
			}
			.div{
			    width:960px;
				height:600px;
				margin:0;
				background-color:#f1f1f1;
			}
			.left{
			    float:left;
				width:260px;
				height:460px
				background:#ccc;
			 }
			 .right{
			    float:right;
				width:700px;
				height:460px;
				background-color:#ddd;
			 }
			 .clear{
			    clear:both;
			 }
			.bottom{
				margin-top:10px;
				width:960px;
				height:200px;
				background-color:red;
			}
			.jianjie{
			    background-color:red;
			    width:260px;
				height:20px;
				overflow:hidden; 
			}
		</style>
	</head>
	<body>
		<div class="div">
		    <div class="left">
			    <div class="jianjie">
				  麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院
				</div>
			</div>
			<div class="right"></div>
			<div class="clear"></div>
			<div class="bottom"></div>
		</div>
		
</html>