L?z ^f my
L?z ^f my

前端基础面试题

1.html+css

h5 新特性

  • 语义化标签：header、footer、section、nav、aside、article、main。。。
  • 增强型表单：input 的多个 type（color、date、email、number、tel、url、search、time…）
  • 新增表单元素：datalist、Keygen、output
  • 新增表单属性：placehoder、require、min、max
  • 音频视频：audio、video
  • 画布：canvas
  • 地理定位
  • 拖拽
  • 本地存储：localStorage、sessionStorage、indexDB
  • 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
  • webSocket：单个 TCP 连接上进行全双工通信协议

c3 的新特性[不常考][答几个就好了]

  • css3 边框

    • 边框圆角：border-radius （IE9+）
    • 盒子阴影：border-shadow（IE9+）
    • 边框图片：border-image（IE 不支持）

  • css3 背景

    • 背景图片：background-image
    • 背景大小：background-size
    • 背景起始位置：background-origin
    • 背景裁切：background-clip

  • css3 渐变

    • 线性渐变：linear-gradient

      background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: linear-gradient(red, blue);
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 重复线性渐变 */
background: linear-gradient(180deg, red, blue); /* 角度线性渐变 */

    • 径向渐变：radial-gradient

      /* 渐变的中心、形状（圆形或椭圆形）、大小、颜色 */
background: radial-gradient(center, shape size, start-color, ..., last-color)
/* 重复径向渐变 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);

  • css3 文本效果

    • 文本阴影：text-shadow: 水平阴影 垂直阴影 模糊的距离 阴影的颜色
    • 盒子阴影：box-shadow: x轴偏移 y轴偏移 模糊距离 阴影颜色
    • 文本溢出：text-overflow: clip|ellipsis|string
    • 文本换行：word-wrap: normal|break-word
    • 单词拆分：word-break: normal|break-all|keep-all

  • css3 字体

    • 定义字体：@font-face

      @font-face
{
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div
{
   font-family:myFirstFont;
}

  • css3 弹性盒子（display: flex）

    • 主轴方向：flex-direction (默认水平)

    • 主轴对齐方式：justify-content

    • 侧轴对齐方式：align-items

    • 是否允许换行：flex-wrap

    • 堆栈（由flex-wrap产生的独立行）对齐：align-content

  • css3 过渡

    • 属性：transition

      transition: 指定需要变化的属性（例如width）,完成时间, 转速曲线(例如linear), 延迟执行的时间

  • css3 动画

    • 属性：@keyframes、animation

      // 定义动画
@keyframes myfirst
{
	from {background: red;}
	to {background: yellow;}
}
// OR
@keyframes myfirst
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

div {
	animation: myfirst 5s; // 使用动画
}

  • css3 2D 转换

    • 属性：transform、transform-origin

    • 方法：translate()、rotate()、scale()、skew()、matrix()

      transform: translate(x轴移动距离, y轴移动距离) // 移动
transform: rotate(angle) // 括号内填写旋转角度（deg）
transform: scale(x轴缩放比, y轴缩放比) // 缩放
transform: skew(相对于x轴角度, 相对于y轴角度)

  • css3 3D 转换

    • 方法：translate3d(x, y, z)、scale3d(x, y, z)、rotate3d(x, y, z, angle)、perspective(n)（透视）

  • css3 调整尺寸

    • resize属性指定一个元素是否应该由用户去调整大小

      resize: none|both|horizontal|vertical

  • css3 媒体查询

    • 例子

      @media screen and (max-width: 960px) {
    body {
        background-color: darkgoldenrod;
    }
}
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

  • 盒子的处置水平居中[^常考]

    方法一：利用定位（常用方法,推荐）
.parent{
	position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

方法二：利用margin:auto;
.parent{
	position:relative;
}
.child{
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

方法三：利用display:table-cell;
.parent{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.child{
	display:inline-block;
}

方法四：利用display：flex;设置垂直水平都居中；
.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}

方法五：利用transform
.parent{
	position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

方法六：利用calc计算
.parent{
	position:relative;
}
.child{
    position:absolute;
    top:calc(200px);//（父元素高-子元素高）÷ 2=200px
    let:calc(200px);//（父元素宽-子元素宽）÷ 2=200px
}

  • css 的问题[^常考]

    opacity

    rbga： background: rgba(255, 0 ,0, 1)

    filter:Alpha(opacity=x) 兼容设置

  • 隐藏 div 的方式

    设置透明度（opacity）

    设置显隐（display：隐藏后不占空间、visibility：隐藏后仍占空间）

    设置宽/高为0

  • 单行多行文本超出显示省略号

    /* 单行文本 */
.s-ellipsis{
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 多行文本 */
.m-ellipsis{
    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}