A

:active ::after align-content align-items align-self animation animation-delay animation-direction aniamtion-duration animation-fill-mode animation-iteration-count animation-name aniamtion-play-state animation-timing-function attr()

:active

:active伪类用来匹配用户激活元素。允许页面在浏览器检测到活动时给予反馈。通常用于指用户按下鼠标然后释放它之间的这段时间，也可以用来匹配Tab按键。经常被用于<a>和<button>元素。遵循L-V-H-A的规则，即:link - :visited - :hover - :active。这样可以保证样式不被覆盖。

在多按键鼠标上，CSS3明确规定:active伪类只能应用于主按键:对于右撇子鼠标即为鼠标左键。

语法
```
:active {style properties}
```
浏览器支持支持度良好，IE4+支持<a>的:active，到了IE8+才支持除<a>外其他元素的:active。

在Safari手机浏览器中，除非在相关元素上或者<body>上绑定touchstart事件，否则不会应用:active状态。

:after

::after用来匹配所选元素的最后一个虚拟子元素。通常用content属性为其添加内容。默认情况下这个元素是内联元素。

语法

/*CSS3语法*/
::after {style properties}
/*CSS2语法*/
:after {style properties}

Tooltips 实现一个hover提示(attr() + ::after)

<p>Here is the live example of the above code.<br />
 We have some <span data-descr="collection of words and punctuation">text</span> here with a few
 <span data-descr="small popups which also hide again">tooltips</span>.<br />
 Don't be shy, hover over to take a <span data-descr="not to be taken literally">look</span>.
</p>

span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}

span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}

浏览器支持 IE8+支持:after写法，IE9+支持::after写法；只有Chrome和Firefox支持其动画和transition。

align-content

安排flex容器中多行内容的垂直方向摆放形式(前提是在垂直方向上有多余空间)。适用于父容器

语法

/* Pack lines from the cross-axis start，取消空白，将所有行都挤在容器顶部*/
align-content: flex-start;

/* Pack lines to the cross-axis end ，取消空白，将所有行都挤在容器底部*/
align-content: flex-end;

/* Pack lines around the cross-axis center，取消空白，将所有行都挤在正中间 */
align-content: center;

/* Distribute lines along the cross-axis, start to end ，最顶部和最底部行靠紧容器边缘，行与行之间空白间隔相同*/
align-content: space-between;

/* Distribute lines along the cross-axis, equally spaced ,最顶部和最底部离边缘一个单位空白，其余行间距为2个单位空白*/
align-content: space-around;

/* Stretch lines to occupy the whole cross-axis,在每行下填充等高空白来占据所有垂直空间*/
align-content: stretch;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;

align-items

安排flex容器中单行内容的垂直方向摆放形式(前提是在垂直方向上有多余空间)。适用于父容器

/* 对齐到侧轴起点 */
align-items: flex-start;

/* 对齐到侧轴终点 */
align-items: flex-end;

/* 在侧轴上居中 */
align-items: center;

/* 与基准线对齐 */
align-items: baseline;

/* 拉伸元素以适应 */
align-items: stretch;

align-items: inherit;

align-self

分配flex容器中某个子项在垂直方向的位置，会覆盖父容器的align-items属性。若在垂直方向上某个margin被设置为auto，则该属性无效。适用于子容器。

关于align-content,align-items,align-self,justify-content的区别

animation

初始值:

animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

animation-delay

设置延迟时间。正值会使元素延迟执行动画；负值会使元素提前预演一段时间动画且立即从指定位置开始动画，如设置为-2s，则动画从2s处立即执行。

animation-direction

设置动画执行方向。

/*默认属性，动画每次都从正向开始*/
animation-direction: normal
/*动画每次都从反向开始*/
animation-direction: reverse
/*动画首先从正向开始，然后反向，然后正向...*/
animation-direction: alternate
/*动画首先从反向开始，然后正向，然后反向...*/
animation-direction: alternate-reverse

animation-duration

定义一个动画周期持续的时间默认为0s。必须带单位，否则无效。同样负值也无效。

animation-fill-mode

指定动画开始或者结束时保持何种状态

