前端开发面试题（一）

一. html

1. 对html5、css3的理解，都有什么新增功能

html5和css3是对html4和css2的重大升级，增加了很多有用的新特性。

html5新特性：绘图（canvas）、离线式存储（localstorage、sessionstorage）、websocket、音视频增强标签（video、audio）。

css3新特性：css3选择器（selector）、字体（word-wrap、text-overflow、text-decoration、text-shadow）、多列布局（multi-column layout）、边框（border-radius）、变换（gradient、transform）、动画（transition、animation）

2. margin和padding的区别

margin是控件边缘相对父控件的边距。

padding是控件的内容相对控件的边缘的边距。

前端开发面试题（一）

图：css盒子模型

3. 编写一个Html结构，三列布局的，要求适应分辨率100%高度（在任何分辨率下全屏显示）

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>三列布局，要求适应分辨率100%高度</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            height:100%;
        }
        .left,.right{
            position:absolute;
            top:0;
            width:15%;
            height:100%;
        }
        .left{
            left:0;
            background:#a0b3d6;
        }
        .right{
            right:0;
            background:#a0b3d6;
        }
        .main{
            margin:0 210px;
            height:100%;
        }
    </style>
</head>
<body>
<div>
    <div class="left">
        left
    </div>
    <div class="main">
        main
    </div>
    <div class="right">
        right
    </div>
</div>
</body>
</html>

View Code