“约见”面试官系列之常见面试题第三十七篇之CSS3新属性（建议收藏）
目录
CSS3
结构(位置)伪类选择器（CSS3)
目标伪类选择器(CSS3)
属性选择器(CSS3)
伪元素选择器（CSS3,重要)
CSS3盒模型（重要）
颜色模式
盒子阴影（CSS3）
文本阴影text-shadow
渐变(放在background里用)
transition过渡效果属性（重点）
transform属性（重点）
animation动画（关键帧动画，重点）
web字体（常用）
多列布局（用于文本）
伸缩布局（重点）
1. display: flex;属性（伸缩布局中必设）
2. justify-content属性（重要）
3. flex-flow 属性（flex-direction 和 flex-wrap 属性的复合属性）
4. flex-grow 属性（扩展规则）
5. flex-shrink 属性（收缩规则）
6. flew属性（flex-grow、flex-shrink和flex-basis的简写属性）
align-items属性
align-self 属性
CSS3
css3新增的属性大多数要添加前缀以达兼容。
| 浏览器前缀 | 浏览器 |
|---|---|
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
结构(位置)伪类选择器（CSS3)
- +：获取当前元素的相邻的满足条件的元素。
- ~：获取当前元素满足条件的兄弟元素。
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式,even偶数，odd奇数 - :first-of-type ：选择属于其父元素的首个
元素的每个
元素。
- :last-of-type ：选择属于其父元素的最后
元素的每个
元素。
- :nth-of-type ：选择属于其父元素第n个
元素的每个
元素。
目标伪类选择器(CSS3)
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
属性选择器(CSS3)
/* 获取到 拥有 该属性的元素 */
div[class] {/* 查找所有拥有class属性的div */
}
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */color: green;
}
伪元素选择器（CSS3,重要)
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式；
- E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor {content:"开始";
}
div::after {content:"结束";
}
E:after、E:before 在旧版本里是伪元素，CSS3的规范里**“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
":" 与 “::” 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。
注意:
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
CSS3盒模型（重要）
颜色模式
盒子阴影（CSS3）
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
（前两个必写）
文本阴影text-shadow
text-shadow：x轴 y轴 模糊半径 颜色;
模糊半径和颜色为可选项。可添加多层。
渐变(放在background里用)
linear-gradient ([[ | to <side-or-corner],] ? , [,…]);
= <color起止颜色>[<length用长度指定起止色位置> | <percentage用百分比指定>]?
background:linear-gradient(to left,red 50px,blue);
- 径向渐变radial-gradient从一个中心店开始沿着四周产生渐变效果。
radial-gradient ([ [ || ] [at ] ?, | at ]?, [,…]);
shape渐变的形状：
- ellipse表示椭圆形（默认）
- circle表示圆形
size大小:
- closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
- farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
at 坐标：
默认正中心，可以是top bottom left right，也可以是length用长度指定起止位置和percentage用百分比。
= <color起止颜色>[<length用长度指定起止色位置> | <percentage用百分比指定>]?
background: radial-gradient(circle closest-side at 50px 50px, red,blue);
- 重复渐变
repeating-linear-gradient与线性渐变语法一样。
repeating-radial-gradient与径向渐变语法一样，只不过只要写要重复的部分即可。
background: repeating-linear-gradient(to bottom, #fff 0%, #fff 10%, #000 10%, #000 20%);
background: repeating-radial-gradient(circle at center, #fff 0%, #fff 10%, #000 10%, #000 20%);
transition过渡效果属性（重点）
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。（必设）all代表所有样式（少用） |
| 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 之间的数值。 |
transform属性（重点）
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 移动。可填一个值或两个值。 |
| translate3d(x,y,z) | 定义 3D 移动。必须三个值。 |
| translateX(x) | 定义转换（移动），只是用 X 轴的值。 |
| translateY(y) | 定义转换（移动），只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换（移动），只是用 Z 轴的值。 |
| scale(x,y) | 定义 2D 缩放。1不会缩放，大于1.01放大，小于则缩小。只设一个值则等比例缩放 |
| scale3d(x,y,z) | 定义 3D 缩放。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度deg。 正数顺时针，负数逆时针。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。x代表x轴方向上的一个向量值，y、z也是如此，然后求出三个向量的对角线，再要对角线旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 rotatex的旋转正方向是顺时针。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。rotatey的旋转正方向是逆时针。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。rotatez的旋转正方向是顺时针 |
| skew(x-angle,y-angle) | 定义对象以其中心位置沿着 X 和 Y 轴的 2D 倾斜转换。会改变元素形状。在参数中规定某轴倾斜角度deg，如果角度为正，则往当前轴的负方向斜切，反之相反。先x轴后y轴斜切 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
x轴和y轴可设置为length数值 或 百分比 或top、left、right、bottom、center的组合。z轴只能设置为length数值。
| 值 | 描述 |
|---|---|
| float | 子元素将不保留其3D位置——平面方式 |
| preserve-3d | 子元素将保留其3D位置——立体方式 |
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
可设置为length数值 或 百分比 或top、left、right、bottom、center的组合。
animation动画（关键帧动画，重点）
css3中的动画为关键帧动画，即告诉系统两个状态的不同，中间的补间动画系统完成。所以设置动画，主要设置的是关键帧。
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|---|
| animationname | 必需。定义动画的名称。 |
| keyframes-selector | 必需。动画时长的百分比。合法的值：0-100%；from（与 0% 相同），to（与 100% 相同） |
| css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
@keyframes bianhua {0% {background-color: red;}50% {background-color: blue;}100% {background-color: green;}
}
- animation 属性是一个简写属性，用于设置六个动画属性：
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 (必设) |
| animation-timing-function | 规定动画的速度曲线。ease默认，低速开始然后加快，减速结束；ease-in低速开始；ease-out低速结束；ease-in-out低速开始和结束；linear匀速；cubic-bezier(n,n,n,n)自定义。 |
| animation-delay | 规定在动画开始之前的延迟。默认为0，单位s或ms。 |
| animation-iteration-count | 规定动画应该播放的次数。默认为1，infinite为无限次。 |
| animation-direction | 规定是否应该轮流反向播放动画。默认normal正常播放，alternate 动画应该轮流反向播放。 |
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
steps(数值) 可以让过渡或动画（在animation-timing-function设置）分为指定的几次完成。
- animation-play-state: paused规定动画已暂停 | running规定动画正在运行;
animation-play-state 属性规定动画正在运行还是暂停。
- animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
注释：其属性值是由逗号分隔的一个或多个填充模式关键词。
animation-fill-mode : none | forwards | backwards | both;
| 值 | 描述 |
|---|---|
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，立即应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 即forwords和backwards都设置。 |
web字体（常用）
多列布局（用于文本）
column-count: number|auto;
/*number元素内容将被划分的最佳列数。
*auto由其他属性决定列数，比如 "column-width"。
*/
- column-gap 属性规定两列之间的间隔。
column-gap: length|normal;
/*length把列间的间隔设置为指定的长度。
*normal规定列间间隔为一个常规的间隔。
*/
- column-rule 属性设置列之间的宽度、样式和颜色规则。(简写属性)
column-rule: column-rule-width column-rule-style column-rule-color;
| 值 | 描述 |
|---|---|
| column-rule-width | 规定列之间的间隔线宽度规则。 thin纤细，medium中等，thick宽厚，length规定宽度。 |
| column-rule-style | 规定列之间的间隔线样式规则。 none没有，hidden隐藏，dotted点状，dashed虚线，solid实线，double双线，groove、ridge、inset，outset 定义3D**效果，该效果取决于宽度和颜色值。 。 |
| column-rule-color | 规定颜色规则 |
- column-width 属性规定列的宽度。
column-width: auto|length;
/*auto由浏览器决定列宽。
*length 规定列的宽度。
*/
- column-span 属性规定元素应横跨多少列。
column-span: 1|all;
/*1元素应横跨一列。
*all元素应横跨所有列。
*/
伸缩布局（重点）
1. display: flex;属性（伸缩布局中必设）
display: flex; 如果一个容器设置了这个属性，那么这个盒子里面的所有之间子元素都会自动的变成伸缩项（flex item）。
2. justify-content属性（重要）
justify-content 属性 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。flex-direction设置什么排列方式，那个方向就是主轴，它的相反垂直/水平则是侧轴。注意兼容。
**提示：**使用 align-content 属性对齐交叉轴上的各项（垂直）。
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
| 值 | 描述 |
|---|---|
| flex-start | 默认值。项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| center | 项目位于容器的中心。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
3. flex-flow 属性（flex-direction 和 flex-wrap 属性的复合属性）
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，即flex-flow 为简写属性。
- flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
- flex-direction 属性规定灵活项目的方向。
- flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
**注意：**如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。
flex-flow: flex-direction flex-wrap|initial|inherit;
| flew-direction的取值 | 描述 |
|---|---|
| row | 默认值。灵活的项目将水平显示，正如一个行一样。 从左到右。 |
| row-reverse | 与 row 相同，但是以相反的顺序。 从右到左。 |
| column | 灵活的项目将垂直显示，正如一个列一样。 从上到下。 |
| column-reverse | 与 column 相同，但是以相反的顺序。 从下到上。 |
| initital | |
| inherit | 从父元素继承该属性。 |
| flex-wrap的取值 | 描述 |
|---|---|
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
4. flex-grow 属性（扩展规则）
flex-grow 属性用于设置或检索弹性盒子的扩展比率。
**注意：**如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。
flex-grow: number|initial|inherit;
number一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。 越大相对扩展越多。
5. flex-shrink 属性（收缩规则）
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
**注意：**如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。
flex-shrink: number|initial|inherit;
number一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。 越大相对收缩越多。
6. flew属性（flex-grow、flex-shrink和flex-basis的简写属性）
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认是0 |
| flex-shrink | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认是1 |
| flex-basis | 项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。一般为不用设，取默认值。 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |
| initial | 设置该属性为它的默认值，即为 0 1 auto。 |
| inherit | 从父元素继承该属性。 |
align-items属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
**提示：**使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
| 值 | 描述 |
|---|---|
| stretch | 默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 |
| flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的**侧轴结束边界。 ** |
| baseline | 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。（少用） |
align-self 属性
**align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。 **
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
选项与align-self一样，在子元素中使用。
本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。
欢迎一起私信交流。
“睡服“面试官系列之各系列目录汇总（建议学习收藏）
“约见”面试官系列之常见面试题第三十七篇之CSS3新属性（建议收藏）相关推荐
- “约见”面试官系列之常见面试题第三十三篇之事件委托（建议收藏）
目录 概述 引入原因 具体写法 适用场景 概述 "事件处理程序过多"问题的解决方案就是事件委托,利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡:由 ...
- “约见”面试官系列之常见面试题第二十四篇之vue-router使用（建议收藏）
开发的时候有时候会遇到一种情况,比如 :点击这个链接跳转到其他组件的情况,通常会跳转到新的页面,蛋是,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用. ...
- “约见”面试官系列之常见面试题第二十二篇之函数闭包（建议收藏）
目录 1.概念 2.特点 3.闭包的创建: ---------------------------------------------我是容易看懂的分界线-------------------- ...
- “约见”面试官系列之常见面试题第十九篇之数组去重（建议收藏）
目录 数组去重的方法 一.利用ES6 Set去重(ES6中最常用) 二.利用for嵌套for,然后splice去重(ES5中最常用) 三.利用indexOf去重 四.利用sort() 五.利用对象的属 ...
- “约见”面试官系列之常见面试题第十四篇之所有数据类型（建议收藏）
最近有很多人说数据类型是 6种.我怎么记得JS的数据类型有8种.最近发现好多人对JS的基础不太了解.很多数据类型都没有搞清楚.不BB,我就按我的理解写一波笔记,每次看一波书我就感觉一次比一次多懂一点. ...
- “约见”面试官系列之常见面试题第三十一篇之vue-router得守卫（建议收藏）
目录 全局前置守卫 #全局解析守卫 #全局后置钩子 #路由独享的守卫 #组件内的守卫 #完整的导航解析流程 全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫: con ...
- “约见”面试官系列之常见面试题第三十篇之计算机操作系统进程和线程区别
下面是严谨的解释: 进程 进程是程序的一次执行过程,是一个动态概念,是程序在执行过程中分配和管理资源的基本单位,每一个进程都有一个自己的地址空间,至少有 5 种基本状态,它们是:初始态,执行态,等待状 ...
- “约见”面试官系列之常见面试题之第九十七篇之怎么定义vue-router的动态路由（建议收藏）
在router目录下的index.js文件中,对path属性加上/:id. 使用router对象的params.id 例如 : this.$route.params.id
- “约见”面试官系列之常见面试题之第九十三篇之vue获取数据在哪个周期函数（建议收藏）
然后必须知道一点,vue是数据驱动的(只关心data即可),换句话说,就是,只要我能操作到 data中的数据即可. 所以,根据上面的生命周期,其实你放到 mounted中完全可以,因为这个阶段data ...
最新文章
- 找不到可安装的ISAM”的问题
- Flutter之Dart入门
- RedHat7/Centos7 搭建NFS服务器
- VTK：可视化算法之SplatFace
- JDK 8的Calendar.Builder
- 聊聊redo log是什么？
- VS2019下cmake项目：利用ELAS方法计算双目视差
- 甲骨文裁员后应该怎样发展后来的路？
- 创建你的战略型人际网络
- python矩阵对角化_大矩阵对角化python
- [SRv6]《SRv6网络编程》SRv6 OAM与随路网络测量（2/2：IFIT）
- Proxmox VE
- ubuntu20.04设置为中文
- c语言程序越界,浅析C语言编程中的数组越界问题
- [ZJOI2009]狼和羊的故事【最小割】
- opengl Bresenham直线算法
- web页面404错误
- java.util.zip.ZipFile解压后被java占用问题。
- Numpy cheatsheet
- 请教关于基于C#移动考勤系统的开发。谢谢！！！
热门文章
- *** Python版一键安装脚本
- Could not find a package,configuration file provided by G2O ,G2OConfig.cmake,g2o-config.cmake
- 牛客网 牛客小白月赛1 H.写真がとどいています
- The 15th UESTC Programming Contest Preliminary H - Hesty Str1ng cdoj1551
- cisco 交换机通过console 导入 IOS
- mybatis+spring+c3p0+maven+ehcache
- Spring Bean初始化过程
- java datarow 使用_DataRow中的链接（数据表）
- 为啥JAVA虚拟机不开发系统_理解Java虚拟机体系结构
- 计算机节电模式不能打开,电脑进入节电模式打不开怎么办