浅谈CSS

CSS历史:
从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。
但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。
1994年哈坤·利提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。
当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。
1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2007年为止，第三版还未完备。
使用CSS+DIV的优点
采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优势：　　
1：表现和内容相分离
将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。　　
2：提高页面浏览速度

对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。　　
3：易于维护和改版
你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

CSS2

样式单自从CSS1的版本之后，又在1998年5月发布了CSS2版本，样式单得到了更多的充实。

CSS2.0是一套全新的样式表结构，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一样，CSS2.0推荐的是一套内容和表现效果分离的方式，HTML元素可以通过CSS2.0的样式控制显示效果，可完全不使用以往HTML中的table和td来定位表单的外观和样式，只需使用div和 Li此类HTML标签来分割元素，之后即可通过CSS2.0样式来定义表单界面的外观。

CSS2.0提供给我们了一个机制，让程序员开发时可以不考虑显示和界面就可以制作表单和界面，显示问题可由美工或是程序员后期再来编写相应的 CSS2.0样式来解决。不过由于CSS2.0目前尚未见过很好的编辑软件，所以无法做到所见即所得，编写起来不易。

CSS3
CSS3语言开发是朝着模块化发展的。 以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：

盒子模型
列表模块
超连结方式
语言模块
背景和边框
文字特效
多栏布局

CSS3选择器
CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如:nth-child()等。
时间表
几个模块现已完成，包括的SVG （可扩展矢量图形） ，媒介资源类型（Media Queries）和命名，而其他的模块开发工作则仍在进行中。如果要给出一个预定的日期的话，非常困难，不管怎样，web浏览器将全面支持CSS3的各种新特点，一些新的探索已经开始了。针对不同浏览器，新的功能是逐渐应用的，仍然需要1-2年的时间，每一个新的模块才有可能被广泛应用。
CSS3将给我带来哪些新的影响
首先，我们希望，这是个正确的方式，CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许你实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。

动画
现在大多使用CSS3的动画效果，下面是CSS的一部分动画属性的展示。
通过 @keyframes 规则，能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。@keyframes的语法如下：@keyframes animationname {keyframes-selector {css-styles;}}它的值分别是animationname；keyframes-selector ；css-styles。其分别的描述为：必需。定义动画的名称；必需。动画时长的百分比。合法的值： 0-100%、 from（与 0% 相同）、 to（与 100% 相同）；必需。一个或多个合法的 CSS 样式属性。
实例 1
在一个动画中添加多个 keyframe 选择器：
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

@-o-keyframes mymove /* Opera */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

---

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation=“mymove 5s infinite”
animation的语法：animation: name duration timing-function delay iteration-count direction;
其中animation-name 表示规定需要绑定到选择器的 keyframe 名称。
animation-name 表示规定需要绑定到选择器的 keyframe 名称。
animation-timing-function 表示规定动画的速度曲线。
animation-delay 表示规定在动画开始之前的延迟。
animation-iteration-count 表示规定动画应该播放的次数。
animation-direction 表示规定是否应该轮流反向播放动画。

背景
background 可以在一个声明中设置所有的背景属性。
可以设置如下属性：
background-color ----------------规定要使用的背景颜色
background-position-------------规定背景图像的位置
background-size------------------规定背景图片的尺寸
background-repeat---------------规定如何重复背景图像
background-origin----------------规定背景图片的定位区域
background-clip-------------------规定背景的绘制区域
background-attachment---------规定背景图像是否固定或者随着页面的其余部分滚动
background-image----------------规定要使用的背景图像
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
其中：
默认值： not specified
继承性： no
版本： CSS1 + CSS3
JavaScript 语法： object.style.background=“white url(paper.gif) repeat-y”

边框和轮廓
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：

border-width-----------------------------规定边框的宽度
border-style-----------------------------规定边框的样式
border-color-----------------------------规定边框的颜色
border-bottom ---------------------------在一个声明中设置所有的下边框属性
border-bottom-color ---------------------设置下边框的颜色
border-bottom-style ---------------------设置下边框的样式 	
border-bottom-width ---------------------设置下边框的宽度

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
其中：
默认值： not specified
继承性： no
版本： CSS1
JavaScript 语法： object.style.border=“3px solid blue”

