CSS3基础知识总结

CSS3中有哪些新特性？

1. CSS3边框

• 边框圆角（border-radius）
• 阴影（box-shadow）
• 图片绘制边框（box-image）

2. CSS3背景

• 背景图片大小（background-size）
• 背景图片的定位区域（background-origin）

3. CSS3文本效果

• 文本阴影（text-shadow）
• 允许对文本进行换行（word-wrap）

4. CSS3转换

• 定位（ translate() ）
• 旋转（ rotate() ）
• 缩放（ scale() ）
• 倾斜（ skew() ）
• 组合上面几个，需要六个参数，包含数学函数，允许设置：旋转、缩放、移动、倾斜元素 （ matrix() ）

5. CSS3过渡与动画

• 过渡（transition）
• 动画（animation）
  transition与animation的区别：transition需要事件触发，只有开始和结束的关键两帧；animation不需要事件触发，是一帧一帧完成的。

6. CSS3多列

• 规定元素被分隔的列数（column-count）
• 规定列之间的间隔（column-gap）
• 规定列之间规则的颜色、样式、宽度的简写（column-rule）

除此之外还有：

• 更多的CSS选择器
• 色彩设置（rgba）
• 伪元素（::selection）
• 媒体查询（@media 媒体类型 and (媒体特性) {样式}）
• flex布局

CSS3中新增伪类有哪些？

• p:first-of-type ：选择属于其父元素的首个< p > 元素的每个 < p > 元素
• p:last-of-type ：选择属于其父元素的最后一个< p > 元素的每个 < p > 元素
• p:only-of-type ：选择属于其父元素的唯一< p >元素的每个< p > 元素
• p:only-child ：选择属于其父元素的唯一子元素的每个< p >元素
• p:nth-child(2） ：选择属于其父元素的第二个子元素的每个＜p > 元素
• :enabled:disabled ：控制表单控件的禁用状态
• :checked ：单选框或复选框被选

使用 transform :translate 属性时会出现闪烁现象，如何解决？

-webkit-backface-visibility：hidden； //隐藏转换的元素的背面
-webkit-transform-style：preserve - 3d； //使被转换的元素的子元素保留其 3D转换
-webkit-transform-translate3d(0 0) ； //开启 GPU 硬件加速模式,使用 GPU 代替 CPU 渲染动画

盒子模型（box-sizing）

box-sizing属性主要用来控制元素盒模型的解析模式，默认值是content-box
有两种盒模型：
W3C标准盒模型（content-box）：W3C （标准）盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分，width = content。
IE盒模型（border-box）： IE 盒子模型的范围也包括 margin、border、padding、content，只不过IE 盒子模型中的 width 除了包含 content 之外，还包含了 border 和 padding，即 width = border + padding + content
详细可读：css中盒子模型

CSS3 动画的优点与缺点各是什么？

优点：

• 性能上会稍微好些，浏览器会对CSS3动画做一些优化。
• 代码相对简单。

缺点：

• 动画控制方面不够灵活。
• 兼容性不好。
• 部分动画功能无法实现。

Animation与Transition 的异同是什么？

Animation 与Transition的功能相同，都是通过改变元素的属性值来实现动画效果的。
两者区别：
Transition：需要事件触发,只能指定属性的开始值和结束值（即为开始与结束的关键两帧），然后在这两个属性值之间使用平滑过渡的方式实现动画效果，因此不能实现比较复杂的动画效果。
Animation：不需要事件触发，Animation 功能通过定义多个关键帧，以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。
详细可读：CSS3中transition和animation区别的理解

rem 的原理是什么？

在做响应式布局的时候 ，通过调整 HTML 的字体大小，页面上所有使用 rem单
位的元素都会做相应的调整

如何设置CSS3文本阴影？

p{text-shadow ：水平阴影， 垂直阴影，模糊距离，阴影颜色｝

CSS3 transition 属性值及含义是什么？

transition 属性是一个简写属性，用于设置以下4个过渡属性。

• transition-property 规定应用过渡的 CSS 属性的名称。
• transition-duration 定义过渡效果花费的时间。
• transition-timing-function 规定过渡效果的时间曲线。
• transition-delay 规定过渡效果何时开始。

transition-timing-function取值如下	对应描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

background-clip和background-origin 的区别是什么？

background-clip 规定背景（包括背景颜色和 背景图片）的绘制区域
它有3种属性，分别是border-box、 pddingbox、 conent-box

• border-box,即背景从边框开始绘制。
• padding-box,即背景在边框内部绘制。
• content-box,即背景从内容部分绘制。

backgound-origin规定背景图片的定位区域。
它也有3种属性: border-box、padding-box、conten-box
但要注意，它描述的是“背景图片。也就是说，它只能对背景做样式上的操作。一旦规定了图片开始绘制的区域，就当于规定图片的左上角从什么地方开始，其他的它就不负责了。