Jan
11
保留意见：过分争执无益自己且又有失涵养。通常，应不急于表明自己的态度或发表意见，让人们捉摸不定。谨慎的沉默就是精明的回避。
认识自己：促进自己最突出的天赋，并培养其它方面。只要了解自己的优势，并把握住它，则所有的人都会在某事显赫。
决不夸张：夸张有损真实，并容易使人对你的看法产生怀疑。精明者克制自己，表现出小心谨慎的态度，说话简明扼要，决不夸张抬高自己。过高地估计自己是说谎的一种形式。它能损坏你的声誉，对你的人际关系产生十分不好的影响。有损你的风雅和才智。
适应环境：适者生存,不要花太多精力在杂事上，要维护好同事间的关系。不要每天炫耀自己，否则别人将会对你感到乏味。必须使人们总是感到某些新奇。每天展示一点的人会使人保持期望，不会埋没你的天资。
取长补短：学习别人的长处，弥补自己的不足。在同朋友的交流中，要用谦虚、友好的态度对待每一个人。把朋友当做教师，将有用的学识和幽默的言语融合在一起，你所说的话定会受到赞扬，你听到的定是学问。
言简意赅：简洁能使人愉快，使人喜欢，使人易于接受。说话冗长累赘，会使人茫然，使人厌烦，而你则会达不到目的。简洁明了的清晰的声调，一定会使你事半功倍。
决不自高自大：把自己的长处常挂在嘴边,常在别人面前炫耀自己的优点。这无形贬低了别人而抬高了自己，其结果则是使别人更看轻你。
决不抱怨：抱怨会使你丧失信誉。自己做的事没成功时,要勇于承认自己的不足，并努力使事情做圆满。适度的检讨自己，并不会使人看轻你，相反总强调客观原因，抱怨这，抱怨那，只会使别人轻视你。
不要说谎、失信：对朋友同事说谎会失去朋友同事的信任,使朋友、同事不再相信你，这是你最大的损失。要避免说大话，要说到做到，做不到的宁可不说。
目光远大：当财运亨通时要想到贫穷，这很容易做到。聪明人为冬天准备。一定要多交朋友。维护好朋友同事之间的关系，总有一天你会看重现在看来似乎并不重要的人或事。
Jan
11
c/s 指的是Client/server结构，是一个客户机/服务器结构，一般基于局域网开发工作。
b/s 指的是Browser/Server结构，是一个基于浏览器的结构，一般可用于基于广域网的开发工作。
-------------------------------------------------------------------------------------------------------------
C/S 对应的传统软件开发模式，S：服务器，可以是数据库服务器；C：客户端程序，一般是一些数据库应用的前端界面程序。这种模式将业务逻辑放到客户端处理，尽管效率很高，但造成维护困难（每次升级需要将所有的客户端程序升级）
B/S 是目前较流行的开发模式，是多层应用开发的一种。S：有两层，一层是DBS，即数据库服务器；另一层是AS，即应用服务器，例如WebSphere、WebLogic、Tomcat、JBoss等。B：客户端浏览器，一般是IE。这种模式的好处是，业务逻辑放在AS这一层，维护很方便，但效率上会有一些损失。
具体问题，具体分析，软件架构是为项目服务的，不必为了 B/S而B/S
------------------------------------------------------------------------------------------------
B2C是"企业对客户"的简称，指Internet电子商务中的零售部分。
与之相对的是B2B，或称作"企业对企业"。
b/s 指的是Browser/Server结构，是一个基于浏览器的结构，一般可用于基于广域网的开发工作。
-------------------------------------------------------------------------------------------------------------
C/S 对应的传统软件开发模式，S：服务器，可以是数据库服务器；C：客户端程序，一般是一些数据库应用的前端界面程序。这种模式将业务逻辑放到客户端处理，尽管效率很高，但造成维护困难（每次升级需要将所有的客户端程序升级）
B/S 是目前较流行的开发模式，是多层应用开发的一种。S：有两层，一层是DBS，即数据库服务器；另一层是AS，即应用服务器，例如WebSphere、WebLogic、Tomcat、JBoss等。B：客户端浏览器，一般是IE。这种模式的好处是，业务逻辑放在AS这一层，维护很方便，但效率上会有一些损失。
具体问题，具体分析，软件架构是为项目服务的，不必为了 B/S而B/S
------------------------------------------------------------------------------------------------
B2C是"企业对客户"的简称，指Internet电子商务中的零售部分。
与之相对的是B2B，或称作"企业对企业"。
Jan
10
window.event
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。
鼠标当前坐标(加上滚动条滚过的距离)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。
标签的x和y的坐标位置：style.posLeft 和 style.posTop
IE：有。
FF：没有。
通用：object.offsetLeft 和 object.offsetTop。
窗体的高度和宽度
IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。
添加事件
IE：element.attachEvent("onclick", func);。
FF：element.addEventListener("click", func, true)。
通用：element.onclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如：element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。
标签的自定义属性
IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。
FF：不能用div1.value和div1["value"]取。
通用：div1.getAttribute("value")。
父节点、子节点和删除节点
IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
画图
IE：VML。
FF：SVG。
CSS：透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
CSS：圆角
IE：不支持圆角。
FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;。
CSS：双线凹凸边框
IE：border:2px outset;。
FF：-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。
鼠标当前坐标(加上滚动条滚过的距离)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。
标签的x和y的坐标位置：style.posLeft 和 style.posTop
IE：有。
FF：没有。
通用：object.offsetLeft 和 object.offsetTop。
窗体的高度和宽度
IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。
添加事件
IE：element.attachEvent("onclick", func);。
FF：element.addEventListener("click", func, true)。
通用：element.onclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如：element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。
标签的自定义属性
IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。
FF：不能用div1.value和div1["value"]取。
通用：div1.getAttribute("value")。
父节点、子节点和删除节点
IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
画图
IE：VML。
FF：SVG。
CSS：透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
CSS：圆角
IE：不支持圆角。
FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;。
CSS：双线凹凸边框
IE：border:2px outset;。
FF：-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。
Jan
9
W3C说是一个标准,不如说是一个麻烦,FireFox大家都说好用,但我宁愿它没有!! 苦了这些程序员,哎
以下细节只针对IE和FireFox，其它浏览器并未测试
1.DOCTYPE 影响 CSS 处理
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
10.IE5 和IE6的BOX解释不一致
IE5下
div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
就能解决大部分问题
12.对div设置水平居中对齐时，要给子div加上一句"margin:auto"以兼容FireFox浏览器
13.当div的布局并没有如text-align设置的那样排列时，尝试用float来实现
14.将
以下细节只针对IE和FireFox，其它浏览器并未测试
1.DOCTYPE 影响 CSS 处理
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
10.IE5 和IE6的BOX解释不一致
IE5下
div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
就能解决大部分问题
12.对div设置水平居中对齐时，要给子div加上一句"margin:auto"以兼容FireFox浏览器
13.当div的布局并没有如text-align设置的那样排列时，尝试用float来实现
14.将
标签的样式改成:margin:0px;line-height:XXpx，避免在FireFox浏览器下发生一些意想不到的结果
15.想要消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;，其中margin属性对IE有效，padding属性对FireFox有效
16.padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
注意事项：
1、float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)
<#div id="floatA" >
<#div id="floatB" >
<#div id="NOTfloatC" >
这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
在
<#div class="floatB">
<#div class="NOTfloatC">
之间加上
<#div class="clear">
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：
.clear{
clear:both;}
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<#div id="imfloat">
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
3、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
5、最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过
Jan
9
The links in the "Property" column point to more useful information about the specific property.
在"属性"列中的连接可以提供更详尽的属性信息。
支持的浏览器: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
在W3C栏目下显示的数字为CSS版本(CSS1或CSS2)
Background
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| background | A shorthand property for setting all background properties in one declaration 一个速记属性来用一个声明设置所有背景属性 | background-color background-image background-repeat background-attachment background-position | 4 | 1 | 6 | 1 |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page 设置背景图片为固定还是滚屏的 | scroll fixed | 4 | 1 | 6 | 1 |
| background-color | Sets the background color of an element 为一元素设置背景颜色 | color-rgb color-hex color-name transparent | 4 | 1 | 4 | 1 |
| background-image | Sets an image as the background 设置一图片做为背景 | url none | 4 | 1 | 4 | 1 |
| background-position | Sets the starting position of a background image 设置背景图片的起始位置 | top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos | 4 | 1 | 6 | 1 |
| background-repeat | Sets if/how a background image will be repeated 如果背景有重复图片的话就用这个设置 | repeat repeat-x repeat-y no-repeat | 4 | 1 | 4 | 1 |
Border
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| border | A shorthand property for setting all of the properties for the four borders in one declaration 设置四边属性的快速声明 | border-width border-style border-color | 4 | 1 | 4 | 1 |
| border-bottom | A shorthand property for setting all of the properties for the bottom border in one declaration 设置底部边框属性的快速声明 | border-bottom-width border-style border-color | 4 | 1 | 6 | 1 |
| border-bottom-color | Sets the color of the bottom border 设置底部边框颜色 | border-color | 4 | 1 | 6 | 2 |
| border-bottom-style | Sets the style of the bottom border 设置低部边框样式 | border-style | 4 | 1 | 6 | 2 |
| border-bottom-width | Sets the width of the bottom border 设置底部边框宽度 | thin medium thick length | 4 | 1 | 4 | 1 |
| border-color | Sets the color of the four borders, can have from one to four colors 设置四边颜色 | color | 4 | 1 | 6 | 1 |
| border-left | A shorthand property for setting all of the properties for the left border in one declaration 设置左边框属性 | border-left-width border-style border-color | 4 | 1 | 6 | 1 |
| border-left-color | Sets the color of the left border 设置左边框颜色 | border-color | 4 | 1 | 6 | 2 |
| border-left-style | Sets the style of the left border 设置左边框样式 | border-style | 4 | 1 | 6 | 2 |
| border-left-width | Sets the width of the left border 设置左边框宽度 | thin medium thick length | 4 | 1 | 4 | 1 |
| border-right | A shorthand property for setting all of the properties for the right border in one declaration 设置右边框所有属性 | border-right-width border-style border-color | 4 | 1 | 6 | 1 |
| border-right-color | Sets the color of the right border 设置右边框颜色 | border-color | 4 | 1 | 6 | 2 |
| border-right-style | Sets the style of the right border 设置右边框样式 | border-style | 4 | 1 | 6 | 2 |
| border-right-width | Sets the width of the right border 设置右边框宽度 | thin medium thick length | 4 | 1 | 4 | 1 |
| border-style | Sets the style of the four borders, can have from one to four styles 设置四边样式 | none hidden dotted dashed solid double groove ridge inset outset | 4 | 1 | 6 | 1 |
| border-top | A shorthand property for setting all of the properties for the top border in one declaration 设置顶边所有属性 | border-top-width border-style border-color | 4 | 1 | 6 | 1 |
| border-top-color | Sets the color of the top border 设置顶边颜色 | border-color | 4 | 1 | 6 | 2 |
| border-top-style | Sets the style of the top border 设置顶边样式 | border-style | 4 | 1 | 6 | 2 |
| border-top-width | Sets the width of the top border 设置顶边宽度 | thin medium thick length | 4 | 1 | 4 | 1 |
| border-width | A shorthand property for setting the width of the four borders in one declaration, can have from one to four values 设置四边宽度 | thin medium thick length | 4 | 1 | 4 | 1 |
Classification
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| clear | Sets the sides of an element where other floating elements are not allowed 设置一元素的两边都不允许有其他元素进行浮动 | left right both none | 4 | 1 | 4 | 1 |
| cursor | Specifies the type of cursor to be displayed 指定游标所显示的类型 | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 4 | 1 | 6 | 2 |
| display | Sets how/if an element is displayed 设置元素(是否/怎样)显示 | none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption | 4 | 1 | 4 | 1 |
| float | Sets where an image or a text will appear in another element 设置在另一元素里的图片或是文字将在哪个位置显示 | left right none | 4 | 1 | 4 | 1 |
| position | Places an element in a static, relative, absolute or fixed position 将元素以static, relative, absolute或是固定的方式进行定位 | static relative absolute fixed | 4 | 1 | 4 | 2 |
| visibility | Sets if an element should be visible or invisible 设置元素显示或是不显示 | visible hidden collapse | 4 | 1 | 6 | 2 |
Dimension
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| height | Sets the height of an element 设置元素的高度 | auto length % | 4 | 1 | 6 | 1 |
| line-height | Sets the distance between lines 设置两行间的距离（行高） | normal number length % | 4 | 1 | 4 | 1 |
| max-height | Sets the maximum height of an element 设置元素的最大高度 | none length % | - | 1 | 6 | 2 |
| max-width | Sets the maximum width of an element 设置元素的最大宽度 | none length % | - | 1 | 6 | 2 |
| min-height | Sets the minimum height of an element 设置元素的最小高度 | length % | - | 1 | 6 | 2 |
| min-width | Sets the minimum width of an element 设置元素的最小宽度 | length % | - | 1 | 6 | 2 |
| width | Sets the width of an element 设置元素的宽度 | auto % length | 4 | 1 | 4 | 1 |
Font
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| font | A shorthand property for setting all of the properties for a font in one declaration 快速设置所有字体属性的声明 | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar | 4 | 1 | 4 | 1 |
| font-family | A prioritized list of font family names and/or generic family names for an element 一份为元素准备的字体系列优先列表 | family-name generic-family | 3 | 1 | 4 | 1 |
| font-size | Sets the size of a font 设置字体大小 | xx-small x-small small medium large x-large xx-large smaller larger length % | 3 | 1 | 4 | 1 |
| font-size-adjust | Specifies an aspect value for an element that will preserve the x-height of the first-choice font 指定首选字体x高度 | none number | - | - | - | 2 |
| font-stretch | Condenses or expands the current font-family 当前字体系列的合并或扩展 | normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded | - | - | - | 2 |
| font-style | Sets the style of the font 设置字体样式 | normal italic oblique | 4 | 1 | 4 | 1 |
| font-variant | Displays text in a small-caps font or a normal font 让字体显示为小号或正常 | normal small-caps | 4 | 1 | 6 | 1 |
| font-weight | Sets the weight of a font 设置字体的粗细 | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 | 4 | 1 | 4 | 1 |
Generated Content
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| content | Generates content in a document. Used with the :before and :after pseudo-elements 通过使用 :before和 :after 伪元素 生成文档里的内容 | string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote | 1 | 6 | 2 | |
| counter-increment | Sets how much the counter increments on each occurrence of a selector 设定当一个选择符(selector)发生时计数器增加的值。 | none identifier number | 2 | |||
| counter-reset | Sets the value the counter is set to on each occurrence of a selector 将指定选择符(selector)的计数器复位 | none identifier number | 2 | |||
| quotes | Sets the type of quotation marks 设置引用标记类型 | none string string | - | 1 | 6 | 2 |
List and Marker
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| list-style | A shorthand property for setting all of the properties for a list in one declaration 设置列表项目相关样式 | list-style-type list-style-position list-style-image | 4 | 1 | 6 | 1 |
| list-style-image | Sets an image as the list-item marker 设置列表项目标记用图标表示 | none url | 4 | 1 | 6 | 1 |
| list-style-position | Sets where the list-item marker is placed in the list 设置列表项目标志的位置 | inside outside | 4 | 1 | 6 | 1 |
| list-style-type | Sets the type of the list-item marker 设置列表项目标志的类型 | none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha | 4 | 1 | 4 | 1 |
| marker-offset | auto length | 1 | 7 | 2 |
Margin
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| margin | A shorthand property for setting the margin properties in one declaration 快速设置各边距属性 | margin-top margin-right margin-bottom margin-left | 4 | 1 | 4 | 1 |
| Sets the bottom margin of an element 设置底部边距 | auto length % | 4 | 1 | 4 | 1 | |
| Sets the left margin of an element 设置左部边距 | auto length % | 3 | 1 | 4 | 1 | |
| Sets the right margin of an element 设置右部边距 | auto length % | 3 | 1 | 4 | 1 | |
| margin-top | Sets the top margin of an element 设置上部边距 | auto length % | 3 | 1 | 4 | 1 |
Outlines
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| outline | A shorthand property for setting all the outline properties in one declaration 设置所有线条轮廓 | outline-color outline-style outline-width | - | 1.5 | - | 2 |
| outline-color | Sets the color of the outline around an element 设置线条轮廓的颜色 | color invert | - | 1.5 | - | 2 |
| outline-style | Sets the style of the outline around an element 设置线条轮廓的类型 | none dotted dashed solid double groove ridge inset outset | - | 1.5 | - | 2 |
| outline-width | Sets the width of the outline around an element 设置线条轮廓的宽度 | thin medium thick length | - | 1.5 | - | 2 |
Padding
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| padding | A shorthand property for setting all of the padding properties in one declaration 一种可针对所有填充属性进行一次声明的速记属性 | padding-top padding-right padding-bottom padding-left | 4 | 1 | 4 | 1 |
| Sets the bottom padding of an element 设置元素的底填充 | length % | 4 | 1 | 4 | 1 | |
| Sets the left padding of an element 设置元素的左填充 | length % | 4 | 1 | 4 | 1 | |
| Sets the right padding of an element 设置元素的右填充 | length % | 4 | 1 | 4 | 1 | |
| padding-top | Sets the top padding of an element 设置元素的顶部填充 | length % | 4 | 1 | 4 | 1 |
Positioning
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| bottom | Sets how far the bottom edge of an element is above/below the bottom edge of the parent element 设置元素与其最近一个具有定位设置的父元素底边相关的位置 | auto % length | 5 | 1 | 6 | 2 |
| clip | Sets the shape of an element. The element is clipped into this shape, and displayed 设置元素的可视区域。 | shape auto | 4 | 1 | 6 | 2 |
| left | Sets how far the left edge of an element is to the right/left of the left edge of the parent element 设置元素与其最近一个具有定位设置的父元素左边相关的位置 | auto % length | 4 | 1 | 4 | 2 |
| overflow | Sets what happens if the content of an element overflow its area 设置当对象的内容超过其指定高度及宽度时如何管理内容 | visible hidden scroll auto | 4 | 1 | 6 | 2 |
| position | Places an element in a static, relative, absolute or fixed position 决定元素的定位方式 | static relative absolute fixed | 4 | 1 | 4 | 2 |
| right | Sets how far the right edge of an element is to the left/right of the right edge of the parent element 设置对象与其最近一个具有定位设置的父对象右边相关的位置 | auto % length | 5 | 1 | 6 | 2 |
| top | Sets how far the top edge of an element is above/below the top edge of the parent element 置对象与其最近一个具有定位设置的父对象顶边相关的位置 | auto % length | 4 | 1 | 4 | 2 |
| vertical-align | Sets the vertical alignment of an element 设置元素垂直对齐方式 | baseline sub super top text-top middle bottom text-bottom length % | 4 | 1 | 4 | 1 |
| z-index | Sets the stack order of an element 设置对象的层叠顺序 | auto number | 4 | 1 | 6 | 2 |
Table
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| border-collapse | Sets the border model of a table 设置表格模型的边框 | collapse separate | 5 | 1 | 7 | 2 |
| border-spacing | Sets the distance between the borders of adjacent cells (only for the "separated borders" model) 设置或检索当表格边框独立(例如当 border-collapse 属性等于 separate 时)，行和单元格的边在横向和纵向上的间距。 | length length | - | 1 | 6 | 2 |
| caption-side | Sets the position of the caption according to the table 设置或检索表格( table )的 caption 对象是在表格的那一边。它是和 caption 对象一起使用的属性。 | top bottom left right | - | 1 | 6 | 2 |
| empty-cells | Sets whether cells with no visible content should have borders or not (only for the "separated borders" model) 设置或检索当表格的单元格无内容时，是否显示该单元格的边框。 只有当表格行和列的边框独立（例如当 border-collapse 属性等于 separate ）时此属性才起作用。 | show hide | - | 1 | 6 | 2 |
| table-layout | Sets the algorithm used to lay out the table 设置或检索表格的布局算法。 | auto fixed | 5 | 1 | 6 | 2 |
Text
| 属性 | 描述 | 值 | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| color | Sets the color of a text 设置文字颜色 | color | 3 | 1 | 4 | 1 |
| direction | Sets the text direction 设置文字的书写方向 | ltr rtl | 6 | 1 | 6 | 2 |
| letter-spacing | Increase or decrease the space between characters 字符间距 | normal length | 4 | 1 | 6 | 1 |
| text-align | Aligns the text in an element 在一元素中怎么对齐文字（向左，向右..） | left right center justify | 4 | 1 | 4 | 1 |
| text-decoration | Adds decoration to text 添加文字修饰（下划线等等） | none underline overline line-through blink | 4 | 1 | 4 | 1 |
| text-indent | Indents the first line of text in an element 首行文字缩进 | length % | 4 | 1 | 4 | 1 |
| text-shadow | none color length | |||||
| text-transform | Controls the letters in an element 控制字母（大写，小写。。） | none capitalize uppercase lowercase | 4 | 1 | 4 | 1 |
| unicode-bidi | normal embed bidi-override | 5 | 2 | |||
| white-space | Sets how white space inside an element is handled 设置怎样给一元素控件留白 | normal pre nowrap | 5 | 1 | 4 | 1 |
| word-spacing | Increase or decrease the space between words 单词间距 | normal length | 6 | 1 | 6 | 1 |
Pseudo-classes
| 伪类 | 意图 | IE | F | N | W3C |
|---|---|---|---|---|---|
| :active | Adds special style to an activated element 指定活动元素的样式 | 4 | 1 | 8 | 1 |
| :focus | Adds special style to an element while the element has focus 为焦点元素加上指定样式 | - | - | - | 2 |
| :hover | Adds special style to an element when you mouse over it 指定当你的鼠标移到元素上时所要表现的样式 | 4 | 1 | 7 | 1 |
| :link | Adds special style to an unvisited link 连接在未被访问前的样式 | 3 | 1 | 4 | 1 |
| :visited | Adds special style to a visited link 在其链接地址已被访问过时的样式 | 3 | 1 | 4 | 1 |
| :first-child | Adds special style to an element that is the first child of some other element 第一个子对象的样式 | 1 | 7 | 2 | |
| :lang | Allows the author to specify a language to use in a specified element 设置元素使用特殊语言的内容的样式。 | 1 | 8 | 2 |
Pseudo-elements
| 伪元素 | 意图 | IE | F | N | W3C |
|---|---|---|---|---|---|
| :first-letter | Adds special style to the first letter of a text 设置文字第一个字符的样式 | 5 | 1 | 8 | 1 |
| :first-line | Adds special style to the first line of a text 为文字的第一行加上特殊样式 | 5 | 1 | 8 | 1 |
| :before | Inserts some content before an element 在元素前插入一些内容 | 1.5 | 8 | 2 | |
| :after | Inserts some content after an element 在元素后插入一些内容 | 1.5 | 8 | 2 |
