一.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{ 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{ 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>