css知识梳理

写完之前的一篇"一起领略css3动画的强大"之后,我发现自己以为的懂得并不是真的懂得,所以现在来好好把css3来梳理一下

css属性组

动画属性(Animation)

@keyframes - 规定动画

通过@keyframes规则能够创建动画,创建动画的原理是:将一套CSS样式逐渐变化为另一套样式;在动画过程中能够多次改变这套CSS样式;以百分比来规定改变发生的时间,或通过关键词"from"/"to",等价于0%和100%;为了获得最佳的浏览器支持,应该始终定义0%和100%选择器

注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定

语法:

@keyframes animationname {keyframes-selector {css-styles;}}

举例:在一个动画中添加多个keyframe选择器改变多个 CSS 样式:

@keyframes mymove{
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove{ /* Firefox */
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove{ /* Safari and Chrome */
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove{ /* Opera */
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}

animation - 除animation-play-state外所有动画属性的简写属性

animation属性是一个简写属性,用于设置六个动画属性:

语法:

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

animation-fill-mode介绍

背景属性(Background)

在一个声明中设置所有的背景属性

background-color

background-color属性为元素设置一种纯色,这种颜色会填充元素的内容/内边距/边框区域,扩展到元素边框的外边界(但不包括外边距),如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色

background-color可能的值

background-attachment

设置背景图像是否固定或随着页面的其余部分滚动

background-attachment可能的值

background-image

为元素设置背景图像;元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距,默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果

background-image可能的值

background-position

设置背景图像的起始位置;这个属性设置背景原图像(由background-image定义)的位置;背景图像如果要重复,将从这一点开始

提示:需要把background-attachment属性设置为"fixed",才能保证该属性在Firefox和Opera中正常工作

background-position可能的值

background-repeat

设置是否及如何重复背景图像;默认地,背景图像在水平和垂直方向上重复

提示:背景图像的位置是根据background-position属性设置的;如果未规定background-position属性,图像会被放置在元素的左上角

background-repeat可能的值

background-clip

规定背景的绘制区域

语法

background-clip: border-box|padding-box|content-box;

background-clip可能的值

background-origin

规定background-position属性相对于什么位置来定位;如果背景图像的background-attachment属性为"fixed",则该属性没有效果

语法

background-origin: padding-box|border-box|content-box;

background-origin可能的值

background-size

规定背景图片的尺寸

语法

background-size: length|percentage|cover|contain;

background-size可能的值

多重背景

多重背景,也就是CSS2里background的属性外加origin/clip/size组成的新background的多次叠加,缩写时为用逗号隔开的每组值:用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值

background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意：

用逗号隔开每组background的缩写值;如果有size值,需要紧跟position并且用"/"隔开；

如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值

background-color只能设置一个

渐变(Gradients)

CSS3渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡;以前必须使用图像来实现这些效果,但是通过使用CSS3渐变可以减少下载的事件和宽带的使用;此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的

CSS3定义了两种类型的渐变(gradients):

线性渐变(Linear Gradients)

为了创建一个线性渐变,必须至少定义两种颜色结点;颜色结点即你想要呈现平稳过渡的颜色;同时,你也可以设置一个起点和一个方向(或一个角度)

使用直线渐变

background:linear-gradient(direction, color-stop1, color-stop2, ...);

示例

background: -webkit-linear-gradient(left top, red , blue); /* Safari*/
background: -o-linear-gradient(bottom right, red, blue); /* Opera*/
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox*/
background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */

使用角度渐变

如果想在渐变的方向上做更多控制,可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right, 等等)

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度,逆时针方向计算;换句话说,0deg将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变

注意:很多浏览器(Chrome,Safari,fiefox等)使用了旧的标准,即0deg将创建一个从左到右的渐变,90deg将创建一个从下到上的渐变;换算公式90-x=y;其中x为标准角度,y为非标准角度

示例

background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */

径向渐变(Radial Gradients)

径向渐变由它的中心定义;为了创建一个径向渐变,必须至少定义两种颜色结点,颜色结点即你想要呈现平稳过渡的颜色;同时你也可以指定渐变的中心/形状(圆形或椭圆形)/大小;默认情况下,渐变的中心是center(表示在中心点),渐变的形状是ellipse(表示椭圆形),渐变的大小是farthest-corner(表示到最远的角落)

background: radial-gradient(center, shape size, start-color, ..., last-color);

示例

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */

设置形状

shape参数定义了形状;它可以是值circle/ellipse;circle表示圆形,ellipse表示椭圆形,默认值是ellipse

background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */

不同尺寸大小关键字的使用

size参数定义了渐变的大小;它可以是以下四个值:closest-side/farthest-side/closest-corner/farthest-corner

background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */

使用透明度(transparent)

CSS3渐变也支持透明度(transparent),可用于创建减弱变淡的效果;为了添加透明度,我们使用rgba()函数来定义颜色结点;rgba()函数中的最后一个参数可以是从0到1的值

下面的实例演示了从左边开始的线性渐变;起点完全透明,慢慢过渡到完全不透明的红色：

background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */

重复的渐变

重复的线性渐变

repeating-linear-gradient()函数用于重复线性渐变:

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变:

background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法（必须放在最后） */

边框属性(Border和Outline)

border

在一个声明中设置所有的边框属性;可以按顺序设置如下属性:border-width/border-style/border-color;如果不设置其中的某个值也不会出问题,比如 border:solid #ff0000;也是允许的

border-width

为元素的边框设置宽度;只有当边框样式不是none时才起作用;如果边框样式是none,边框宽度实际上会重置为0,不允许指定负长度值

border-width可能的值

border-style

用于设置元素边框的样式,只有当这个值不是none时边框才可能出现

border-style可能的值

最不可预测的边框样式是double,它定义为两条线的宽度再加上这两条线之间的空间等于border-width值;不过CSS规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗,所有这些都有用户代理决定,创作人员对这个决定没有任何影响

border-color

设置四条边框的颜色,此属性可设置1到4种颜色;border-color属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为4个边分别设置不同的颜色

border-color可能的值

border-top/border-right/border-bottom/border-left

单独设置上边框/右边框/下边框/左边框的样式

可能的值

border-radius

border-radius属性是一个简写属性,用于设置四个border-*-radius属性

语法

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个radii的四个值；如果省略bottom-left,则与top-right相同;如果省略bottom-right,则与top-left相同;如果省略top-right,则与top-left相同

可能的值

border-top-left-radius:定义边框左上角的形状;border-top-right-radius:定义边框右上角的形状;border-bottom-left-radius：定义边框左下角的形状；border-bottom-right-radius：定义边框右下角的形状

border-image

设置所有 border-image-* 属性

box-shadow

box-shadow向框添加一个或多个阴影,该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值/可选的颜色值/可选的inset关键词来规定,省略长度的值是0

语法

box-shadow: h-shadow v-shadow blur spread color inset;

box属性

overflow-x / overflow-y

规定如果溢出元素内容区域的话,是否对内容的左/右或上/下边缘进行裁剪

语法

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

overflow-style

规定溢出元素的首选滚动方法 - 目前浏览器都不支持

语法

overflow-style: auto|scrollbar|panner|move|marquee;

rotation

rotation属性围绕由rotation-point属性定义的指定点,对块级元素进行逆时针旋转 - 目前浏览器都不支持

语法

rotation: angle;

outline

outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用;可以按顺序设置如下属性:outline-color/outline-style/outline-width

注释:轮廓线不会占据空间,也不一定是矩形;outline简写属性在一个声明中设置所有的轮廓属性

outline-color

outline-color属性设置一个元素整个轮廓中可见部分的颜色;要记住,轮廓的样式不能是none,否则轮廓不会出现;请始终在outline-color属性之前声明outline-style属性,元素只有获得轮廓以后才能改变其轮廓的颜色

outline-color可能的值

outline-style

outline-style属性用于设置元素的整个轮廓的样式,样式不能是none,否则轮廓不会出现

outline-style可能的值

outline-width

outline-width属性设置元素整个轮廓的宽度,只有当轮廓样式不是none时,这个宽度才会起作用;如果样式为none,宽度实际上会重置为0,不允许设置负长度值

outline-width可能的值

color属性

Content for Paged Media 属性

CSS 尺寸属性(Dimension)

width/height

这个属性定义元素内容区的宽度/高度,在内容区外面可以增加内边距/边框/外边距,行内非替换元素会忽略这个属性

可能的值

max-width / max-height / min-width / min-height

该属性值会对元素的宽度/高度设置一个最高/最低限制;因此,元素只能处于最大值和最小值之间.不允许指定负值

注释：max-width/max-height/min-width/min-height属性不包括外边距/边框/内边距。

可伸缩框属性(Flexible Box)

box-align / box-pack

语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

box-align属性规定如何对齐框的子元素,实现垂直方向的位置

box-pack属性规定当框大于子元素的尺寸,在何处放置子元素;该属性规定水平框中的水平位置

语法

box-align: start|end|center|baseline|stretch;

语法

box-pack: start|end|center|justify;

box-direction

规定框元素的子元素以什么方向来排列

语法

box-direction: normal|reverse|inherit;

box-flex

规定框的子元素的尺寸是否可伸缩

提示:可伸缩元素能够随着框的缩小或扩大而缩写或放大,只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间

语法

box-flex: value;

value:元素的可伸缩行;柔性是相对的,例如box-flex为2的子元素两倍于box-flex为1的子元素

box-flex-group

box-flex-group属性用于向柔性分组分配可伸缩元素

提示:可伸缩元素能够随着框的缩小和扩大而伸缩。

语法

box-flex-group: integer;

integer:一个整数;(第一个柔性分组是1,后面的柔性分组是更大的值)

box-lines

规定如果列超出了父框中的空间,是否要换行显示

提示:默认地,水平框会在单独的行中排列其子元素,而垂直框会在单独的列中排列其子元素

语法

box-lines: single|multiple;

box-ordinal-group

规定框中子元素的显示次序,值更低的元素会显示在值更高的元素前面显示

注释:分组值相同的元素,它们的显示次序取决于其源次序

目前没有浏览器支持box-ordinal-group属性;Firefox支持替代的-moz-box-ordinal-group属性,Safari和Chrome支持替代的-webkit-box-ordinal-group属性

语法

box-ordinal-group: integer;

integer:一个整数,指示子元素的显示次序

box-orient

box-orient属性规定框的子元素应该被水平或垂直排列

提示:水平框中的子元素从左向右进行显示,而垂直框的子元素从上向下进行显示;不过,box-direction/box-ordinal-group能够改变这种顺序

语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

字体属性(Font)

font简写属性用于在一个声明中一次设置元素字体的两个或更多方面字体属性;此属性也有第六个值:"line-height",可设置行间距;使用icon等关键字可以适当地设置元素的字体,使之与用户计算机环境中的某个方面一致;注意:如果没有使用这些关键词,至少要指定字体大小和字体系列

可以按顺序设置如下属性:font-style / font-variant / font-weight / font-size/line-height / font-family;可以不设置其中的某个值,比如:font:100% verdana; 也是允许的。未设置的属性会使用其默认值

可能的值

内容生成(Generated Content)

content

与:before/:after伪元素配合使用来插入生成内容,该属性用于定义元素之前/之后放置的生成内容,默认往往是行内内容,不过该内容创建的框类型可以用属性display控制

<style>
a:after{
  content: " (" attr(href) ")"
}
</style>
<p><a href="http://www.w3school.com.cn">W3School</a> contains free tutorials and references.</p>

counter-increment

counter-increment属性设置某个选取器每次出现的计数器增量,默认增量是1;利用这个属性,计数器可以递增/递减某个值,这可以是正值或负值;如果没有提供number值,则默认为1

可能的值

counter-reset

counter-reset属性设置某个选择器出现次数的计数器的值,默认为0;利用这个属性,计数器可以设置或重置为任何值,可以是正值/负值;如果没有提供number,则默认为0

可能的值

<style type="text/css">
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before{
  counter-increment:section;
  content:"Section " counter(section) ". ";
}
h2:before{
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) " ";
}
</style>
<h1>HTML tutorials</h1> //Section 1.
<h2>HTML Tutorial</h2> //1.1
<h2>XHTML Tutorial</h2> //1.2
<h2>CSS Tutorial</h2> //1.3
<h1>Scripting tutorials</h1> //Section 2.
<h2>JavaScript</h2> //2.1
<h2>VBScript</h2> //2.2
<h1>XML tutorials</h1> //Section 3.
<h2>XML</h2> //3.1
<h2>XSL</h2> //3.2

quotes

quotes属性设置嵌套引用(embedded quotation)的引号类型

可能的值

<style type="text/css">
q:lang(en){
  quotes: '"' '"' "'" "'"
}
</style>
<p><q>This is a <q>big</q> quote.</q></p>

引号字符

crop

允许被替换元素仅仅是对象的矩形区域,而不是整个对象

move-to

从流中删除元素,然后在文档中后面的点上重新插入

page-policy

确定元素基于页面的occurrence应用于计数器还是字符串值

Grid属性 - 目前没有浏览器支持

使用网格系统对于打印设计师来说具有巨大的价值,现在相同的改变被应用到在线内容上;网格属性提供了在可伸缩网格中调整标题,文本和图片尺寸和位置的能力

语法

grid-columns/grid-rows: length|%|none|inherit;

grid-columns/grid-rows: length|%|none|inherit;

Hyperlink属性 - 目前没有浏览器支持

列表属性(List)

list-style

该属性是一个简写属性,涵盖了所有其他列表样式属性;由于它应用到所有display为list-item的元素,所以在普通的HTML和XHTML中只能用于li元素,不过实际上它可以应用到任何元素,并由list-item元素继承;可以按顺序设置如下属性:list-style-type/list-style-position/list-style-image;可以不设置其中的某个值,比如:"list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值

list-style-type

设置列表项标记的类型

可能的值

<style type="text/css">
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
<ul class="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">
  <li>"none" 类型</li><li>茶</li><li>可口可乐</li>
</ul>

list-style-position

list-style-position属性用于声明列表标志相对于列表项内容的位置;外部(outside)标志会放在离列表项边框边界一定距离处,不过这距离在CSS中未定义;内部(inside)标志处理为好像它们是插入在列表项内容最前面的行内元素一样

可能的值

list-style-image

list-style-image属性使用图像来替换列表项的标记;这个属性指定作为一个有序或无序列表项标志的图像,图像相对于列表项内容的放置位置通常使用list-style-position属性控制

注释:请始终规定一个"list-style-type"属性以防图像不可用

可能的值

<style type="text/css">
ul{
  list-style-image: url('/i/eg_arrow.gif')
}
</style>
<ul>
  <li>咖啡</li><li>茶</li><li>可口可乐</li>
</ul>

marker-offset

设置或检索标记容器和主容器之间水平补白,即两个容器靠近的一边的间距

语法

marker-offset : auto | length

auto:默认值,浏览器自动设置间距;length:由浮点数字和单位标识符组成的长度值,可为负值

举例:

li:before { display: marker; marker-offset: 5px; }

外边距属性(Margin) / 内边距属性(Padding)

Marquee属性

多列属性(Multi-column)

columns

columns属性是一个简写属性,用于设置列宽和列数

columns: column-width column-count; //列宽 列数

举例

<style> 
.newspaper{
  columns:100px 3;
  -webkit-columns:100px 3; /* Safari and Chrome */
  -moz-columns:100px 3; /* Firefox */
}
</style>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
</div>

column-width

column-width 属性规定列的宽度

column-width: auto|length;

auto:由浏览器决定列宽;length:规定列的宽度

column-count

语法

column-count: number|auto;

number:元素内容将被划分的最佳列数;auto:由其他属性决定列数

column-gap

语法

column-gap: length|normal;

column-gap属性规定列之间的间隔;length:把列间的间隔设置为指定的长度;normal:规定列间间隔为一个常规的间隔,W3C建议的值是1em

注释:如果列之间设置了column-rule,它会在间隔中间显示

column-rule

column-rule属性是一个简写属性,用于设置所有column-rule-*属性;column-rule属性设置列与列之间的宽度/样式/颜色规则

语法

column-rule: column-rule-width column-rule-style column-rule-color;

<style> 
.newspaper{
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;
  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari and Chrome */
  column-gap:40px;
  -moz-column-rule:4px outset #ff0000; /* Firefox */
  -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
  column-rule:4px outset #ff0000;
}
</style>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知,决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
</div>

column-fill

column-fill属性规定如何填充列(是否进行协调) - 目前主流浏览器都不支持column-fill属性

column-fill: balance|auto;

balance:对列进行协调,浏览器应对列长度的差异进行最小化处理;auto:按顺序对列进行填充,列长度会各有不同

column-span

column-span属性规定元素应横跨多少列

column-span: 1|all;

1:元素应横跨一列;all:元素应横跨所有列

<style> 
.newspaper{
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;
}
h2{
  -webkit-column-span:all; /* Chrome */
  column-span:all;
}
</style>
<div class="newspaper">
<h2>成品油价格25日凌晨上调 汽柴油涨300、290元/吨</h2>
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
</div>

Paged Media属性

定位属性(Positioning)

top/bottom/left/right

规定元素的上部/底部/左边/右边边缘,该属性定义了定位元素上/下/左/右外边距边界与其包含块上/下/左/右边界之间的偏移

注释:如果"position"属性的值为"static",那么设置"top/bottom/left/right" 属性不会产生任何效果

对于static元素为auto;对于长度值则为相应的绝对长度,对于百分比数值为指定值,否则为auto;对于相对定义元素,如果bottom和top都是auto,其计算值则都是0;如果其中之一为 auto,则取另一个值的相反数;如果二者都不是auto,bottom将取top值的相反数;left和right同理

可能的值

float

float属性定义元素在哪个方向浮动;在CSS中任何元素都可以浮动,浮动元素会生成一个块级框,而不论它本身是何种元素;如果浮动非替换元素,则要指定一个明确的宽度,否则它们会尽可能地窄

注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止

可能的值

clear

clear属性规定元素的哪一侧不允许其他浮动元素

可能的值

display

display属性用于定义建立布局时元素生成的显示框类型,对于HTML等文档类型,如果使用display不谨慎可能违反HTML中已经定义的显示层次结构

可能的值

visibility

visibility属性规定元素是否可见;即使不可见的元素也会占据页面上的空间,请使用"display"属性来创建不占据页面空间的不可见元素

可能的值

overflow

overflow属性定义溢出元素内容区的内容会如何处理;如果值为scroll,不论是否需要,用户代理都会提供一种滚动机制;因此,有可能即使元素框中可以放下所有内容也会出现滚动条

可能的值

position

position属性定义建立元素布局所用的定位机制;任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型;相对定位元素会相对于它在正常流中的默认位置偏移

可能的值

z-index

z-index属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面;元素可拥有负的z-index属性值;该属性设置一个定位元素沿z轴的位置,z轴定义为垂直延伸到显示区的轴;如果为正数,则离用户更近,为负数则表示离用户更远

可能的值

vertical-align

vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,允许指定负长度值和百分比值;这会使元素降低而不是升高,在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式

可能的值

cursor

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过CSS2.1没有定义由哪个边界确定这个范围)