盒（框）
overflow-x 的属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
提示：使用 overflow-y 属性来确定对上/下边缘的裁剪。
其中：
默认值： visible
继承性： no
版本： CSS3
JavaScript 语法： object.style.overflowX=“scroll”
它的语法为：overflow-x: visible|hidden|scroll|auto|no-display|no-content;
它的值分别是：visible 、hidden 、scroll、auto 、no-display 、no-content ；其描述分别是：不裁剪内容，可能会显示在内容框之外、裁剪内容 - 不提供滚动机制、裁剪内容 - 提供滚动机制、如果溢出框，则应该提供滚动机制、如果内容不适合内容框，则删除整个框、如果内容不适合内容框，则隐藏整个内容。
overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。
提示：使用 overflow-x 属性来确定对左/右边缘的裁剪。
其中：
默认值： visible
继承性： no
版本： CSS3
JavaScript 语法： object.style.overflowY=“scroll”
它的语法：overflow-y: visible|hidden|scroll|auto|no-display|no-content;
它的值分别是 :visible、hidden、scroll、auto、no-display 、no-content；其描述分别是：不裁剪内容，可能会显示在内容框之外、裁剪内容 - 不提供滚动机制、裁剪内容 - 提供滚动机制、如果溢出框，则应该提供滚动机制如果内容不适合内容框，则删除整个框、如果内容不适合内容框，则隐藏整个内容。
overflow-style 规定溢出元素的首选滚动方法。
其中：
默认值： auto
继承性： no
版本： CSS3
JavaScript 语法： object.style.overflowStyle=“scrollbar”
它的语法：overflow-style: auto|scrollbar|panner|move|marquee;
注释：值既可以是 auto，或者是按照优先次序的方法列表。浏览器应该使用列表中其支持的的第一个滚动方法。
它的值分别是 : auto、panner、move 、marquee ；其描述分别是：为溢出元素添加滚动条、用户能够直接移动元素的内容。通常，用户能够用鼠标拖动内容、内容自主移动，不需任何用户代理对其控制。
颜色
color-profile 允许使用源的颜色配置文件的默认以外的规范。
rendering-intent 允许使用颜色配置文件渲染意图的默认以外的规范。
opacity 属性设置元素的不透明级别。
其中：
默认值： 1
继承性： no
版本： CSS3
JavaScript 语法： object.style.opacity=0.5
它的语法：opacity: value|inherit;
它的值分别是 : value、inherit ；其描述分别是：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）、应该从父元素继承 opacity 属性的值。
尺寸
height 属性设置元素的高度。
这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。
行内非替换元素会忽略这个属性。
其中：
默认值： auto
继承性： no
版本： CSS1
JavaScript 语法： object.style.height=“50px”
它的可能的值分别是 :auto、length 、% 、inherit ；其描述分别是：默认。浏览器会计算出实际的高度、使用 px、cm 等单位定义高度、基于包含它的块级对象的百分比高度、规定应该从父元素继承 height 属性的值。
max-height 属性设置元素的最大高度。
说明
该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值。
注释：max-height 属性不包括外边距、边框和内边距。
其中：
默认值： none
继承性： no
版本： CSS2
JavaScript 语法： object.style.maxHeight=“50px”
它的可能的值分别是 :none、length、% 、inherit ；其描述分别是：默认。定义对元素被允许的最大高度没有限制、定义元素的最大高度值、定义基于包含它的块级对象的百分比最大高度、规定应该从父元素继承 max-height 属性的值。
max-width 定义元素的最大宽度。
说明
该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。
其中：
默认值： none
继承性： no
版本： CSS2
JavaScript 语法： object.style.maxWidth=“50px”
它的可能的值分别是 : none 、length、%、inherit ；其描述分别是：默认。定义对元素的最大宽度没有限制、定义元素的最大宽度值、定义基于包含它的块级对象的百分比最大宽度、规定应该从父元素继承 max-width 属性的值。
min-height 属性设置元素的最小高度。
说明
该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。
其中：
默认值： 0
继承性： no
版本： CSS2
JavaScript 语法： object.style.minHeight=“50px”
它的可能的值分别是 : length、%、inherit ；其描述分别是：定义元素的最小高度。默认值是 0、定义基于包含它的块级对象的百分比最小高度、规定应该从父元素继承 min-height 属性的值。
min-width 属性设置元素的最小宽度。
说明
该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。
其中：
默认值： none
继承性： no
版本： CSS2
JavaScript 语法： object.style.minWidth=“50px”
它的可能的值分别是 : length、%、inherit ；其描述分别是：定义元素的最小宽度值。默认值：取决于浏览器、定义基于包含它的块级对象的百分比最小宽度、规定应该从父元素继承 min-width 属性的值。
width 属性设置元素的宽度。
说明
这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。
行内非替换元素会忽略这个属性。
其中：
默认值： auto
继承性： no
版本： CSS1
JavaScript 语法： object.style.width=“50px”
它的可能的值分别是 : auto、 length、%、inherit ；其描述分别是：默认值。浏览器可计算出实际的宽度、使用 px、cm 等单位定义宽度、定义基于包含块（父元素）宽度的百分比宽度、规定应该从父元素继承 width 属性的值。
可伸缩框
box-align 属性规定如何对齐框的子元素。
其中：
默认值： stretch
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxAlign=“center”
它的语法：box-align: start|end|center|baseline|stretch;
它的值分别是：start、end 、center、baseline、stretch；其描述分别为;对于正常方向的框，每个子元素的上边缘沿着框的顶边放置;对于反方向的框，每个子元素的下边缘沿着框的底边放置、对于正常方向的框，每个子元素的下边缘沿着框的底边放置；对于反方向的框，每个子元素的上边缘沿着框的顶边放置、均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下、如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐、拉伸子元素以填充包含块 。
box-direction 属性规定框元素的子元素以什么方向来排列。
其中：
默认值： normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxDirection=“reverse”
它的语法：box-direction: normal|reverse|inherit;
它的值分别是： normal、reverse、inherit ；其描述分别为; 以默认方向显示子元素、以反方向显示子元素、应该从子元素继承 box-direction 属性的值。
box-flex 属性规定框的子元素是否可伸缩其尺寸。
提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。
其中：
默认值： 0.0（指示该元素不可伸缩）
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxFlex=2.0
它的语法：box-flex: value;
它的值为：value；其描述为：元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。
box-flex-group 属性用于向柔性分组分配可伸缩元素。
提示：可伸缩元素能够随着框的缩小和扩大而伸缩。
其中：
默认值： 1
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxFlexGroup=2
它的语法：box-flex-group: integer;
它的值为：integer ；其描述为：一个整数。（第一个柔性分组是 1，后面的柔性分组是更大的值）。
box-lines 属性规定如果列超出了父框中的空间，是否要换行显示。
提示：默认地，水平框会在单独的行中排列其子元素，而垂直框会在单独的列中排列其子元素。
其中：
默认值： single
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxLines=“multiple”
它的语法：box-lines: single|multiple;
它的值分别是：single 、multiple ；其描述分别为; 所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）、允许框扩展为多行，以容纳其所有子元素。
box-ordinal-group 属性规定框中子元素的显示次序。
值更低的元素会显示在值更高的元素前面显示。
注释：分组值相同的元素，它们的显示次序取决于其源次序。
其中：
默认值： 1
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxOrdinalGroup=2
它的语法：box-ordinal-group: integer;
它的值为：integer ；其描述为：一个整数，指示子元素的显示次序。
box-orient 属性规定框的子元素应该被水平或垂直排列。
提示：水平框中的子元素从左向右进行显示，而垂直框的子元素从上向下进行显示。不过，box-direction 和 box-ordinal-group 能够改变这种顺序。
其中：
默认值： inline-axis
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxOrient=“vertical”
它的语法：box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
它的值分别是：horizontal、vertical、inline-axis 、block-axis 、inherit ；其描述分别为; 在水平行中从左向右排列子元素、从上向下垂直排列子元素、沿着行内轴来排列子元素（映射为 horizontal）、沿着块轴来排列子元素（映射为 vertical）、应该从父元素继承 box-orient 属性的值。
box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。
该属性规定水平框中的水平位置，以及垂直框中的垂直位置。
其中：
默认值： start
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxPack=“center”
它的语法：box-pack: start|end|center|justify;
它的值分别是：start、end、center、justify ；其描述分别为; 对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）；对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）、对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）；对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）、均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后 、在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。
字体
font 简写属性在一个声明中设置所有字体属性。
注释：此属性也有第六个值：“line-height”，可设置行间距。
说明
这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。
可以按顺序设置如下属性：

