1.div和span
1. div和span在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式。
2. div和span的区别在于:span是内联元素(只占用所需位置),div是块级元素(占用一整行)。
3. div能够定义宽度和高度属性,span不能定义。但是可以通过display属性将div与span相互转换。
2.盒模型
margin |
盒子外边距 |
padding |
盒子内边距 |
border |
盒子边框宽度 |
width |
盒子宽度 |
height |
盒子高度 |
3.布局相关属性
3.1 position定位方式
relative |
正常定位 |
absolute |
根据父元素进行定位 |
fixed |
根据浏览器窗口进行定位 |
static |
没有定位 |
inherit |
继承 |
离页面顶点的距离:
left(左)、right(右)、top(上)、bottom(下)
3.2 z-index层覆盖先后顺序(优先级)
优先级高的属性显示会覆盖优先级低的属性显示。
优先级越高,显示在越顶层,优先级相同,按css声明顺序来决定优先级。
3.4 display显示属性
display: none 层不显示
display: block 块状显示,在元素后面换行,显示下一个块元素(可将span转换为div)
display: inline 内联显示,多个块可以显示在一行内(可将div转换为span)
3.5 float浮动属性
float: left 左浮动
float: right 有浮动
3.6 clear清除浮动
clear: both 清除浮动
3.7 overflow溢出处理
overflow:hidden 隐藏超出层大小的内容
overflow:scroll 无论内容是否超出都添加滚动条显示
overflow:auto 超出时自动添加滚动条显示
4.兼容问题
1.兼容性测试工具:
IE Tester
Multibrowser
2.常用的浏览器:
Google chrome
Firefox
opera
3.高效的开发工具
轻量级:Notepad++、sbulime Text、记事本
重量级:WebStorm、Dreamweaver
4. 网页设计工具
fireworks、photoshop
5. 判断IE的方法
条件判断格式: <!--[if 条件 版本]> 显示内容 <![endif]-->
示例:
<!--[if !IE 8]> 这不是IE8 <![endif]--> 判断不等于IE8(改判断只对IE有效)
<!--[if lt IE 8]> 小于IE8 <![endif]--> 判断小于IE8
<!--[if gt IE 8]> 大于IE8 <![endif]--> 判断大于IE8
<!--[if lte IE 8]> 小于等于IE8 <![endif]--> 判断小于等于IE8
<!--[if gte IE 8]> 大于等于IE8<![endif]--> 判断大于等于IE8
<!--[if (gt IE 5) &(lt IE 8)]> 大于等于IE8<![endif]--> 判断大于IE5且小于IE8
<!--[if (IE 5) |(IE 8)]> IE5或IE8<![endif]--> IE5或IE8
<!--[if IE 8)]> 如果是IE8<![endif]--> 判断是IE8