/*开始结束均保持原始状态*/
animation-fill-mode: none;
/*开始之前即为动画第一帧状态，结束之后保持原始状态*/
animation-fill-mode: forwards;
/*开始之前保持原始状态，结束之后为动画最后一帧状态*/
animation-fill-mode: backwards;
/*开始之前为动画第一帧状态，结束之后为动画最后一帧状态*/
animation-fill-mode: both;

如何理解animation-fill-mode及其使用？

animation-iteration-count

定义动画的循环次数，值可以是正整数，也可以是小数，还可以是infinity(无限循环)

animation-name

指明元素所应用的关键帧，关键帧命名由大小写不敏感的字母a-z，数字0-9,下划线_,斜杠/和横线-组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。

animation-play-state

表明当前动画状态。可读可写。这意味着我们可以通过查询这个属性值来获取动画状态信息，也可以通过传值来控制动画的执行。值为running或paused

animation-timing-function

定义CSS动画在每一动画周期中执行的节奏。

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
/*贝塞尔曲线*/
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
/*等同于step(1,start)*/
animation-timing-function: step-start;
/*等同于step(1,end)*/
animation-timing-function: step-end;
/*第一个参数表示动画分几步完成，第二个参数表示动画在阶段开始时发生阶跃变化，还是结束时..*/
animation-timing-function: steps(4, end);

CSS3 timing-function: steps() 详解

attr()

获取选择到的元素的某一HTML属性值，目前浏览器仅支持将其用于伪元素中的content，其属性值采用伪元素所依附的元素。

B

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat

backface-visibility

指定当前元素背面朝向观察者时是否可见。元素背面总是透明的，当其朝向观察者时，显示正面的镜像。

由于2D变换无透视效果，故该属性对2D变换无效。

语法

backface-visibility: visibility | hidden

background

CSS背景相关属性的简写

初始值:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

background-attachment

当指定background-image时，backgeound-attachment决定背景在视口中固定还是随包含它的区块滚动。

语法

/*随页面滚动而滚动,同时也会根据其被应用的元素来确定位置及调整大小*/
background-attachment: scroll;
/*在视口中固定,根据视口大小确定位置及大小，因此图片可能会显示不够完全*/
background-attachment: fixed;
background-attachment: local;

background-attachment: inherit;

background-attachment

background-blend-mode

定义该元素的背景图片及背景色如何混合.

background-clip

指定元素的背景延伸到何处。

/*默认值，背景延伸到边框外边缘*/
background-clip: border-box
/*背景延伸到边框内边缘*/
background-clip: padding-box
/*背景延伸到元素内容外边缘*/
background-clip: content-box

background-clip: inherit

background-color

元素背景色，属性值为颜色值或者关键字"transparent"

background-image

为元素设置一个或多个背景图像;在绘制时，以z方向堆叠方式进行。先指定的图像会在之后指定的图像上绘制。然后border在它们之上绘制，而background-color会在他们之下绘制。

最佳实践: 给予元素背景图片的同时，也应当赋予其背景色。(在网络状态不好的情况下，用户会首先看到背景色，而不是白色)

background-origin

控制背景绘制位置，默认值为padding-box.background-attachment: fixed时无效。

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

background-origin: inherit

那么background-clip和background-origin区别在哪儿呢? 前者是用来控制显示的，而后者是用来控制绘制的。换句话说，前者即便控制了在边框外边缘显示，而后者没有指定绘制位置也不能显示；反过来，即便后者绘制位置从边框外边缘开始，前者设置为非边框外边缘显示，那么背景也不能从外边缘显示。

background-position

指定背景图片的初始位置，这个初始位置是相对于background-origin的值来说的。默认值为0% 0%

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0px 0px, center;

如果只有一个值被指定，则该值默认为水平方向值，而垂直方向会被设置为50%。

background-repeat

指定背景图片以平铺效果重复出现及重复方式。

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;  /*默认值*/
background-repeat: space;   /尽可能重复，图像之间留有均匀空白**/
background-repeat: round;  /*会进行挤压*/
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

evantianx / Bloooooooog

[MDN]CSS #12

A

:active

:after

align-content

align-items

align-self

animation

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

attr()

B

backface-visibility

background

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-repeat