Div+CSS精讲(北大青鸟内部教员技术提升讲座)幻灯片.ppt

讲座 Div+CSS进阶 优势 为什么要使用Div+CSS布局 形式与内容分离 大大减少页面代码，提高页面浏览速度 机构清晰，有利于SEO 缩短改版时间， 布局更方便 一次设计，多次使用 CSS模型 块，内联 Block block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度div, p, h1, form, ul 和 li是块元素的例子。 Inline inline元素的特点是： 和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。span, a, label, input, img, strong 和em是inline元素的例子。 浮动 float:left;(左浮动) 使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。 应用于布局和横向菜单 块切换 什么情况下需要进行切换？ 让一个inline元素从新行开始； 让块元素和其他元素保持在一行上； 控制inline元素的宽度（对导航条特别有用）； 控制inline元素的高度； 无须设定宽度即可为一个块元素设定与文字同宽的背景色。 兼容性 CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异 DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 FF: 支持 !important, IE 6则忽略, 可用 !important 为 FF IE7特别设置样式. div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 兼容性 CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异 cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;} 　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE 不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px} 　 　重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 注意事项 float的div一定要闭合。 加上 div class=“clear”/div，这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 注意事项 margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline; 例如： #div id=imfloat/#div 　　相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} Thank you * * * *