可能的值

clip

clip属性用于定义一个剪裁矩形;对于一个绝对定义元素,在这个矩形内的内容才可见,出了这个剪裁区域的内容会根据overflow的值来处理;剪裁区域可能比元素的内容区大;也可能比内容区小

可能的值

打印属性(Print)

orphans

设置当元素内部发生分页时必须在页面底部保留的最少行数

page-break-after / page-break-before

page-break-after/page-break-before属性设置元素后/前的page-breaking 行为;尽管可以用always强制放上分页符,但是无法保证避免分页符的插入,创作人员最多只能要求用户代理尽可能避免插入分页;应用于:position值为relative/static的非浮动块级元素

注释:请尽可能少地使用分页属性,并且避免在表格/浮动元素/带有边框的块元素中使用分页属性

可能的值

page-break-inside

page-break-inside属性设置元素内部的page-breaking行为;尽管可以用always强制放上分页符,但无法保证避免分页符的插入,创作人员最多只能要求用户代理尽可能避免插入分页;
应用于:position值为relativ/static的非浮动块级元素

注释:请尽可能少地使用分页属性,并且避免在表格/浮动元素/带有边框的块元素中使用分页属性

可能的值

表格属性(Table)

border-collapse

border-collapse属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的HTML中那样分开显示

可能的值