font-style --------------------------------------------规定文本的字体样式
font-variant -----------------------------------------规定是否以小型大写字母的字体显示文本
font-weight ------------------------------------------规定字体的粗细
font-size-adjust ------------------------------------为元素规定 aspect 值
font-family -------------------------------------------规定文本的字体系列
font-size ---------------------------------------------规定文本的字体尺寸
font-stretch 	-----------------------------------------收缩或拉伸当前的字体系列

可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。
其中：
默认值： not specified
继承性： yes
版本： CSS1
JavaScript 语法： object.style.font=“italic small-caps bold 12px arial,sans-serif”
他的可能的值分别为：font-style、font-variant 、font-weight、font-size/line-height、font-family、caption、icon 、menu、message-box、small-caption、status-bar；其描述分别是：规定字体样式。参阅：font-style 中可能的值、规定字体异体。参阅：font-variant 中可能的值、规定字体粗细。参阅：font-weight 中可能的值、规定字体尺寸和行高。参阅：font-size 和 line-height 中可能的值、规定字体系列。参阅：font-family 中可能的值、定义被标题控件（比如按钮、下拉列表等）使用的字体、定义被图标标记使用的字体、定义被下拉列表使用的字体、定义被对话框使用的字体、caption 字体的小型版本、定义被窗口状态栏使用的字体。
内容生成
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
说明
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
其中：
默认值： normal
继承性： no
版本： CSS2
JavaScript 语法： object.style.content=“url(beep.wav)”
他的可能的值分别是：none、normal、content specifications、inherit ；inherit描述为：规定应该从父元素继承 content 属性的值。
ounter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
说明
利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。
注释：如果使用了 “display: none”，则无法增加计数。如使用 “visibility: hidden”，则可增加计数。
其中：
默认值： none
继承性： no
版本： CSS2
JavaScript 语法： object.style.counterIncrement=“subsection”
它的可能的值分别是：none、id number 、id、number、inherit ；其描述分别为：默认。选择器无计数器增量、\、定义将增加计数的选择器、id 或 class、定义增量。number 可以是正数、零或者负数、规定应该从父元素继承 counter-increment 属性的值。
counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
注释：如果使用 “display: none”，则无法重置计数器。如果使用 “visibility: hidden”，则可以重置计数器。
其中：
默认值： none
继承性： no
版本： CSS2
JavaScript 语法： object.style.counterReset=“subsection”
它的可能的值分别是：none、id number、id、number、inherit ；其描述分别为：默认。不能对选择器的计数器进行重置、\、定义重置计数器的选择器、id 或 class、可设置此选择器出现次数的计数器的值。可以是正数、零或负数、规定应该从父元素继承 counter-reset 属性的值。
列表
list-style 简写属性在一个声明中设置所有的列表属性。
说明
该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
可以按顺序设置如下属性：

