css知识梳理

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

css属性组

动画属性(Animation)

@keyframes - 规定动画

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

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

语法:

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

值	描述
animationname	必需,定义动画的名称
keyframes-selector	必需,动画时长的百分比;合法的值:0-100%,from(与0%相同),to(与100%相同)
css-styles	必需,一个或多个合法的CSS样式属性

举例:在一个动画中添加多个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-name	规定需要绑定到选择器的@keyframes动画名称	animation-name: keyframename/none;
animation-duration	规定动画完成一个周期所花费的秒或毫秒	animation-duration: time;
animation-timing-function	规定动画的速度曲线	animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out;
animation-delay	规定在动画开始之前的延迟	animation-delay: time; (可为负值)
animation-iteration-count	规定动画被播放的次数	animation-iteration-count: n/infinite;
animation-direction	规定是否应该轮流反向播放动画	animation-direction: normal/alternate;
animation-play-state	规定动画正在运行还是暂停	animation-play-state: paused	running;
animation-fill-mode	规定动画在播放之前或之后动画效果是否可见	animation-fill-mode : none / forwards / backwards /both;

animation-fill-mode介绍

值	描述
none	不改变默认行为
forwards	当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
backwards	在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)
both	向前和向后填充模式都被应用

背景属性(Background)

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

background-color

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

background-color可能的值

值	描述
color_name	规定颜色值为颜色名称的背景颜色(比如red)
hex_number	规定颜色值为十六进制值的背景颜色(比如#ff0000)
rgb_number	规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))
transparent	默认,背景颜色为透明
inherit	规定应该从父元素继承background-color属性的设置

background-attachment

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

background-attachment可能的值

值	描述
scroll	默认值,背景图像会随着页面其余部分的滚动而移动
fixed	当页面的其余部分滚动时,背景图像不会移动
inherit	规定应该从父元素继承background-attachment属性的设置

background-image

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

background-image可能的值

值	描述
url('URL')	指向图像的路径
none	默认值,不显示背景图像
inherit	规定应该从父元素继承background-attachment属性的设置

background-position

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

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

background-position可能的值

值	描述
top left/center/right center left/center/right bottom left/center/right	如果仅规定了一个关键词,第二个值为"center";默认值：0% 0%
x% y%	(水平位置 垂直位置);如果仅规定了一个值,另一个值为50%
xpos ypos	(水平位置 垂直位置);如果仅规定了一个值,另一个值为50%;可混合使用%和position值

background-repeat

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

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

background-repeat可能的值

值	描述
repeat	默认,背景图像在垂直方向和水平方向重复
repeat-x	背景图像在水平方向重复
repeat-y	背景图像在垂直方向重复
no-repeat	背景图像仅显示一次
inherit	规定应该从父元素继承background-repeat属性的设置

background-clip

规定背景的绘制区域

语法

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

background-clip可能的值

值	描述
border-box	背景被裁剪到边框盒
padding-box	背景被裁剪到内边距框
content-box	背景被裁剪到内容框

background-origin

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

语法

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

background-origin可能的值

值	描述
border-box	背景图像相对于边框盒来定位
padding-box	背景图像相对于内边距框来定位
content-box	背景图像相对于内容框来定位

background-size

规定背景图片的尺寸

语法

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

background-size可能的值

值	描述
length	设置背景图像的宽度和高度;如果只设置一个值,则第二个值为"auto"
percentage	以父元素的百分比来设置背景图像的宽度和高度;如果只设置一个值,则第二个值为"auto"
cover	把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中
contain	把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

多重背景

多重背景,也就是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可能的值

值	描述
thin	定义细的边框
medium	默认,定义中等的边框
thick	定义粗的边框
length	允许自定义边框的宽度
inherit	规定应该从父元素继承边框宽度

border-style

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

border-style可能的值