<style type="text/css">
table{
  border-collapse:collapse;
}
table, td, th{
  border:1px solid black;
}
</style>
<table>
<tr>
  <th>Firstname</th><th>Lastname</th>
</tr>
<tr>
  <td>Bill</td><td>Gates</td>
</tr>
<tr>
  <td>Steven</td><td>Jobs</td>
</tr>
</table>

border-spacing

border-spacing属性使用px/cm等单位指定分隔边框模型中单元格边界之间的距离,不允许使用负值;在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔;除非border-collapse被设置为separate,否则将忽略这个属性;尽管这个属性只应用于表,不过它可以由表中的所有元素继承

empty-cells

empty-cells属性通过hide/show定义了不包含任何内容的表单元格如何表示;如果显示,就会绘制出单元格的边框和背景;除非border-collapse设置为separate,否则将忽略这个属性

caption-side

caption-side属性通过top/bottom指定了表标题相对于表框的放置位置,表标题显示为好像它是表之前/之后的一个块级元素

table-layout

tableLayout属性用来显示表格单元格/行/列的算法规则

table-layout:fixed 固定表格布局:

固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局;在固定表格布局中,水平布局仅取决于表格宽度/列宽度/表格边框宽度/单元格间距,而与单元格的内容无关;通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格

table-layout:automatic 自动表格布局:

