DIV+CSS经验总结.docxVIP

DI V+CSS经验总结1、网页居中显示：需要设置两个地方，一个是body，一个是外边框di v。CSS：2、文字垂直居中显示：在DIV中定义一个行高与其高度相同即可。CSS：3、图片垂直居中显示：在i mg标签中加入al i gn=absmiddl e 即可。4、清除浮动：如果在同一行上有几个DIV并列显示，那么必须在其中加入清除浮动代码，如果在一行上只是一个DIV，好象不必清除浮动。CSS：HTML示例：5、三列结构中的的DIV写法：适用于左右栏是窄幅，中栏为主要内容显示，让其宽度自适应。CSS：HTML示例：6、textarea在Fi reFox中不能自动换行的处理：有时我们可能会遇到这种现象，在IE中可以自动换行，但在FF中就是不行，即使加了 word-break:break-al l ;word-warp:warp;也没有效果，怎么回事呢？主要原因是因为我们加入到textarea中的英文字符或代码过长，造成它误识别为一个单词所致。解决方法也很简单，就是在内容中，人为加一些空格，让FF自动识别为多个单词，从而就能正确换行了。7、设置ul 表列缩进值：默认情况下，ul 列表是缩进两个字符显示列表项目的，我们可以通过设置负边界值达到控制其缩进值的目的。CSS：默认值是0，负值表示向左移，正值表示向右移。8、水平导航条的制作示例：HTML代码如下：CSS中，首先清除ul 的l i st-styl e、margi n和paddi ng：然后，可以将l i 的di spl ay属性设置了i nl i ne或者设置fl oat为l eft，di spl ay l i 可能会出现bug，所以我一般用fl oat l eft的方法：附：fi reFox IE css 差异1 针对Fi refox i e6 IE7的Css样式 现在大部分都是用!i mportant来hack，对于i e6和fi refox测试可以正常显示，但是i e7对! i mportant可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“ *+Html” ，现在用IE7浏览一下，应该没有问题了。 下载带有 Googl e 工具栏的 Fi refox， 上网冲浪更惬意。现在写一个CSS可以这样： #1 { col or: #333; } /* Moz */ * html #1 { col or: #666; } /* IE6 */ *+html #1 { col or: #999; } /* IE7 */ 那么在fi refox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。2 css布局中的居中问题 body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE 这样设定就已经可以了。但在mozi l l a中不能居中。解决办法就是在子元素定义时候设定时再加上“ MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 。需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个di v，只要在每个拆出的di v里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。3 盒模型不同解释.#box{ wi dth:600px; //fori e6.0- w\idth:500px; //for ff+i e6.0}#box{ wi dth:600px!i mportant //for ff wi dth:600px; //for ff+i e6.0wi dth /**/:500px; //fori e6.0-} 4 浮动i e产生的双倍距离#box{fl oat:l eft;wi dth:100px;margi n:0 0 0 100px; //这种情况之下IE会产生200px的距离 di spl ay:i nl i ne; //使浮动忽略}这里细说一下bl ock,i nl i ne两个元素,Bl ock元素的特点是:总是在新行上开始,高度,宽度,行高, 边距都可以控制(块元素);Inl i ne元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);#box{ di spl ay:bl ock; //可以为内嵌元素模拟为块元素 di spl ay:i nl i ne; //实现同一行排列的的效果 5 IE与宽度和高度的问题IE不认得min-这个