一些面试题2

1. 弹性盒子中复合属性的值有哪些？中文和英文
   flex-direction代表的值有：
   row横向从左到右排列（左对齐），默认的排列方式。
   row-reverse 反转横向排列（右对齐，从后往前排，最后一项排在最前面。
   column 纵向排列
   column-reverse 反转纵向排列，从后往前排，最后一项排在最上面
   flex-wrap代表值有：
   nowrap 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
   wrap 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
   wrap-reverse 反转 wrap 排列。

2. 请写出background的简写所有值，中英文
   background ： [background-color]背景颜色 | [background-image] 背景图片|
   [background-position]背景定位[/background-size]背景大小 | [background-repeat] 背景是否平铺|[background-attachment]背景是否随滚动条固定
   | [background-clip] 背景图片裁剪区域| [background-origin]背景图片的位置区域
   3.请写出2D转换的所有参数值，中英文
   Transform设置为2D属性|transform-origin(x,y)设置旋转中心点
   translate(), translateX(x),translateY(y)平移
   rotate(num deg),rotateX(),rotateY()旋转
   scale()scaleX(X),scaleY(Y)缩放
   Skew(),skewX(Xdeg)skewY(Ydeg)倾斜
   matrix(X缩放,Y倾斜,X倾斜,Y缩放,X平移,Y平移);复合属性

3. 请分别设置过渡一个宽度和高度增长200px，过渡时间3s，以慢速结束，2S后开始
   transition-property :all
   transition-duration:3s
   transition-timing-function:ease-out
   transition-delay:2s

4. 请写出动画所有语法及含义
   animation: 动画的名称 时间 运动曲线 开始时间
   播放次数 是否反向播放 是否运用结束的样式 动画是否运行或暂停;

    	animation-name	指定要绑定到选择器的关键帧的名称
    	animation-duration	动画指定需要多少秒或毫秒完成
    	animation-timing-function	设置动画将如何完成一个周期
    	animation-delay	设置动画在启动前的延迟间隔。
    	animation-iteration-count	定义动画的播放次数。
    	animation-direction	指定是否应该轮流反向播放动画。
    	animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
    	animation-play-state	指定动画是否正在运行或已暂停。
   

5. 请写出动画运动曲线的所有值和否应该轮流反向播放动画的所有值
   linear 动画从头到尾的速度是相同的。
   ease 默认。动画以低速开始，然后加快，在结束前变慢。
   ease-in 动画以低速开始。
   ease-out 动画以低速结束。
   ease-in-out 动画以低速开始和结束。

normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
7. 请写出原型的5个特性
1.所有引用类型(数组、对象、函数)，都具有对象特性，及可自由扩展属性
// 2.所有的引用类型都有一个__proto__属性，属性值是一个普通对象(原型链)
// 3.所有的函数都有一个prototype属性,属性值是一个普通对象
// 4.所有的引用类型的__proto__指向它构造函数的prototype属性值
// 5.当试图获取一个对象的某个属性时，如果这个对象本身没有这个属性，
那么他会去它的__proto__（即它构造函数的prototype）去找
8.请写出display所有属性值
none 此元素不会被显示
block 此元素将显示为块级元素，此元素前后会带有换行符
inline 默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block 行内块元素
table 此元素会作为块级表格来显示，表格前后带有换行符
flex 弹性盒模型
grid 网格布局
9.请写出水平居中的所有方法，请写出垂直居中所有方法
水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中
设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
10.请使用css画一个三角形
三角形
.boxboss{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /顺时针旋转90°/
}

11. 文字单行省略和多行省略如何实现 单行省略 overflow: hidden; /* 强制在一行显示 */ white-space: nowrap; /* 显示省略号 */ text-overflow: ellipsis; 多行省略 display: -webkit-box;/* //对象作为弹性伸缩盒子模型显示 */ overflow: hidden;/* //溢出隐藏 */ -webkit-box-orient: vertical;/* //设置伸缩盒子对象的子元素的排列方式 */ -webkit-line-clamp: 3;/* //设置 块元素包含的文本行数 */ 12. 请写出边框的所有线段样式 ·none:没有边框,即忽略所有边框的宽度(默认值) ·solid:边框为单实线 ·dashed:边框为虚线 ·dotted:边框为点线 ·double:边框为双实线