CSS3 新特性(2)

CSS3 是最新的 CSS 标准。

1、css3动画(animation)

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst {
	from {background:red;width:100px}
	to {background:yellow;width:200px}
}
div {
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
}

2、css3多列

将文本内容设计成像报纸一样的多列布局

• column-count      指定需要分割的列数
• column-gap       指定列与列之间的间隙
• column-rule-style   指定了列与列间的边框样式
• column-rule-width   指定了两列的边框厚度
• column-rule-color   指定了两列的边框颜色
• column-rule       column-rule-*所有属性的简写
• column-span      指定元素要跨越多少列
• column-width      指定了列的宽度

3、css3用户界面

用户界面属性： resize、box-sizing、outline-offset

4、css3 box-sizing 属性

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中

5、css3弹性盒（Flex Box）

一种新的布局模式。

根据屏幕大小来调整容器中子元素的布局。

display:flex;

弹性容器属性：
(1) flex-direction: row | row-reverse | column | column-reverse （常用）

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

(2)justify-content: flex-start | flex-end | center | space-between | space-around（常用）

应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐

• flex-start：弹性项目向行头紧挨着填充。默认值。
• flex-end：弹性项目向行尾紧挨着填充。
• center：弹性项目居中紧挨着填充。
• space-between：弹性项目平均分布在该行上。
• space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

(3)align-items: flex-start | flex-end | center | baseline | stretch（常用）

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（垂直居中）
• baseline：弹性盒子元素与基线对齐。
• stretch：默认值。拉伸的效果。

(4)flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;（常用）

指定弹性盒子元素的换行方式。

• nowrap - 不换行。默认。可能会溢出容器。
• wrap - 换行
• wrap-reverse -反转 wrap 排列。

(5)align-content: flex-start | flex-end | center | space-between | space-around | stretch（垂直方向）（常用）

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

弹性子元素属性：
(6)order:  （常用）

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

(7)align-self: auto | flex-start | flex-end | center | baseline | stretch（常用）

• auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
• flex-start：紧靠该行的侧轴起始边界。
• flex-end：紧靠该行的侧轴结束边界。
• center：居中放置。
• baseline：与基线对齐。
• stretch：拉伸的效果。

(8)flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]（常用）

指定弹性子元素如何分配空间。

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

6、CSS3多媒体查询

@media 规则 ，针对不同媒体类型可以定制不同的样式规则。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

• not: 排除掉某些特定设备，比如 @media not print（非打印设备）。

• only: 用来定某种特别的媒体类型。

• all: 所有设备。

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}