在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的;此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容;该属性指定了完成表布局时所用的布局算法;固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的HTML表

弹性盒子(Flex Box)

弹性盒子是CSS3的一种新布局模式,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式;引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列/对齐/分配空白空间

弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过设置display属性的值为flex/inline-flex将其定义为弹性容器;弹性容器内包含了一个或多个弹性子元素

注意:弹性容器外及弹性子元素内是正常渲染的,弹性盒子只定义了弹性子元素如何在弹性容器内布局

弹性子元素通常在弹性盒子内一行显示,默认情况每个容器只有一行,从左到右显示;当然我们可以修改排列方式;如果设置direction属性为rtl(right-to-left),弹性子元素的排列方式也会改变,页面布局也跟着改变

<style>
body {
    direction: rtl;
}
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

flex-direction

flex-direction 顺序指定了弹性子元素在父容器中的位置

flex-direction: row:横向从左到右排列(左对齐),默认的排列方式 | row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面) | column:纵向排列 | column-reverse:反转纵向排列,从后往前排,最后一项排在最上面

示例

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

justify-content属性

内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐

justify-content: flex-start:弹性项目向行头紧挨着填充,这个是默认值,第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放 | flex-end:弹性项目向行尾紧挨着填充,第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放 | center:弹性项目居中紧挨着填充(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出) | space-between:弹性项目平均分布在该行上,如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start;否则第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等 | space-around:弹性项目平均分布在该行上,两边留有一半的间隔空间;如果剩余空间为负或者只有一个弹性项,则该值等同于center;否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)