list-style-type ---------------------------------设置列表项标记的类型
list-style-position -----------------------------设置列表项标记的放置位置
list-style-image -------------------------------将图象设置为列表项标记

可以不设置其中的某个值，比如 “list-style:circle inside;” 也是允许的。未设置的属性会使用其默认值。
其中：
默认值： disc outside none
继承性： yes
版本： CSS1
JavaScript 语法： object.style.listStyle=“decimal inside”
它的可能的值分别是：list-style-type、list-style-position、list-style-image、inherit ；其描述分别为：设置列表项标记的类型。参阅：list-style-type 中可能的值、设置在何处放置列表项标记。参阅：list-style-position 中可能的值、使用图像来替换列表项的标记。参阅：list-style-image 中可能的值、规定应该从父元素继承 list-style 属性的值。
外边距
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
例子 1
margin:10px 5px 15px 20px;

上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

例子 2

margin:10px 5px 15px;

上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px

例子 3

margin:10px 5px;

上外边距和下外边距是 10px
右外边距和左外边距是 5px

例子 4

margin:10px;

所有 4 个外边距都是 10px

其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.margin=“10px 5px”
它的可能的值分别是：auto、length、%、inherit ；其描述分别为：浏览器计算外边距、规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px、规定基于父元素的宽度的百分、比的外边距、规定应该从父元素继承外边距。
margin-bottom 属性设置元素的下外边距。
注释：允许使用负值。
其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.marginBottom=“10px”
它的可能的值分别是：auto、length、%、inherit ；其描述分别为：浏览器计算下外边距、规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px、规定基于父元素的宽度的百分比的下外边距、规定应该从父元素继承下外边距。
margin-left 属性设置元素的左外边距。
注释：允许使用负值。
其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.marginLeft=“10px”
它的可能的值分别是： auto、length、%、inherit ；其描述分别为：浏览器设置的左外边距、定义固定的左外边距。默认值是0、定义基于父对象总高度的百分比左外边距、规定应该从父元素继承左外边距。
margin-right 属性设置元素的右外边距。
注释：允许使用负值。
其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.marginRight=“10px”
它的可能的值分别是： auto、length、%、inherit ；其描述分别为：浏览器设置的右外边距、定义固定的右外边距。默认值是 0、定义基于父对象总高度的百分比右外边距、规定应该从父元素继承右外边距。
margin-top 属性设置元素的上外边距。
注释：允许使用负值。
其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.marginTop=“10px”
它的可能的值分别是： auto、length、%、inherit ；其描述分别为：浏览器设置的上外边距、定义固定的上外边距。默认值是 0、定义基于父对象总高度的百分比上外边距、规定应该从父元素继承上外边距。
内边距
padding 简写属性在一个声明中设置所有内边距属性。
说明
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释：不允许使用负值。
例子 1

