一.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>CSS div和css布局
原文地址：https://www.cnblogs.com/chy-op/p/9995852.html