布局中常用方法汇总.doc

div+css布局中常用方法汇总1、让文本框textarea适应内容自动伸缩高度:textarea style=width:300px; overflow-y:visible2、cursor:pointer 使鼠标变成手形3、word-wrap:break-word;控制是否断词4、word-break:keep-all;控制文本不断行5、最后finally，开始first，虚线dashed，内部里面的inner,外面的外表的outer，注释note，热点hotspot，branding品牌，翻页pageturn，奇数行add6、透明设置：filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;7、解决IE中列表高度显示不正确的问题：*html ul lifloat:left;height:1%;*html ul liheight:1%;8、a:hover在ie6及以下必须加链接才会有效；.over+javascript用在th:hover时ie6及以下才能识别。9、onfocus=this.blur(),onfocus是获得焦点事件，blur是移除焦点，换句话说就是不让这个链接获得焦点10、直接模仿iframe产生滚动条#contentheitht:200px;width:300px;overflow:auto;11、父li设置了高度，而子li的高度不同时，要先给li：height:auto，在嵌套的列表里，将父li 浮动后，要将子li的float=none，子列表的所有内容都float=none，父ul设置了margin时，子ul要margin=0，因为子会应用父的样式12、在写类名、id名尽量写的权级低一些，从尔避免后面覆盖要写很长13、高度不适应：高度不适应主要发生在两个嵌套的对象中，特别当内层对象使用margin或padding时，外层对象不能自动调节高度。解决方法：1)在外层对象加padding或border，会使计算机重新计算高度2)可以修改html添加新的对象：.cssheght:0px;overflow:hidding;14、在制作的时候注意测试在宽频浏览器下的表现15、解决flash在上面档住的问题：wmode=opaque写在param name=wmode value=opaque；解决ie的问题，写在embed里wmode=opaque解决fox的问题16、在ie6里面，图片会默认有一些大于较长尺寸的边，解决的方法是将图片设为display:block,就ok了17、网站代码命名：search搜索、drop下拉、theme主题外观、tooltoolbar工具条、corcorner转角、圆角、layout布局、searchbox搜索框、dorpmenu下拉菜单、arrarrow箭头18、单独写给fox浏览器：class=war-box3 lang=zh 样式：.war-box3 table:lang(zh)19、more用a，不要用span20、max-height:检索对象的最大高度，由数字和单位组成的长度值，或者百分数，不可为负数。min-height:同上，检索对象的最小高度max-width:同上，检索对象的最大宽度max-height:同上，检索对象的最小宽度21、如果用z-index,就要将两个层都设置，这样济览器才能对比。22、IE6会撑开，可以使用overflow=hidden; 将层的margin-bottom设置为负数，这样可以让下面的层负上来23、在遇到制作问题而不明原因时，可以用给背景加红色或加边框，将问题突出出来；如果实在找不出问题的原因，就用排除的方式，查看结构是否有问题，或还是样式表的问题，逐步找出问题的原因24、在表单里，左浮动后，后面的input无素就会跑上面去（在fox下），原因是父元素p应用了text-indent,只要把归零就好了25、图片上不要定义padding,把他定义a上面，或li上面，把图片定义成块级26、在写导航列表时，要把样式写在a上面，不要写在li上面27、voice-family:;voice-family:inherit;说明：当ie5解析到这儿时就停止了，当ie6解析到这儿时，会继续往下解析28、当页面调用iframe时，需要在页面刷新时回到页面顶部：29、当flash页面中有两个，需要叠加时，可以使用下面的代码：flash的margin-bottom:-25px;上面的falsh指定高度，并使用相对定位。例：#flash1height:61px;position:relative;#flash2margin:-25px 0 0 0;30、当在页面中两个div出现空白时，可以给上面的div指定一个高度；有时会遇到文字在鼠标经过时了出现空白，这时需要调整div的宽度；页面在添加内容或维护的时候，一定要小心，因为很容易标签不对称，而造成错位。31、text-overflow:ellipsis;说明：当对象内文本溢出时显示省略；white-space:nowrap;强制同一行显示所有文本32、word-spacing 设置单词之间的空格letter-spacing 设置文本之间的空格text-transform 设置对象文本的大小写font-variant 设置文本是否为小型大写字母text-shadow 设置文本是否有阴影和模糊效果font-stretch 设置文本是否拉伸变形font-size-adjust 设置对象中的文本是否强行同一尽寸visibility:hidden;visibility:visible;对象可视隐藏33、css仿做的3D风格按钮，要定义在a上：aborder:4px outset aque，a:hoverborder:4px insed aqua34、1em相当于10px，将原来的px除以10，换上em;例：font-size:63%;35、子选择器招数：例html bodybackground-image:url(bg.png)中间不能有空格36、属性选择器，例divid=contentie7会支持属性选择器，ie6及更低不支持37、星号hmtl招数(只有IE所有版本支持)，例*htmlfont-size:small; 注：在任何常规的css规则开头添加一个通用选择器和一个html类型选择器，这样就会对除ie以外的所有浏览器隐藏这个规则，ie7已经修复了这个规则，现在可以可靠指定ie6及更低。38、iemac注释反斜线招数（只有ie5会隐藏这个规则）/*hiding form ie5/mac */#nav awidth:5em;/* end hack */39、3px问题：display:inline-block40、css hack 问题：span .contentcolor:blue; class=contentcolor:red;/*只有IE5、IE6会显示蓝色*/41、#contentcolor:red; /*ie5、6会显示红色*/body #contentcolor:blue;/*ie7、fox会显示蓝色*/#aa + #contentcolor:#000;/*只有ie、fox会显示黑色*/42、#contentcolor:redxmlns #contentcolor:blue;/*ie5和ie6是红色的，ie7和fox是蓝色的*/43、IE5不兼容的地方有盒模型，padding是加在内容里的44、ie5错误地允许在注释内部进行转义，这个过滤器的工作方法是在结束注释字符前面添加一个反斜线，其他所有浏览器都会忽略这个转义，并应用后面的规则，但是ie5会认为注释仍然没有结束，因此会把下一个注释前的所有字符都忽略45、如果结合使用星号html招数和注释反斜线过滤器，就成了holly招数，通过结合使用这两个规则，就可以对windows上的ie6和更低版本应用规则46、如果不能和text-indent:-3000px的情况下，可以用绝对定位的position:absolute;left:-3000px来隐藏文本47、尽可能有效地对页面应用简洁的css，css能力很强，不需要给标记文件增加那么多负担，依靠后代选择器，属性选择器，继承等强大特性来完成所有困难的工作48、用后代选择器控制内容区域，可以使用-750px来将次要的左列定义左边49、可以给内容添加一个壳，这样可以给内容两边添加宽度可变的伪填充。例：.shenmargin:0 auto;width:85%;50、下面这两句可以使页面中的英文和数字强制断行，word-wrap:break-word;word-break:break-all；也可以用另外两个属性不断行，word-wrap:normal;word-break:keep-all;51、background:green!important;background:blue;注：区别ie6和ie752、background:orange;*background:green;注：区别ie7和ff53、background:orange;*background:green!important;*background:blue;注：区别ff、ie7、ie654、ie都能识别*，fox不能识别*；ie6能识别*,但不能识别!important;ie7能识别*，也能识别!important；fox不能识别*，但能识别!important55、* ie6 ie7 能识别; !important ie7 fox能识别56、ie6支持下划线，ie7和fox均不支持下划线（推荐），于是可以这样区分：background:orange;*background:green;_backgroun