值	描述
none	定义无边框
hidden	与"none"相同;不过应用于表时hidden用于解决边框冲突
dotted	定义点状边框,在大多数浏览器中呈现为实线
dashed	定义虚线,在大多数浏览器中呈现为实线
solid	定义实线
double	定义双线,双线的宽度等于border-width的值
groove	定义3D凹槽边框,其效果取决于border-color的值
ridge	定义3D垄状边框,其效果取决于border-color的值
inset	定义3D inset边框,其效果取决于border-color的值
outset	定义3D outset边框,其效果取决于border-color的值
inherit	规定应该从父元素继承边框宽度

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

border-color

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

border-color可能的值

值	描述
color_name	规定颜色值为颜色名称的边框颜色(比如 red)
hex_number	规定颜色值为十六进制值的边框颜色(比如 #ff0000)
rgb_number	规定颜色值为rgb代码的边框颜色(比如 rgb(255,0,0))
transparent	默认值,边框颜色为透明
inherit	规定应该从父元素继承边框颜色

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

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

可能的值

值	描述
border-top/right/bottom/left-color	设置上/右/下/左边框的颜色
border-top/right/bottom/left-style	设置上/右/下/左边框的样式
border-top/right/bottom/left-width	设置上/右/下/左边框的宽度
inherit	规定从父元素继承border属性的设置

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相同

可能的值

值	描述
length	定义圆角的形状
%	以百分比定义圆角的形状

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

border-image

设置所有 border-image-* 属性

值	描述
border-image-source	用在边框的图片的路径
border-image-slice	图片边框向内偏移
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像边框是否应平铺(repeated)/铺满(rounded)/拉伸(stretched)

box-shadow

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

语法

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

值	描述
h-shadow	必需,水平阴影的位置,允许负值
v-shadow	必需,垂直阴影的位置,允许负值
blur	可选,模糊距离
spread	可选,阴影的尺寸
color	可选,阴影的颜色
inset	可选。将外部阴影(outset)改为内部阴影

box属性

overflow-x / overflow-y

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

语法

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

值	描述
visible	不裁剪内容,可能会显示在内容框之外
hidden	裁剪内容 - 不提供滚动机制
scroll	裁剪内容 - 提供滚动机制
auto	如果溢出框,则应该提供滚动机制
no-display	如果内容不适合内容框,则删除整个框
no-content	如果内容不适合内容框,则隐藏整个内容

overflow-style

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

语法

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

值	描述
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可能的值

值	描述
color_name	规定颜色值为颜色名称的轮廓颜色(比如 red)
hex_number	规定颜色值为十六进制值的轮廓颜色(比如 #ff0000)
rgb_number	规定颜色值为rgb代码的轮廓颜色(比如 rgb(255,0,0))
invert	默认;执行颜色反转(逆向的颜色),可使轮廓在不同的背景颜色中都可见
inherit	规定应该从父元素继承边框颜色

outline-style

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

outline-style可能的值

值	描述
none	默认,定义无轮廓
dotted	定义点状的轮廓
dashed	定义虚线轮廓
solid	定义实线轮廓
double	定义双线轮廓,双线的宽度等同于outline-width的值
groove	定义3D凹槽轮廓,其效果取决于outline-color的值
ridge	定义3D凸槽轮廓,其效果取决于outline-color的值
inset	定义3D凹边轮廓,其效果取决于outline-color的值
outset	定义3D凸边轮廓,其效果取决于outline-color的值
inherit	规定应该从父元素继承边框宽度

outline-width

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

outline-width可能的值

值	描述
thin	定义细的轮廓
medium	默认,定义中等的轮廓
thick	定义粗的轮廓
length	允许自定义轮廓的宽度
inherit	规定应该从父元素继承边框宽度

color属性

值	描述
color-profile	允许使用源的颜色配置文件的默认以外的规范
opacity	设置元素的不透明级别
rendering-intent	允许使用颜色配置文件渲染意图的默认以外的规范

Content for Paged Media 属性

值	描述
bookmark-label	规定书签的标记
bookmark-level	规定书签的级别
bookmark-target	规定书签链接的目标
float-offset	将元素放在float属性通常放置的位置的相反方向
hyphenate-after	规定连字单词中连字符之后的最小字符数
hyphenate-before	规定连字单词中连字符之前的最小字符数
hyphenate-character	规定当发生断字时显示的字符串
hyphenate-lines	指示元素中连续断字连线的最大数
hyphenate-resource	规定帮助浏览器确定断字点的外部资源(逗号分隔的列表)
hyphens	设置如何对单词进行拆分,以改善段落的布局
image-resolution	规定图像的正确分辨率
marks	向文档添加裁切标记或十字标记
string-set

CSS 尺寸属性(Dimension)

width/height

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

可能的值

值	描述
auto	默认值,浏览器可计算出实际的宽度/高度
length	使用px/cm等单位定义宽度/高度
%	定义基于包含块(父元素)宽度/高度的百分比宽度/高度
inherit	规定应该从父元素继承 width 属性的值

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;

值	描述
start	正常方向的框,每个子元素的上边缘沿着框的顶边放置;反方向的框,每个子元素的下边缘沿着框的底边放置
end	正常方向的框,每个子元素的下边缘沿着框的底边放置;反方向的框,每个子元素的上边缘沿着框的顶边放置
center	均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下
baseline	如果box-orient是inline-axis或horizontal,所有子元素均与其基线对齐
stretch	拉伸子元素以填充包含块

语法

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

值	描述
start	正常方向的框,每个子元素的左边缘沿着框的顶边放置;反方向的框,每个子元素的右边缘沿着框的底边放置
end	正常方向的框,每个子元素的右边缘沿着框的底边放置;反方向的框,每个子元素的左边缘沿着框的顶边放置
center	均等地分割多余的空间,一半位于子元素之前,另一半位于子元素之后
justify	在每个子元素之间分割多余的空间(首个子元素前和最后一个子元素后没有多余的空间)

box-direction

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

语法

box-direction: normal|reverse|inherit;

值	描述
normal	以默认方向显示子元素
reverse	以反方向显示子元素
inherit	应该从子元素继承 box-direction 属性的值

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;

值	描述
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;

值	描述
horizontal	在水平行中从左向右排列子元素
vertical	从上向下垂直排列子元素
inline-axis	沿着行内轴来排列子元素(映射为 horizontal)
block-axis	沿着块轴来排列子元素(映射为 vertical)
inherit	应该从父元素继承 box-orient 属性的值

字体属性(Font)

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

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

可能的值

值	描述
font-style	规定字体样式:normal:默认值,标准字体样式;italic:斜体字体样式;oblique:倾斜字体样式;inherit:从父元素继承字体样式
font-variant	规定字体异体:normal:默认值,标准字体;small-caps:小型大写字母字体;inherit从父元素继承font-variant属性的值
font-weight	规定字体粗细:normal:默认值,标准字符;bold:粗体字符;bolder:更粗字符;lighter:更细字符;100~900:400等同normal,700等同bold;inherit:继承
font-size	规定字体尺寸;xx-small/x-small/small/medium/large/x-large/xx-large:把字体设置为不同尺寸,默认值medium;smaller:设置为比父元素更小的尺寸;large:设置为比父元素更大的尺寸;length:设置为一个固定的值;%:设置为基于父元素的一个百分比值;inherit:规定应该从父元素继承字体尺寸
line-height	规定字体行高;normal:默认,设置合理的行间距;number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距;length:设置固定的行间距;%:基于当前字体尺寸的百分比行间距;inherit:从父元素继承
font-family	规定字体系列;可以使用逗号把多个字体名称作为一个"回退"系统来保存;如果浏览器不支持第一个字体,则会尝试下一个
caption	定义被标题控件(比如按钮/下拉列表等)使用的字体
icon	定义被图标标记使用的字体
menu	定义被下拉列表使用的字体
message-box	定义被对话框使用的字体
small-caption	caption 字体的小型版本
status-bar	定义被窗口状态栏使用的字体
font-size-adjust	定义被对话框使用的字体;Internet Explorer 不支持 font-size-adjust 属性
small-caption	caption 字体的小型版本
status-bar	定义被窗口状态栏使用的字体
font-stretch	可对当前的font-family进行伸缩变形 ,目前浏览器都不支持

内容生成(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

可能的值

值	描述
none	默认,选择器无计数器增量
id number	id定义将增加计数的选择器/id/class;number定义增量,number可以是正数/零/负数
inherit	规定应该从父元素继承 counter-increment 属性的值

counter-reset

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

可能的值

值	描述
none	默认,不能对选择器的计数器进行重置
id number	id定义将增加计数的选择器/id/class;number可设置此选择器出现次数的计数器的值,可以是正数/零/负数
inherit	规定应该从父元素继承 counter-increment 属性的值

<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)的引号类型

可能的值

值	描述
none	规定"content"属性的"open-quote"和"close-quote"的值不会产生任何引号
string string string string	定义要使用的引号;前两个值规定第一级引用嵌套;后两个值规定下一级引号嵌套
inherit	规定应该从父元素继承 counter-increment 属性的值

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

引号字符

Result	Description	Entity Number
"	double quote	"
'	single quote	'
<	single,left angle quote	‹
>	single,right angle quote	›
«	double,left angle quote	«
»	double,right angle quote	»
‘	left quote(single high-6)	‘
’	right quote(single high-9)	’
“	left quote(double high-6)	“
”	right quote(double high-9)	”
„	double quote(double low-9)	„

crop

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

move-to

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

page-policy

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

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

属性	描述
grid-columns	规定网格中每个列的宽度
grid-rows	规定网格中每个列的高度

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

语法

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

值	描述
length	参考包含块的网格
%	参考包含块的宽度/高度
none
inherit

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

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

属性	描述
target	简写属性,设置target-name/target-new/target-position属性
target-name	规定在何处打开链接(链接的目标)
target-new	规定目标链接在新窗口还是在已有窗口的新标签页中打开
target-position	规定在何处放置新的目标链接

列表属性(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

设置列表项标记的类型

可能的值

值	描述
none	无标记
disc	默认,标记是实心圆
circle	标记是空心圆
square	标记是实心方块
decimal	标记是数字
decimal-leading-zero	0开头的数字标记(01,02,03,等)
lower-roman	小写罗马数字(i,ii,iii,iv,v,等)
upper-roman	大写罗马数字(I,II,III,IV,V,等)
lower-alpha	小写英文字母The marker is lower-alpha(a,b,c,d,e,等)
upper-alpha	大写英文字母The marker is upper-alpha(A,B,C,D,E,等)
lower-greek	小写希腊字母(alpha,beta,gamma,等)
lower-latin	小写拉丁字母(a,b,c,d,e,等)
upper-latin	大写拉丁字母(A,B,C,D,E,等)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an,ban,gan,等)
cjk-ideographic	简单的表意数字
hiragana	标记是:a,i,u,e,o,ka,ki,等(日文片假名)
katakana	标记是:A,I,U,E,O,KA,KI,等(日文片假名)
hiragana-iroha	标记是:i,ro,ha,ni,ho,he,to,等(日文片假名)
katakana-iroha	标记是:I,RO,HA,NI,HO,HE,TO,等(日文片假名)

<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)标志处理为好像它们是插入在列表项内容最前面的行内元素一样

可能的值

值	描述
inside	列表项目标记放置在文本以内,且环绕文本根据标记对齐
outside	默认值;保持标记位于文本的左侧,列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inherit	规定应该从父元素继承 list-style-position 属性的值

list-style-image

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

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

可能的值

值	描述
URL	图像的路径
none	默认,无图形被显示
inherit	规定应该从父元素继承list-style-image属性的值

<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)