padding:10px 5px 15px 20px;

上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

例子 2

padding:10px 5px 15px;

上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px

例子 3

padding:10px 5px;

上内边距和下内边距是 10px
右内边距和左内边距是 5px

例子 4

padding:10px;

所有 4 个内边距都是 10px

其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.padding=“10px 5px”
它的可能的值分别是： auto、length、%、inherit ；其描述分别为：浏览器计算内边距、规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px、规定基于父元素的宽度的百分比的内边距、规定应该从父元素继承内边距。
padding-bottom 属性设置元素的下内边距（底部空白）。
说明
该属性设置元素下内边距的宽度。行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。
注释：不允许使用负值。
其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.paddingBottom=“10px”
它的可能的值分别是： length、%、inherit ；其描述分别为：规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px、定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中、规定应该从父元素继承下内边距。
padding-left 属性设置元素左内边距（空白）。
说明
该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现.
注释：不允许使用负值。
其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.paddingLeft=“10px”
它的可能的值分别是： length、%、inherit ；其描述分别为：规定以具体单位计的固定的左内边距值，比如像素、厘米等。默认值是 0px、定义基于父元素宽度的百分比左内边距。此值不会如预期地那样工作于所有的浏览器中、规定应该从父元素继承左内边距。
padding-right 属性设置元素右内边距（空白）。
注释：不允许使用负值。
说明
该属性设置元素右内边距的宽度。行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现.
其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.paddingRight=“10px”
它的可能的值分别是： length、%、inherit ；其描述分别为：规定以具体单位计的固定的右内边距值，比如像素、厘米等。默认值是 0px、定义基于父元素宽度的百分比右内边距。此值不会如预期地那样工作于所有的浏览器中、规定应该从父元素继承右内边距。
padding-top 属性设置元素的上内边距（空间）。
说明
该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。
注释：不允许使用负值。
其中：
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.paddingTop=“10px”
它的可能的值分别是： length、%、inherit ；其描述分别为：规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px、定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有的浏览器中、规定应该从父元素继承上内边距。
定位
bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
注释：如果 “position” 属性的值为 “static”，那么设置 “bottom” 属性不会产生任何效果。
说明
对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。
对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。
其中：
默认值： auto
继承性： no
版本： CSS2
JavaScript 语法： object.style.bottom=“50px”
它的可能的值分别是：auto、length、%、inherit ；其描述分别为：默认值。通过浏览器计算底部的位置、设置以包含元素的百分比计的底边位置。可使用负值、使用 px、cm 等单位设置元素的底边位置。可使用负值、规定应该从父元素继承 bottom 属性的值。
clear 属性规定元素的哪一侧不允许其他浮动元素。
说明
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
其中：
默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.clear=“left”
它的可能的值分别是：left、right 、both 、none 、inherit；其描述分别为：在左侧不允许浮动元素、在右侧不允许浮动元素、在左右两侧均不允许浮动元素、默认值。允许浮动元素出现在两侧、规定应该从父元素继承 clear 属性的值。
所有主流浏览器都支持 clip 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
定义和用法
clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？“clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
说明
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
其中：
默认值： auto
继承性： no
版本： CSS2
JavaScript 语法： object.style.clip=“rect(0px,50px,50px,0px)”
它的可能的值分别是：shape、auto 、inherit ；其描述分别为：设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)、默认值。不应用任何剪裁、规定应该从父元素继承 clip 属性的值。
表格
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
其中：
默认值： separate
继承性： yes
版本： CSS2
JavaScript 语法： object.style.borderCollapse=“collapse”
它的可能的值分别是：separate、collapse、inherit ；其描述分别为：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性、如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性、规定应该从父元素继承 border-collapse 属性的值。
border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
注释：某些版本的IE浏览器不支持此属性。
说明
该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
其中：
默认值： not specified
继承性： yes
版本： CSS2
JavaScript 语法： object.style.borderSpacing=“15px”
它的可能的值分别是：length length 、inherit ；其描述分别为：规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值；如果定义一个 length 参数，那么定义的是水平和垂直间距；如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距、规定应该从父元素继承 border-spacing 属性的值。
caption-side 属性设置表格标题的位置。
说明
该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。
其中：
默认值： top
继承性： yes
版本： CSS2
JavaScript 语法： object.style.captionSide=“bottom”
它的可能的值分别是：top、bottom、inherit ；其描述分别为：默认值。把表格标题定位在表格之上、把表格标题定位在表格之下、规定应该从父元素继承 caption-side 属性的值。
empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。

