一些面试题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:边框为双实线

你可能感兴趣的:(html)