示例

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

align-items

align-items设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式

align-items: flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界 | flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界 | center:弹性盒子元素在该行的侧轴(纵轴)上居中放置(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度) | baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效;其它情况下,该值将参与基线对齐 | stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制

示例

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

flex-wrap

flex-wrap属性用于指定弹性盒子的子元素换行方式

flex-wrap: nowrap:默认,弹性容器为单行,该情况下弹性子项可能会溢出容器|wrap:弹性容器为多行,该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行|wrap-reverse:反转wrap排列|initial|inherit;

示例

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

align-content

align-content属性用于修改flex-wrap属性的行为,类似于align-items,但它不是设置弹性子元素的对齐,而是设置各个行的对齐

align-content: flex-start:各行向弹性盒容器的起始位置堆叠 | flex-end:各行向弹性盒容器的结束位置堆叠 | center:各行向弹性盒容器的中间位置堆叠 | space-between:各行在弹性盒容器中平均分布 | space-around:各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半 | stretch:默认,各行将会伸展以占用剩余的空间

示例

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

弹性子元素属性

排序(order)

:用整数值来定义排列顺序,数值小的排在前面,可以为负值

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
.first {
    -webkit-order: -1;
    order: -1;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item first">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

对齐

设置"margin"值为"auto"值,自动获取弹性容器中剩余的空间;所以设置垂直方向margin值为"auto",可以使弹性子元素在弹性容器的两上轴方向都完全集中

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}
.flex-item:first-child {
    margin-right: auto;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

完美的居中

使用弹性盒子,居中变的很简单,只想要设置margin: auto;可以使得弹性子元素在两上轴方向上完全居中

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
<div class="flex-container">
  <div class="flex-item">Perfect centering!</div>
</div>

align-self

align-self属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式

align-self: auto:如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch' | flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界 | flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界 | center:弹性盒子元素在该行的侧轴(纵轴)上居中放置(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度) | baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效,其它情况下该值将参与基线对齐 | stretch:如果指定侧轴大小的属性值为'auto'则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制

示例

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}
.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}
.item3 {
    -webkit-align-self: center;
    align-self: center;
}
.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}
.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}
</style>
<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>
</div>

