第十篇博客

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平移);复合属性

4.请分别设置过渡一个宽度和高度增长200px，过渡时间3s，以慢速结束，2S后开始

                               transition-property :all

                                 transition-duration:3s

                                 transition-timing-function:ease-out

                                 transition-delay:2s

5.请写出动画所有语法及含义

animation: 动画的名称 时间 运动曲线 开始时间

                        播放次数 是否反向播放 是否运用结束的样式 动画是否运行或暂停;

                       

                        animation-name     指定要绑定到选择器的关键帧的名称

                        animation-duration 动画指定需要多少秒或毫秒完成

                        animation-timing-function     设置动画将如何完成一个周期

                        animation-delay      设置动画在启动前的延迟间隔。

                        animation-iteration-count      定义动画的播放次数。

                        animation-direction        指定是否应该轮流反向播放动画。

                        animation-fill-mode        规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

                        animation-play-state       指定动画是否正在运行或已暂停。

6.请写出动画运动曲线的所有值和否应该轮流反向播放动画的所有值

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°/

}

<div class="boxboss"></div>

1. 文字单行省略和多行省略如何实现

单行省略

overflow: hidden;

/* 强制在一行显示 */

white-space: nowrap;

/* 显示省略号 */

text-overflow: ellipsis;

多行省略

display: -webkit-box;/* //对象作为弹性伸缩盒子模型显示 */

overflow: hidden;/* //溢出隐藏 */

-webkit-box-orient: vertical;/* //设置伸缩盒子对象的子元素的排列方式 */

-webkit-line-clamp: 3;/* //设置 块元素包含的文本行数 */

1. 请写出边框的所有线段样式

·none:没有边框,即忽略所有边框的宽度(默认值)

                                ·solid:边框为单实线

                                ·dashed:边框为虚线

                                ·dotted:边框为点线

                                ·double:边框为双实线