[size=medium]1. 当设置多个class时，以最靠前的class优先级最高，不以css文件中最靠下的为最优
2. 行内样式 > css样式
3. width=content的宽度
4. background-color在IE的作用区域为content+padding，对于firefox为content+padding+border（当border为粗虚线时，较为明显）。Firefox中border下露出来的是padding的背景（即content的），而IE中露出来的是margin的背景，以padding的左上角为基准点平铺背景图像
5. body是一个特殊的盒子，它的背景色会延伸到margin的部分。
6. padding等属性，如果设置三个值 则依次为 （上） （左右） （下）
7. 行内元素之间的水平margin，是左右margin的总和；
8. 而块级元素的竖直margin存在塌陷现象，较小的margin塌陷到了较大的margin中，即为两个margin中较大者。
9. 父子嵌套时，子块的margin将以父块的content为参考
被设置为负数的块向相反的方向移动，甚至覆盖在另外的块上
10. 当子块的高度加上margin等的高度超过父块的高度时，IE会自动扩大（这是不规范的），而Firefox会保证父元素的height高度完全吻合，而子元素超过父块元素的范围显示。Css规范中，定义了min-height，max-height，min-width，max-width4个属性，Firefox支持，而IE没有实现对这四个属性的支持
11. 将margin设置为负值，会使块向相反的方向移动，甚至覆盖在另外的块上。
12. 在标准流中，块级元素在水平方向会自动伸展，直到包含它的元素的边界
13. 一个float：left，会使Box1宽度不再延伸，而是能容纳下内容的最小宽度，而Box2会顶到原来Box1的位置，文字围绕Box1排列。
14. 当float的div串到下去的时候，遇到拐角的地方就会被卡住，而不一定会移动边上。
15. 使用clear（left right both）清除浮动的影响
16. float的div不在标准流中，父div的范围可能会缩成一条，父div的范围是由标准流内容决定的，与里面的浮动内容无关：可以在父div结束之前，增加一个div，并设定clear：both;margin:0px;padding:0px; border:0
17. position:relative相对于它在原本的标准位置偏移指定的距离，此盒子仍在标准流中，对父亲和兄弟盒子都没有影响。后面的盒子仍以标准流的方式对待它，对父块也没有影响，都好像它占据了原来的位置一样。会撑满未移动前父块的内容，但是移动后超出父块的话，父盒子不会变大，就好像子盒子没有移动一样。偏移的距离是各边与本应位置的距离。（以上是标准流方式的，实际上，对浮动流也是一样的，也同样相对于它在原本的位置，也仍以为它还在原来的位置）
position：absolute以它的最近的一个已经定位（定义了position，且不是设置为static的任意一种方式）的祖先元素为基准进行偏移，以其边框为基准（而IE6中以内容区为基准，即会差padding的宽度，解决方法是在父块css中添加height：1%）。它此盒子从标准流中脱离，对其后的兄弟盒子没有影响，好似这个盒子不存在。如果没有指定水平方向的偏移，则它水平方向上仍在它本应在的位置；如果两个方向都没指定，则仍在原位置，只是脱离了标准流。
Position：fixed以浏览器窗口为基准进行定位（IE6不支持）
《上面这三个配合top left bottom right使用》
static默认的该在的位置
18. z-index默认的值为0，当块被设置了position属性时，该值可设置高低关系，大的在上。
19. display属性可改变标记本来的元素类型。Display：block可以使行内元素变为块级元素，display：inline可以使块级元素变为行内元素，display：none可以隐藏元素
字体
20. 1em是相对于父元素中字母m的宽度，1ex是相对于父元素中x的高度；200%是相对原来应该的大小。
21. 要实现段落首字母大并下沉，<span style=”float:left; font-size:3em”>T</span> （但是如果设置改行line-height：18px，会影响效果，因为span会继承这个属性，其行高也被限制在18px内，可以设置为1.5，则span也会继承为原来的1.5倍行高，就不出问题）
22. 英文字母大小写text-transform：capitalize（单词首字母大写），uppercase，lowercase
23. 段落首字母缩进 text-indent：2em
段落的垂直对齐方式： 1> vertical-align，在目前的浏览器中对块级元素不起作用，只能用作表格单元格的垂直方式；2>而对于一行的div，可通过{height：100px; line-height:100px} 3> 对于多行的，可设置三层div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
原理
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
24. 图像边框 border=1为1像素边框，border=0不显示
25. 同时设置背景图像和背景色时，背景图附带的地方就显示背景图，没有覆盖到的地方就显示背景色
26. background-position：bottom right从元素的右下角开始放置背景（默认为center）
链接与导航
27. a{text-decoration:none;} 样式 去掉下划线
link正常浏览状态的样式；visited被点击过的样式；hover经过时的样式；active单击时，即当前激活时
应注意它们的声明顺序，如平常状态无下划线，而鼠标经过时出现下划线：
a:link, a:visited{text-decoration:none}
a:hover, a:active{text-decoration:underline}
如果交换顺序会覆盖前面的规则，不能达到预期效果
a和a:link都设置没有鼠标经过时的效果，但是当a没有设置href属性时a：link是不起作用的，此时a仍然有效
28. cursor可以设置鼠标指针的样式 pointer为特殊的鼠标指针值，表示将鼠标设置为被激活状态，即鼠标指针经过超链接时，显示为手的状态
29. firefox不支持直接设置a标记的高度和宽度（IE支持）
30. 列表的项目编号用list-style-type设置（decimal circle等），在ul中设置此样式，则ul中所有li都采用，也可以给某li设计特殊样式。
31. 采用图片做列表的项目符号可以1》设置list-style-image：url（），但是这种在两种浏览器中显示效果不一致；2》将list-style-type：none，然后设置li的背景属性background：url（）及padding-left：20px来完成一致的效果。
32.
[/size][color=green][/color]
2. 行内样式 > css样式
3. width=content的宽度
4. background-color在IE的作用区域为content+padding，对于firefox为content+padding+border（当border为粗虚线时，较为明显）。Firefox中border下露出来的是padding的背景（即content的），而IE中露出来的是margin的背景，以padding的左上角为基准点平铺背景图像
5. body是一个特殊的盒子，它的背景色会延伸到margin的部分。
6. padding等属性，如果设置三个值 则依次为 （上） （左右） （下）
7. 行内元素之间的水平margin，是左右margin的总和；
8. 而块级元素的竖直margin存在塌陷现象，较小的margin塌陷到了较大的margin中，即为两个margin中较大者。
9. 父子嵌套时，子块的margin将以父块的content为参考
被设置为负数的块向相反的方向移动，甚至覆盖在另外的块上
10. 当子块的高度加上margin等的高度超过父块的高度时，IE会自动扩大（这是不规范的），而Firefox会保证父元素的height高度完全吻合，而子元素超过父块元素的范围显示。Css规范中，定义了min-height，max-height，min-width，max-width4个属性，Firefox支持，而IE没有实现对这四个属性的支持
11. 将margin设置为负值，会使块向相反的方向移动，甚至覆盖在另外的块上。
12. 在标准流中，块级元素在水平方向会自动伸展，直到包含它的元素的边界
13. 一个float：left，会使Box1宽度不再延伸，而是能容纳下内容的最小宽度，而Box2会顶到原来Box1的位置，文字围绕Box1排列。
14. 当float的div串到下去的时候，遇到拐角的地方就会被卡住，而不一定会移动边上。
15. 使用clear（left right both）清除浮动的影响
16. float的div不在标准流中，父div的范围可能会缩成一条，父div的范围是由标准流内容决定的，与里面的浮动内容无关：可以在父div结束之前，增加一个div，并设定clear：both;margin:0px;padding:0px; border:0
17. position:relative相对于它在原本的标准位置偏移指定的距离，此盒子仍在标准流中，对父亲和兄弟盒子都没有影响。后面的盒子仍以标准流的方式对待它，对父块也没有影响，都好像它占据了原来的位置一样。会撑满未移动前父块的内容，但是移动后超出父块的话，父盒子不会变大，就好像子盒子没有移动一样。偏移的距离是各边与本应位置的距离。（以上是标准流方式的，实际上，对浮动流也是一样的，也同样相对于它在原本的位置，也仍以为它还在原来的位置）
position：absolute以它的最近的一个已经定位（定义了position，且不是设置为static的任意一种方式）的祖先元素为基准进行偏移，以其边框为基准（而IE6中以内容区为基准，即会差padding的宽度，解决方法是在父块css中添加height：1%）。它此盒子从标准流中脱离，对其后的兄弟盒子没有影响，好似这个盒子不存在。如果没有指定水平方向的偏移，则它水平方向上仍在它本应在的位置；如果两个方向都没指定，则仍在原位置，只是脱离了标准流。
Position：fixed以浏览器窗口为基准进行定位（IE6不支持）
《上面这三个配合top left bottom right使用》
static默认的该在的位置
18. z-index默认的值为0，当块被设置了position属性时，该值可设置高低关系，大的在上。
19. display属性可改变标记本来的元素类型。Display：block可以使行内元素变为块级元素，display：inline可以使块级元素变为行内元素，display：none可以隐藏元素
字体
20. 1em是相对于父元素中字母m的宽度，1ex是相对于父元素中x的高度；200%是相对原来应该的大小。
21. 要实现段落首字母大并下沉，<span style=”float:left; font-size:3em”>T</span> （但是如果设置改行line-height：18px，会影响效果，因为span会继承这个属性，其行高也被限制在18px内，可以设置为1.5，则span也会继承为原来的1.5倍行高，就不出问题）
22. 英文字母大小写text-transform：capitalize（单词首字母大写），uppercase，lowercase
23. 段落首字母缩进 text-indent：2em
段落的垂直对齐方式： 1> vertical-align，在目前的浏览器中对块级元素不起作用，只能用作表格单元格的垂直方式；2>而对于一行的div，可通过{height：100px; line-height:100px} 3> 对于多行的，可设置三层div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
原理
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
24. 图像边框 border=1为1像素边框，border=0不显示
25. 同时设置背景图像和背景色时，背景图附带的地方就显示背景图，没有覆盖到的地方就显示背景色
26. background-position：bottom right从元素的右下角开始放置背景（默认为center）
链接与导航
27. a{text-decoration:none;} 样式 去掉下划线
link正常浏览状态的样式；visited被点击过的样式；hover经过时的样式；active单击时，即当前激活时
应注意它们的声明顺序，如平常状态无下划线，而鼠标经过时出现下划线：
a:link, a:visited{text-decoration:none}
a:hover, a:active{text-decoration:underline}
如果交换顺序会覆盖前面的规则，不能达到预期效果
a和a:link都设置没有鼠标经过时的效果，但是当a没有设置href属性时a：link是不起作用的，此时a仍然有效
28. cursor可以设置鼠标指针的样式 pointer为特殊的鼠标指针值，表示将鼠标设置为被激活状态，即鼠标指针经过超链接时，显示为手的状态
29. firefox不支持直接设置a标记的高度和宽度（IE支持）
30. 列表的项目编号用list-style-type设置（decimal circle等），在ul中设置此样式，则ul中所有li都采用，也可以给某li设计特殊样式。
31. 采用图片做列表的项目符号可以1》设置list-style-image：url（），但是这种在两种浏览器中显示效果不一致；2》将list-style-type：none，然后设置li的背景属性background：url（）及padding-left：20px来完成一致的效果。
32.
[/size][color=green][/color]
扫一扫
1398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