flex

flex属性用于指定弹性子元素如何分配空间

flex: auto:计算值为 1 1 auto | initial:计算值为 0 1 auto | none:计算值为 0 0 auto | inherit:从父元素继承 |  [ flex-grow ]:定义弹性盒子元素的扩展比率 || [ flex-shrink ]:定义弹性盒子元素的收缩比率 || [ flex-basis ]:定义弹性盒子元素的默认基准值

示例

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}
.item1 {
    -webkit-flex: 2;
    flex: 2;
}
.item2 {
    -webkit-flex: 1;
    flex: 1;
}
.item3 {
    -webkit-flex: 1;
    flex: 1;
}
</style>
<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>

文本属性(Text)

color

这个属性设置了一个元素的前景色(在HTM 表现中就是元素文本的颜色),这个颜色还会应用到元素的所有边框,除非被border-color或另外某个边框颜色属性覆盖;要设置一个元素的前景色,最容易的方法是使用color属性

direction

direction属性通过ltr/rtl指定了块的基本书写方向,以及针对Unicode双向算法的嵌入和覆盖方向;不支持双向文本的用户代理可以忽略这个属性

letter-spacing

letter-spacing属性增加或减少字符间的空白(字符间距),由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔;因此normal就相当于值为0

注释:允许使用负值,这会让字母之间挤得更紧

