面试必问的新增问题 @zj-zhangjie

一场秋雨一场寒，陌生人：天凉加衣，注意身体 ！！！

面试必问的新增问题：

css3新增

CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本。

新增颜色样式属性：

增加 opacity 属性，还有 hsl()， hsla()， rgba() 和 rgb() 函数来创建 <color> 值。 
它还将 currentColor 关键字定义为合法的颜色值。
transparent 颜色目前是真彩色 (多亏了支持 alpha 通道) 并且是 rgba(0,0,0,0.0) 的别名。
它废弃了 system-color keywords(系统颜色关键字)， 它们已经不能在生产环境中使用。

新增属性选择器，伪类，伪元素：

子串匹配的属性选择器， `E[attribute^="value"]`， `E[attribute$="value"]，` `E[attribute*="value"]。`

新的伪类：[`:target`] [`:enabled`] 和 [`:disabled`]， [`:checked`]， [`:indeterminate`]，
 [`:root`]， [`:nth-child`]和 [`:nth-last-child`]， [`:nth-of-type`]和 [`:nth-last-of-type`]，
  [`:last-child`]， [`:first-of-type`]和 [`:last-of-type`]， [`:only-child`] 和 [`:only-of-type`]， [`:empty`]和 [`:not`]。

伪元素使用两个冒号而不是一个来表示：`:after` 变为 [`::after`]， 
`:before` 变为 [`::before`]， `:first-letter` 变为 [`::first-letter`]， 还有 `:first-line` 变为 [`::first-line`]。

新的 *general sibling combinator(普通兄弟选择器)* ( `h1~pre` )。

新增css命名规则：

 通过定义 *CSS qualified name(CSS 限定名)* 的概念来增加对 XML Namespace(名空间) 的支持，
  使用 ' `|` ' 语法并增加 [`@namespace`]CSS @ 规则。 

新增扩展媒体属性：

将之前的媒体类型 ( `print，` `screen，……`) 扩充为完整的语言， 
允许使用类似 `only screen 和 (color)` 来实现 [设备媒体能力查询功能]。

媒体查询并非仅能用于 CSS 文档中，它也被用于 HTML 元素的某些属性中，
 例如 [``]元素的 `media` 属性。

新增background属性和border属性：

背景支持各种类型的 [`![img]()`]， 并不局限于之前定义的 `url()。`

支持 multiple background images(多背景图片)。

[`background-repeat`] 属性的 `space` 和 `round` 值，还有支持两个值的语法。

[`background-attachment`]`local` 值。

CSS [`background-origin`]，[`background-size`] 和 [`background-clip`]属性。

支持带弧度的 border corner(边框角) CSS 属性：[`border-radius`]，
[`border-top-left-radius`]，[`border-top-right-radius`]，
[`border-bottom-left-radius`] 和 [`border-bottom-right-radius`] 。

支持边框使用 [`![img]()`]： [`border-image`]，[`border-image-source`]，
[`border-image-slice`]，[`border-image-width`]，
[`border-image-outset`] 和 [`border-image-repeat`] 。

支持元素的阴影：[`box-shadow`]。

新增多列布局属性：

增加简单的多列布局， 使用 CSS [`columns`]， [`column-count`]，
 [`column-fill`]， [`column-gap`]， [`column-rule`]， [`column-rule-color`]， 
 [`column-rule-style`]， [`column-rule-width`]， [`column-span`]，
  [`column-width`]， [`break-after`]， [`break-before`]， 和[`break-inside`]。 

新增字体单位，长度单位，定义规范：

定义了新的相对字体长度单位：`rem` 和 `ch。`

定义了相对视口长度单位：`vw，``vh，``vmax` 和 `vmin` 。

精确了绝对长度单位的实际尺寸，此前它们并非是绝对值，而是使用了 reference pixel(参考像素) 来定义。

[`calc()`]，[`attr()`]和 `toggle()` 函数符号的定义。

新增 display属性增加伸缩和布局：

为 CSS [`display`] 属性增加了 flexbox layout(伸缩盒布局) 及多个新 CSS 属性
来控制它：[`flex`]，[`flex-align`]，[`flex-direction`]，[`flex-flow`]，
[`flex-item-align`]，[`flex-line-pack`]，[`flex-order`]，[`flex-pack`] 和 [`flex-wrap`]。