div+css布局中常用方法汇总
1、让文本框textarea适应内容自动伸缩高度:textarea
2、cursor:pointer 使鼠标变成手形
3、word-wrap:break-word;控制是否断词
4、word-break:keep-all;控制文本不断行
5、最后finally，开始first，虚线dashed，内部里面的inner,外面的外表的outer，注释note，热点hotspot，branding品牌，翻页pageturn，奇数行add
6、透明设置：filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;
html内容文本框7、解决IE中列表高度显示不正确的问题：
*html ul li{float:left;height:1%;}
*html ul li{height:1%;}
8、a:hover在ie6及以下必须加链接才会有效；.over+javascript用在th:hover时ie6及以下才能识别。
9、onfocus='this.blur()',onfocus是获得焦点事件，blur是移除焦点，换句话说就是不让这个链接获得焦点
10、直接模仿iframe产生滚动条#content{heitht: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添加新的对象：
.
css{heght: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主题外观、tool\toolbar工具条、cor\corner转角、圆角、layout布局、searchbox搜索框、dorpmenu下拉菜单、arr\arrow箭头
18、单独写给fox浏览器：class="war-box3" lang="zh" 样式：.war-box3 table:lang(zh){}
19、more用a，不要用span
20、max-height:检索对象的最大高度，由数字和单位组成的长度值，或者百分数，不可为
负数。
min-height:同上，检索对象的最小高度
max-width:同上，检索对象的最大宽度
max-height:同上，检索对象的最小宽度
21、如果用z-index,就要将两个层都设置，这样济览器才能对比。
22、IE6会撑开，可以使用overflow=hidden; 将层的margin-bottom设置为负数，这样可以让下面的层负上来
23、在遇到制作问题而不明原因时，可以用给背景加红或加边框，将问题突出出来；如果实在不出问题的原因，就用排除的方式，查看结构是否有问题，或还是样式表的问题，逐步出问题的原因
24、在表单里，<lable></lable>左浮动后，后面的input无素就会跑上面去（在fox下），原因是父元素p应用了text-indent,只要把归零就好了
25、图片上不要定义padding,把他定义a上面，或li上面，把图片定义成块级
26、在写导航列表时，要把样式写在a上面，不要写在li上面
27、voice-family:"\"}\"";voice-family:inherit;说明：当ie5解析到这儿时就停止了，当ie6解析到这儿时，会继续往下解析
28、当页面调用iframe时，需要在页面刷新时回到页面顶部：<iframe onload="top.scrollto(0,0);" id="dfsarrer" src="" scrolling="no" frameborder="0" marginwidth="0" >
29、当flash页面中有两个，需要叠加时，可以使用下面的代码：flash的margin-bottom:-25px;上面的falsh指定高度，并使用相对定位。例：
#flash1{height:61px;position:relative;}
#flash2{margin:-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上：a{border:4px outset aque}，a:hover{border:4px insed aqua}
34、1em相当于10px，将原来的px除以10，换上em;例：font-size:63%;
35、子选择器招数：例html > body{background-image:url(bg.png)}中间不能有空格
36、属性选择器，例div[id="content"]{}ie7会支持属性选择器，ie6及更低不支持
37、星号hmtl招数(只有IE所有版本支持)，例*html{font-size:small;} 注：在任何常规的css规则开头添加一个通用选择器和一个html类型选择器，这样就会对除ie以外的所有浏览器隐藏这个规则，ie7已经修复了这个规则，现在可以可靠指定ie6及更低。
38、ie\mac注释反斜线招数（只有ie5会隐藏这个规则）
/*hiding form ie5/mac \*/
#nav a{width:5em;}
/* end hack */
39、3px问题：display:inline-block
40、css hack 问题：span .content{color:blue;}
[class=content]{color:red;}/*只有IE5、IE6会显示蓝*/
41、#content{color:red;} /*ie5、6会显示红*/
body > #content{color:blue;}/*ie7、fox会显示蓝*/
#aa + #content{color:#000;}/*只有ie、fox会显示黑*/
42、#content{color:red}
[xmlns] #content{color: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、可以给内容添加一个壳，这样可以给内容两边添加宽度可变的伪填充。例：.shen{margin: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和ie7
52、background:orange;*background:green;注：区别ie7和ff
53、background:orange;*background:green!important;*background:blue;注：区别ff、ie7、ie6
54、ie都能识别*，fox不能识别*；ie6能识别*,但不能识别!important;ie7能识别*，也能识别!
important；fox不能识别*，但能识别!important

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。