一.div和span
DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式
DIV和span的区别在于，span是内联元素，div是块级元素。div占用整行，span只会占用内容大小的部分。div可以改变size，span不可以改变size
二.盒模型
margin 盒子外边距，增加的话，内盒大小不会变
padding 盒子内边距，增加的话，border向外扩大，内盒大小本身不会变
border 盒子边框宽度
width 盒子宽度
height 盒子高度
三.布局相关的属性
1.position定位方式
relative 正常定位
absolute 根据父元素进行定位
fixed 根据浏览器窗口进行定位
static 没有定位
inherit 继承
2.定位
left，right，top，bottom离页面顶点的距离
3.覆盖顺序优先级
z-index 其值是从0，1，2... 数值越大，优先级越高，那么显示就在最上面
4.display显示属性
display:none 层不显示
display:block 块状显示，在元素后面换行，显示下一个块元素。将内联转换成块状
display:inline 内联显示，多个块可以显示在一行内。将块状转换成内联
5.float浮动属性
left 左浮动
right 右浮动
6.clear清除浮动
clear:both
7.overflow溢出处理
hidden 隐藏超出层大小的内容
scroll 无论内容是否超出层大小都添加滚动条
auto 超出时自动添加滚动条
四.兼容问题及高效
1.兼容性测试工具
IE Tester
Multibrowser
2.常用浏览器
Google chrome
Firefox
opera
3.高效的开发工具
轻量级
notepad++
sublime text
记事本
重量级
webstorm
Dreamweaver
4.网页设计工具
fireworks
photoshop
5.判断IE的方法
条件判断格式
<!--[if 条件 版本]> 那么显示 <![endif]-->
不等于
[if !IE 8] 除了IE8都可以显示
小于
[if lt IE 5.5] 如果IE浏览器版本小于5.5的显示
大于
[if gt IE 5] 如果IE浏览器版本大于5的显示
小于或者等于
[if lte IE 6] 如果IE浏览器版本小于等于6的显示
大于或者等于
[if gte IE 6] 如果IE浏览器版本大于等于6的显示
小于和大于之间
[if (gt IE 5)&(lt IE 7)]
或
[if (IE 6)|(IE 7)]
仅
<!--[if IE 8]>
<!doctype html>
<html>
<head>
<title>Div+Css布局(div+span以及盒模型)</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0px;
padding:0px;
}
/*
div{
background-color:green;
color:#fff;
}
span{
background-color:green;
color:#fff;
}
div{
width:500px;
height:500px;
padding:0px;
margin:0px;
border:solid 10px;
}*/
.div{
width:600px;
height:600px;
margin:0 auto;
background-color:green;
}
.diva{
float:left;
width:240px;
height:240px;
background-color:red;
}
.divb{
float:left;
width:240px;
height:240px;
background-color:yellow;
}
.div div{
margin:10px;
padding:10px;
border:solid 10px;
}
</style>
</head>
<body>
<!--div>麦子学院DIV</div>
<div>麦子学院DIV</div>
<span>麦子学院SPAN</span>
<span>麦子学院SPAN</span-->
<div class="div">
<div class="diva"></div>
<div class="divb"></div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Div+Css布局(布局相关的属性)</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding:0;
margin:0;
}
/*
.div{
width:300px;
height:300px;
background-color:green;
position:relative;
left:10px;
top:10px;
z-index:0;
}
span{
position:absolute;
background-color:#ff6600;
color:#fff;
top:-10px;
right:0;
}
.fixed{
position:fixed;
background-color:#ff6600;
color:#fff;
top:100px;
z-index:1;
}
*/
div{
background:green;
display:inline;
width:200px;
}
span{
background-color:red;
display:block;
width:200px;
}
</style>
</head>
<body>
<!--div class="fixed">
<p>联系电话：1111111</p>
<p>联系QQ：782590844</p>
<p>联系地址：四川省成都市</p>
</div>
<div class="div">
<span>浏览次数：222</span>
</div>
</div-->
<div>麦子学院</div>
<div>麦子学院</div>
<div>麦子学院</div>
<span>麦子学院</span>
<span>麦子学院</span>
<span>麦子学院</span>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Div+Css布局(浮动以及溢出处理)</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding:0;
margin:0;
}
.div{
width:960px;
height:600px;
margin:0 auto;
background-color:#f1f1f1;
}
.left{
float:left;
width:260px;
height:460px;
background:#ccc;
}
.right{
float:right;
width:690px;
height:460px;
background:#ddd;
}
.clear{
clear:both;
}
.bottom{
margin-top:10px;
height:200px;
width:960px;
background:red;
}
.jianjie{
width:260px;
height:120px;
background:red;
overflow:auto;
}
</style>
</head>
<body>
<div class="div">
<div class="left">
<div class="jianjie">
麦子学院麦子学院麦子学院麦子学院<br />
麦子学院麦子学院麦子学院麦子学院<br />
麦子学院麦子学院麦子学院<br />
麦子学院麦子学院麦子学院麦子学院<br />
麦子学院麦子学院麦子学院麦子学院<br />
麦子学院麦子学院麦子学院<br />
麦子学院麦子学院麦子学院<br />
麦子学院麦子学院麦子学院<br />
</div>
</div>
<div class="right"></div>
<div class="clear"></div>
<div class="bottom"></div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/chy-op/p/9995852.html