属性	描述
margin	在一个声明中设置所有外边距属性
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距
margin-right	设置元素的右外边距
margin-top	设置元素的上外边距
padding	在一个声明中设置所有内边距属性
padding-bottom	设置元素的下内边距
padding-left	设置元素的左内边距
padding-right	设置元素的右内边距
padding-top	设置元素的上内边距

Marquee属性

属性	描述
marquee-direction	设置移动内容的方向
marquee-play-count	设置内容移动多少次
marquee-speed	设置内容滚动得多快
marquee-style	设置移动内容的样式

多列属性(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;

值	描述	语法
column-rule-width	设置列之间的宽度规则	column-rule-width: thin:纤细/medium:中等/thick:宽厚/length:规则的数值;
column-rule-style	设置列之间的样式规则	column-rule-style: none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset;
column-rule-color	设置列之间的颜色规则	column-rule-color: color;

值	描述
none	定义没有规则
hidden	定义隐藏规则
dotted	定义点状规则
dashed	定义虚线规则
solid	定义实线规则
double	定义双线规则
groove	定义3D grooved规则,该效果取决于宽度和颜色值
ridge	定义3D ridged规则,该效果取决于宽度和颜色值
inset	定义3D inset规则,该效果取决于宽度和颜色值
outset	定义3D outset规则,该效果取决于宽度和颜色值

<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属性

属性	描述
fit	示意如何对width和height属性均不是auto的被替换元素进行缩放
fit-position	定义盒内对象的对齐方式
image-orientation	规定用户代理应用于图像的顺时针方向旋转
page	规定元素应该被显示的页面特定类型
size	规定页面内容包含框的尺寸和方向

定位属性(Positioning)

top/bottom/left/right

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

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

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

可能的值

值	描述
auto	默认值,通过浏览器计算上部/底部/左边/右边的位置
%	设置以包含元素的百分比计的上部/底部/左边/右边位置,可使用负值
length	使用px/cm等单位设置元素的上部/底部/左边/右边位置,可使用负值
inherit	规定应该从父元素继承top/bottom/left/right属性的值

float

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

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

可能的值

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值;元素不浮动,并会显示在其在文本中出现的位置
inherit	规定应该从父元素继承 float 属性的值

clear

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

可能的值

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	默认值,允许浮动元素出现在两侧
inherit	规定应该从父元素继承clear属性的值

display

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

可能的值

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素,前后会带有换行符
inline	默认;此元素会被显示为内联元素,前后没有换行符
inline-block	行内块元素
list-item	此元素会作为列表显示
run-in	此元素会根据上下文作为块级元素或内联元素显示
table	此元素会作为块级表格来显示(类似 inline-table 此元素会作为内联表格来显示(类似 table-footer-group 此元素会作为一个或多个行的分组来显示(类似 table-row-group 此元素会作为一个或多个行的分组来显示(类似 table-header-group 此元素会作为一个或多个行的分组来显示(类似
table-row	此元素会作为一个表格行显示(类似
table-column-group	此元素会作为一个或多个列的分组来显示(类似)
table-column	此元素会作为一个单元格列显示(类似)
table-cell	此元素会作为一个表格单元格显示(类似	和	)
table-caption	此元素会作为一个表格标题显示(类似)
inherit	规定应该从父元素继承display属性的值

visibility

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

可能的值

值	描述
visible	默认值;元素是可见的
hidden	元素是不可见的
collapse	在表格元素中用时,可删除一行或一列,但它不会影响表格的布局,被行或列占据的空间会留给其他内容使用,在其他的元素上使用会呈现为"hidden"
inherit	规定应该从父元素继承visibility属性的值

overflow

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

可能的值

值	描述
visible	默认值;内容不会被修剪,会呈现在元素框之外
hidden	内容会被修剪,并且其余内容是不可见的
scroll	内容会被修剪,浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承overflow属性的值

position

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

可能的值

值	描述
absolute	生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位;元素的位置通过left/top/right/bottom属性进行规定
fixed	生成绝对定位的元素,相对于浏览器窗口进行定位;元素的位置通过left/top/right/bottom属性进行规定
relative	生成相对定位的元素,相对于其正常位置进行定位;因此"left:20"会向元素的LEFT位置添加20像素
static	默认值;没有定位,元素出现在正常的流中(忽略top/bottom/left/right/z-index声明)
inherit	规定应该从父元素继承position属性的值

z-index

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

可能的值

值	描述
auto	默认,堆叠顺序与父元素相等
number	设置元素的堆叠顺序
inherit	规定应该从父元素继承z-index属性的值

vertical-align

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

可能的值

值	描述
baseline	默认;元素放置在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐
length
%	使用"line-height"属性的百分比值来排列此元素,允许使用负值
inherit	规定应该从父元素继承vertical-align属性的值

cursor

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

可能的值

值	描述
url	需使用的自定义光标的URL;请始终定义一种普通光标,以防没有由URL定义的可用光标
default	默认光标(通常是一个箭头)
auto	默认,浏览器设置的光标
crosshair	光标呈现为十字线
pointer	光标呈现为指示链接的指针(一只手)
move	此光标指示某对象可被移动
e-resize	此光标指示矩形框的边缘可被向右(东)移动
ne-resize	此光标指示矩形框的边缘可被向上及向右移动(北/东)
nw-resize	此光标指示矩形框的边缘可被向上及向左移动(北/西)
n-resize	此光标指示矩形框的边缘可被向上(北)移动
se-resize	此光标指示矩形框的边缘可被向下及向右移动(南/东)
sw-resize	此光标指示矩形框的边缘可被向下及向左移动(南/西)
s-resize	此光标指示矩形框的边缘可被向下移动(南)
w-resize	此光标指示矩形框的边缘可被向左移动(西)
text	此光标指示文本
wait	此光标指示程序正忙(通常是一只表或沙漏)
help	此光标指示可用的帮助(通常是一个问号或一个气球)

clip

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

可能的值

值	描述
shape	设置元素的形状;唯一合法的形状值是:rect(top,right,bottom,left)
auto	默认值,不应用任何剪裁
inherit	规定应该从父元素继承clip属性的值

打印属性(Print)

orphans

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

page-break-after / page-break-before

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

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

可能的值

值	描述
auto	默认,如果必要则在元素后/前插入分页符
always	在元素后/前插入分页符
avoid	避免在元素后/前插入分页符
left	在元素之后/前足够的分页符,一直到一张空白的左页为止
right	在元素之后/前足够的分页符,一直到一张空白的右页为止
inherit	规定应该从父元素继承属性的值

page-break-inside

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

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

可能的值

值	描述
auto	默认,如果必要则在元素内部插入分页符
avoid	避免在元素内部插入分页符
inherit	规定应该从父元素继承属性的值

表格属性(Table)

border-collapse

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

可能的值

值	描述
separate	默认值;边框会被分开,不会忽略border-spacing和empty-cells属性
collapse	如果可能边框会合并为一个单一的边框,会忽略border-spacing和empty-cells属性
inherit	规定应该从父元素继承border-collapse属性的值

<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"属性设置

可能的值

值	描述
none	默认,定义标准的文本
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
blink	定义闪烁的文本
inherit	规定应该从父元素继承text-decoration属性的值

text-indent

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

text-transform

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

可能的值

值	描述
none	默认,定义带有小写字母和大写字母的标准的文本
capitalize	文本中的每个单词以大写字母开头
uppercase	定义仅有大写字母
lowercase	定义无大写字母,仅有小写字母
inherit	规定应该从父元素继承text-transform属性的值

text-wrap / word-wrap

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

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

word-break

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

值	描述
normal	使用浏览器默认的换行规则
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

text-overflow

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

值	描述
clip	修剪文本
ellipsis	显示省略符号来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本

text-outline

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

text-justify

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

值	描述
auto	浏览器决定齐行算法
none	禁用齐行
inter-word	增加/减少单词间的间隔
inter-ideograph	用表意文本来排齐内容
inter-cluster	只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐
distribute	类似报纸版面,除了在东亚语系中最后一行是不齐行的
kashida	通过拉伸字符来排齐内容

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;

值	描述
auto	默认值;最后一行被调整,并向左对齐
left	最后一行向左对齐
right	最后一行向右对齐
center	最后一行居中对齐
justify	最后一行被调整为两端对齐
start	最后一行在行开头对齐(如果text-direction是从左到右,则向左对齐否则向右对齐)
end	最后一行在行末尾对齐(如果text-direction是从左到右,则向右对齐否则向左对齐)
inherit	从父元素继承该属性

word-spacing

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

white-space

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

可能的值

值	描述
normal	默认,空白会被浏览器忽略
pre	空白会被浏览器保留;其行为方式类似HTML中的 标签
nowrap	文本不会换行,文本会在在同一行上继续,直到遇到 标签为止
pre-wrap	保留空白符序列,但是正常地进行换行
pre-line	合并空白符序列,但是保留换行符
inherit	规定应该从父元素继承white-space属性的值

punctuation-trim

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

值	描述
none	不修剪开启或闭合标点符号
start	修剪每行结尾的开启标点符号
end	修剪每行结尾的闭合标点符号
allow-end
adjacent

unicode-bidi

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

text-shadow

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

值	描述
h-shadow	必需;水平阴影的位置,允许负值
v-shadow	必需;垂直阴影的位置,允许负值
blur	可选;模糊的距离
color	可选;阴影的颜色

hanging-punctuation

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

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

transform

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

transform-style

值	描述
flat	子元素将不保留其3D位置
preserve-3d	子元素将保留其3D位置

<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属性是一个简写属性,用于设置四个过渡属性:

值	描述
transition-property	规定设置过渡效果的CSS属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始

用户界面属性(User-interface)

box-sizing

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

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

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

值	描述
content-box	宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框
border-box	为元素设定的宽度和高度决定了元素的边框盒;就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
inherit	规定应从父元素继承box-sizing属性的值

<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;

值	描述
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中,选择器是一种模式,用于选择需要添加样式的元素

选择器	例子	例子描述
.class	.intro	选择class="intro"的所有元素
#id	#firstname	选择 id="firstname" 的所有元素
*	*	选择所有元素
element	p	选择所有 元素
element,element	div,p	选择所有 元素和所有 元素
element element	div p	选择 元素内部的所有 元素
element>element	div>p	选择父元素为 元素的所有 元素
element+element	div+p	选择紧接在 元素之后的所有 元素
[attribute]	[target]	选择带有target属性所有元素
[attribute=value]	[target=_blank]	选择target="_blank"的所有元素
[attribute~=value]	[title~=flower]	选择title属性包含单词"flower"的所有元素
[attribute	=value]	[lang	=en]	选择lang属性值以"en"开头的所有元素
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:active	a:active	选择活动链接,当点击一个链接上时,它就会成为活动的(激活的)
:hover	a:hover	选择鼠标指针位于其上的链接
:focus	input:focus	选择获得焦点的input元素
:first-letter	p:first-letter	选择每个 元素的首字母
:first-line	p:first-line	选择每个 元素的首行
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 元素
:before	p:before	在每个 元素的内容之前插入内容
:after	p:after	在每个 元素的内容之后插入内容
:lang(language)	p:lang(it)	选择带有以it开头的lang属性值的 元素;该值可为en或en-xx
element1~element2	p~ul	选择前面有 元素的每个 元素
[attribute^=value]	a[src^="https"]	选择其sr属性值以"https"开头的每个元素
[attribute$=value]	a[src$=".pdf"]	选择其src属性以".pdf"结尾的所有元素
[attribute*=value]	a[src*="abc"]	选择其src属性中包含"abc"子串的每个元素
:first-of-type	p:first-of-type	选择属于其父元素的首个 元素的每个 元素
:last-of-type	p:last-of-type	选择属于其父元素的最后 元素的每个 元素
:only-of-type	p:only-of-type	选择属于其父元素唯一的 元素的每个 元素
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 元素
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 元素
:nth-last-child(n)	p:nth-last-child(2)	同上,从最后一个子元素开始计数
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 元素的每个 元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上,但是从最后一个子元素开始计数
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 元素
:root	:root	选择文档的根元素
:empty	p:empty	选择没有子元素的每个 元素(包括文本节点)
:target	#news:target	选择当前活动的#news元素
:enabled	input:enabled	选择每个启用的元素
:disabled	input:disabled	选择每个禁用的元素
:checked	input:checked	选择每个被选中的元素
:not(selector)	:not(p)	选择非 元素的每个元素
::selection	::selection	选择被用户选取的元素部分

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