注释：某些版本的 IE 浏览器不支持此属性。
说明
该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate，否则将忽略这个属性。
其中：
默认值： show
继承性： yes
版本： CSS2
JavaScript 语法： object.style.emptyCells=“hide”
它的可能的值分别是：hide、show 、inherit；其描述分别为：不在空单元格周围绘制边框、在空单元格周围绘制边框。默认、规定应该从父元素继承 empty-cells 属性的值。
文本
color 属性规定文本的颜色。
这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。
要设置一个元素的前景色，最容易的方法是使用 color 属性。
其中：
默认值： not specified
继承性： yes
版本： CSS1
JavaScript 语法： object.style.color="#FF0000"
提示和注释
提示：请使用合理的背景颜色和文本颜色搭配，这样可以提高文本的可读性。
它的可能的值分别是：color_name 、hex_number 、rgb_number 、inherit；其描述分别为：规定颜色值为颜色名称的颜色（比如 red）、规定颜色值为十六进制值的颜色（比如 #ff0000）、规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）、规定应该从父元素继承颜色。
direction 属性规定文本的方向 / 书写方向。
该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。
其中：
默认值： ltr
继承性： yes
版本： CSS2
JavaScript 语法： object.style.direction=“rtl”
它的可能的值分别是：ltr、rtl 、inherit ；其描述分别为：默认。文本方向从左到右、文本方向从右到左、规定应该从父元素继承 direction 属性的值。
letter-spacing 属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
注释：允许使用负值，这会让字母之间挤得更紧。
其中：
默认值： normal
继承性： yes
版本： CSS1
JavaScript 语法： object.style.letterSpacing=“3px”
它的可能的值分别是：normal、length、inherit ；其描述分别为：默认。规定字符间没有额外的空间、定义字符间的固定空间（允许使用负值）、规定应该从父元素继承 letter-spacing 属性的值。
2D/3D 转换
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
为了更好地理解 transform 属性，请查看这个演示。
其中：
默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.transform=“rotate(7deg)”
它的语法是：transform: none|transform-functions;
tadeta它的值分别为：none 、matrix(n,n,n,n,n,n) 、matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)、translate(x,y)、translate3d(x,y,z)、translateX(x)、translateY(y)、translateZ(z)、scale(x,y)、scale3d(x,y,z)、scaleX(x)、scaleY(y) 、scaleZ(z) 、rotate(angle)、rotate3d(x,y,z,angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、skew(x-angle,y-angle)、skewX(angle)、skewY(angle)、perspective(n)；其描述分别为：定义不进行转换、定义 2D 转换，使用六个值的矩阵、定义 3D 转换，使用 16 个值的 4x4 矩阵、定义 2D 转换、定义 3D 转换、定义转换，只是用 X 轴的值、定义转换，只是用 Y 轴的值、定义 3D 转换，只是用 Z 轴的值、定义 2D 缩放转换、 定义 3D 缩放转换、通过设置 X 轴的值来定义缩放转换、通过设置 Y 轴的值来定义缩放转换、通过设置 Z 轴的值来定义 3D 缩放转换、定义 2D 旋转，在参数中规定角度、定义 3D 旋转、定义沿着 X 轴的 3D 旋转、定义沿着 Y 轴的 3D 旋转、定义沿着 Z 轴的 3D 旋转、定义沿着 X 和 Y 轴的 2D 倾斜转换、定义沿着 X 轴的 2D 倾斜转换、定义沿着 Y 轴的 2D 倾斜转换、为 3D 转换元素定义透视视图。
transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
为了更好地理解 transform-origin 属性，请查看这个演示。
Safari/Chrome 用户：为了更好地理解 transform-origin 属性用于 3D 转换的情况，请查看这个演示。
注释：该属性必须与 transform 属性一同使用。
为了更好地理解 transform 属性，请查看这个演示。
其中：
默认值： 50% 50% 0
继承性： no
版本： CSS3
JavaScript 语法： object.style.transformOrigin=“20% 40%”
它的语法是：transform-origin: x-axis y-axis z-axis;
x-axis

定义视图被置于 X 轴的何处。可能的值：

left
center
right
length
%

y-axis

定义视图被置于 Y 轴的何处。可能的值：

top
center
bottom
length
%

z-axis

定义视图被置于 Z 轴的何处。可能的值：

length

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释：该属性必须与 transform 属性一同使用。
其中：
默认值： flat
继承性： no
版本： CSS3
JavaScript 语法： object.style.transformStyle=“preserve-3d”
它的语法是：transform-style: flat|preserve-3d;
它的值分别是：flat 、preserve-3d ；其描述分别为：子元素将不保留其 3D 位置、子元素将保留其 3D 位置。
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
其中：
默认值： none
继承性： yes
版本： CSS3
JavaScript 语法： object.style.perspective=500
它的语法是：perspective: number|none;
它的值分别是：number 、none；其描述分别为：元素距离视图的距离，以像素计、默认值。与 0 相同。不设置透视。
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。
其中：
默认值： 50% 50%
继承性： no
版本： CSS3
JavaScript 语法： object.style.perspectiveOrigin=“10% 10%”
它的语法是：perspective-origin: x-axis y-axis;

x-axis

定义该视图在 x 轴上的位置。默认值：50%。

可能的值：

left
center
right
length
%

y-axis

定义该视图在 y 轴上的位置。默认值：50%。

可能的值：

top
center
bottom
length
%

backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
其中：
默认值： visible
继承性： no
版本： CSS3
JavaScript 语法： object.style.backfaceVisibility=“hidden”
它的语法是：backface-visibility: visible|hidden;
它的值分别是：visible、hidden ；其描述分别为：背面是可见的、背面是不可见的。