web前端面试之CSS3问题（码动未来）

[if !supportLists]1.1. [endif]web前端面试之CSS3问题（码动未来）

2.3.1、CSS3有哪些新特性？

新增各种CSS选择器  （: not(.input)：所有 class 不是“input”的节点）

圆角（border-radius:8px）

多列布局（multi-column layout）

阴影和反射（Shadow\Reflect）

文字特效（text-shadow、）

文字渲染（Text-decoration）

线性渐变（gradient）

旋转（transform）

增加了旋转,缩放,定位,倾斜,动画，多背景

  transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

2.3.2、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作

2.3.3、::before和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全

::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。但是并不存在于dom中，只是显示在页面上而已。同理，after就是在主体内容之后显示的

2.3.4、设置元素浮动后，该元素的display值是多少？

浮动元素自动设置为”block”元素，而不管他们之前是什么。这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE

2.3.5、font-style属性可以让它赋值为“oblique” oblique是什么意思？

让一种字体标识为斜体(oblique)，如果没有这种格式，就使用italic字体。这里描述所用的“oblique”和“italic”都是倾斜的意思。“oblique”在维基百科里的解释就是一种排版术语，就是一种倾斜的文字，但不是斜体。一种字库不能同时提供斜体和oblique两种字体，因为oblique基本上是一种模仿的斜体，而不是真正的斜体。所以，如果一种字库里没有提供斜体字，那当使用CSS的font-style: italic时，浏览器实际上是按font-style: oblique显示的。

2.3.6、position:fixed;在android下无效怎么处理

加入如下标记

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

2.3.7、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

选择符:

id选择器（ # myid）

类选择器（.myclassname）

标签选择器（div, h1, p）

相邻选择器（h1 + p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel =“external”]）

伪类选择器（a: hover, li: nth– child）

可继承的样式:

font-size font-family color, UL LI DL DD DT;

不可继承的样式：

border padding margin width height ;

优先级算法:

优先级就近原则，同权重情况下样式定义最近者为准;

优先级为:

!important >  id > class > tag

important比 内联优先级高

CSS3新增伪类:

p:first-of-type选择属于其父元素的首个元素的每个元素。

p:last-of-type选择属于其父元素的最后元素的每个元素。

p:only-of-type选择属于其父元素唯一的元素的每个元素。

p:only-child选择属于其父元素的唯一子元素的每个元素。

p:nth-child(2)选择属于其父元素的第二个子元素的每个元素。

:enabled :disabled控制表单控件的禁用状态。

:checked单选框或复选框被选中。

QQ技术交流群:815302226