line-height

line-height属性设置行间的距离(行高),不允许使用负值;该属性会影响行框的布局,在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离;line-height与font-size的计算值之差(在CSS中成为行间距)分为两半,分别加到一个文本行内容的顶部和底部,可以包含这些内容的最小框就是行框;原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值

text-align

text-align属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值justify,不同用户代理可能会得到不同的结果

text-decoration

ext-decoration属性允许对文本设置某种效果,如加下划线;如果后代元素没有自己的装饰,祖先元素上设置的装饰会"延伸"到后代元素中,不要求用户代理支持blink;修饰的颜色由"color"属性设置

可能的值

text-indent

text-indent属性规定文本块中首行文本的缩进;如果使用负值,首行会被缩进到左边产生一种"悬挂缩进"的效果;text-indent总是继承计算值而不是声明值。

text-transform

text-transform属性会改变元素中的字母大小写,而不论源文档中文本的大小写;如果值为capitalize,则要对某些字母大写,但是并没有明确定义如何确定哪些字母要大写,这取决于用户代理如何识别出各个"词""

可能的值

text-wrap / word-wrap

text-wrap属性通过 none:不换行,元素无法容纳的文本会溢出/unrestricted:在任意两个字符间换行/suppress:压缩元素中的换行,浏览器只在行中没有其他有效换行点时进行换行 规定文本的换行(折行)规则

word-wrap属性通过 normal:只在允许的断字点换行(浏览器保持默认处理)/break-word:在长单词或URL地址内部进行换行 允许长单词或URL地址换行到下一行

word-break

通过使用word-break属性可以让浏览器实现在任意位置的换行

text-overflow

text-overflow属性规定当文本溢出包含元素时发生的事情

text-outline

text-outline属性通过thickness:必需,轮廓的粗细/blur:可选,轮廓的模糊半径/color:必需,轮廓的颜色规定文本轮廓

text-justify

text-justify属性规定如何对行文本进行对齐和分隔;只有 Internet Explorer 支持 text-justify 属性

text-emphasis

text-emphasis属性是简写属性,用于在一个声明中设置text-emphasis-style和text-emphasis-color;目前主流浏览器都不支持text-emphasis属性

text-align-last

text-align-last属性规定如何对齐文本的最后一行,只有在text-align属性设置为"justify"时才起作用

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

word-spacing

word-spacing属性增加或减少单词间的空白(即字间隔);针对这个属性,"字"定义为由空白符包围的一个字符串;如果指定为长度值,会调整字之间的通常间隔;所以,normal就等同于设置为 0;允许指定负长度值,这会让字之间挤得更紧

white-space

white-space属性设置如何处理元素内的空白;这个属性声明建立布局过程中如何处理元素中的空白符

可能的值

标签

punctuation-trim

punctuation-trim属性规定如果标点位于行开头或结尾处,或者临近另一个全角标点符号,是否对标点符号进行修剪

unicode-bidi

unicode-bidi属性设置文本的方向;尽管CSS试图处理书写方向,但Unicode有一种更健壮的方式来处理方向性,利用属性unicode-bidi,CSS创作人员可以充分利用Unicode的某些功能

text-shadow

text-shadow属性向文本添加一个或多个阴影;该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定,省略的长度是0

hanging-punctuation

hanging-punctuation属性规定把标点符号放在文本整行的开头还是结尾的行框之外,目前主流浏览器都不支持

2D/3D转换属性(Transform)

transform

