html5css3新特性面试,前端面试题——HTML5和CSS3

1. 列举3个HTML5新标签，3个CSS3新特性。HTML5 新标签 header,nav,article,footer,section,aside,audio,video,embed

CSS3 新特性 border-radius ,box-shadow,border-image,background-image,transition.

2. HTML5实现本地临时存储和永久存贮、读取、删除一条 key 为c，value 为 tom 的数据。// 临时存储

sessionStorage.setItem('c','tom')

// 永久存贮

localStorage.setItem('c','tom')

// 读取

localStorage.getItem('c')

// 删除

localStorage.removeItem("c");//逐条删

localStorage.clear();//删除全部

3.用 js+css3 实现某 DIV 以50px每秒的速度左移 100px

.box{

width: 100px;

height: 100px;

background-color:pink;

position: relative;

left: 0;

top: 0;

}

// 100*20=2000

// 获取box

let box= document.querySelector('.box')

let left = box.style.left

var leftnum = Number(left.split('px')[0]) //不要单位

var num = 1

var animate = setInterval(() => {

if(num>=100){

clearInterval(animate)

}

leftnum+=1

box.style.left = leftnum+'px'

num++

}, 20);

4.CSS 实现三栏布局(左右固定200px，中间自适应)

双飞翼布局：都左浮动，中间包一个盒子，padding 隔开两侧宽度。左右两侧都有 margin-left.

body {

min-width: 550px;

}

.col {

float: left;

}

#main {

width: 100%;

height: 400px;

background-color: #ccc;

}

#main-wrap {

margin: 0 200px 0 200px;

}

#left {

width: 200px;

height: 400px;

margin-left: -100%;

background-color: red;

}

#right {

width: 200px;

height: 400px;

margin-left: -200px;

background-color: #ff0000;

}

圣杯布局：中间不包盒子但还是有 padding。

#container{

padding: 0 190px 0 190px;

}

.col{

position: relative;

float: left;

}

#main{

width: 100%;

height: 400px;

background-color: #ddd;

}

#left{

width: 190px;

height: 400px;

background-color:red;

/* 离左边距本身的距离 */

margin-left: -100%;

/* 然后又自己向左移了本身的宽度*/

left: -190px;

}

#right{

width: 190px;

height: 400px;

background-color: yellow;

margin-left: -190px;

right: -190px;

}

拓展 左右布局

html,body{

height: 100%;

}

.left{

width: 256px;

height: 100%;

background-color: #ddd;

float: left;

}

.right{

width: 100%;

height: 100%;

margin-left: 256px;

background-color: rgb(230, 48, 48);

}

5.使用 html5 canvas 绘制实心原形。

#canvas{

width: 500px;

height: 500px;

}

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

//画一个空心圆

ctx.beginPath();

// arc()方法是创建弧/曲线(用于创建圆或部分圆)

// context.arc(x,y,r,sAngle,eAngle,counterclockwise);

// 起始角为 0

// 结束角为 2*Math.PI

ctx.arc(100,75,50,0,2*Math.PI);

ctx.lineWidth=5;

ctx.strokeStyle="green";

// 使用 stroke()或fill()方法在画布上绘制实际的弧

ctx.stroke();//画空心圆

ctx.closePath();

//画一个实心圆

// ctx.beginPath();

// ctx.arc(200,100,50,0,360,false);

// ctx.fillStyle="red";//填充颜色,默认是黑色

// ctx.fill();//画实心圆

// ctx.closePath();

//空心和实心的组合

// ctx.beginPath();

// ctx.arc(100,100,50,0,360,false);

// ctx.fillStyle="red";

// ctx.fill();

// ctx.strokeStyle="green";

// ctx.stroke();

// ctx.closePath();

6.如何使用 css3 动画实现盒子 hover 时高度从10到100的动画？

#box{

width: 100px;

height: 10px;

background-color: pink;

transition: all 1s ease;

}

#box:hover{

height: 100px;

}