transform属性向元素应用2D/3D转换;该属性允许我们对元素进行旋转/缩放/移动/倾斜

transform-style

<style>
#div1{
  position: relative;
  height: 200px;
  width: 200px;
  margin: 100px;
  padding:10px;
  border: 1px solid black;
}
#div2{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotateY(60deg);
  transform-style: preserve-3d;
  -webkit-transform: rotateY(60deg); /* Safari and Chrome */
  -webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3{
  padding:40px;
  position: absolute;
  border: 1px solid black;
  background-color: yellow;
  transform: rotateY(80deg);
  -webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
<div id="div1">
  <div id="div2">HELLO
    <div id="div3">YELLOW</div>
  </div>
</div>

transform-origin

transform-origin属性允许您改变被转换元素的位置;2D转换元素能够改变元素x/y 轴,3D 转换元素还能改变其Z轴

perspective

perspective属性定义3D元素距视图的距离,以像素计;该属性允许您改变3D元素查看3D元素的视图;当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身;目前浏览器都不支持perspective属性

backface-visibility

backface-visibility属性定义当元素不面向屏幕时是否可见;如果在旋转元素不希望看到其背面时,该属性很有用

<style>
div{
  position:relative;
  height:60px;
  width:60px;
  border:1px solid #000;
  background-color:yellow;
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg); /* Chrome and Safari */
  -moz-transform:rotateY(180deg); /* Firefox */
}
#div1{
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
}
#div2{
  -webkit-backface-visibility:visible;
  -moz-backface-visibility:visible;
  -ms-backface-visibility:visible;
}
</style>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>

过渡属性(Transition)

transition属性是一个简写属性,用于设置四个过渡属性:

用户界面属性(User-interface)

box-sizing

box-sizing属性允许以特定的方式定义匹配某个区域的特定元素

例如:假如您需要并排放置两个带边框的框,可通过将box-sizing设置为"border-box",这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中

box-sizing: content-box|border-box|inherit;

<style> 
div.container{
  width:30em;
  border:1em solid;
}
div.box{
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  width:50%;
  border:1em solid red;
  float:left;
}
</style>
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>

outline-offset

outline-offset属性对轮廓进行偏移,并在边框边缘进行绘制;轮廓在两方面与边框不同:1.轮廓不占用空间,2.轮廓可能是非矩形

outline-offset: length:轮廓与边框边缘的距离|inherit;

举例

<style> 
div{
  margin:20px;
  width:150px; 
  padding:10px;
  height:70px;
  border:2px solid black;
  outline:2px solid red;
  outline-offset:15px;
} 
</style>
<div>这个 div 在边框边缘之外 15 像素处有一个轮廓。</div>

appearance

appearance属性允许使元素看上去像标准的用户界面元素;所有主流浏览器都不支持该属性,Firefox支持替代的-moz-appearance属性,Safari和Chrome支持替代的-webkit-appearance属性

appearance: normal|icon|window|button|menu|field;

<style> 
div{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}
</style>
<div>一些文本。</div>

resize

resize属性规定是否可由用户调整元素的尺寸;如果希望此属性生效,需要设置元素的overflow属性,值可以是auto/hidden/scroll

resize: none:用户无法调整元素的尺寸|both:用户可调整元素的高度和宽度|horizontal:用户可调整元素的宽度|vertical:用户可调整元素的高度;

nav-up / nav-down / nav-left / nav-right

属性规定当使用nav-up / nav-down / nav-left / nav-right导航键时向何处进行导航,目前只有 Opera 支持

nav-up/nav-down/nav-left/nav-right: auto:浏览器决定导航到哪个元素|id:规定被导航元素的id|target-name:规定被导航的目标框架|inherit:规定应从父元素继承;

nav-index

nav-index属性规定元素的连续导航次序("tabbing order"),目前只有Opera支持

nav-index: auto:由浏览器分配元素的导航键控制次序|number:指示元素的导航键控制次序,1代表第一个|inherit:规定应从父元素继承;

icon

icon属性为创作者提供了将元素设置为图标等价物的能力,目前没有浏览器支持

icon: auto:使用由浏览器提供的默认通用图标|URL:引用列表中的一个或多个图标,列表用逗号分隔|inherit:规定应从元素继承;

CSS选择器

在CSS中,选择器是一种模式,用于选择需要添加样式的元素

感悟：人生要有目标，但也一定不要失去了欣赏沿途风景的热情