前端面试——那些web前端经典面试题大全及答案（html/css部分)_面试前端开发的面试官会问html+css哪些技术的问题及答案-CSDN博客

阅读目录

HTML/CSS部分
JavaScript部分
JQuery部分
开发及性能优化部分

HTML/CSS部分

1.什么是盒子模型

在网页中，一个元素站有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分组织用来分隔相邻的区域。这四个部分一起构成了css中元素的盒模型。

2.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素：a 、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系统没有内容的HTML元素，例如：hr、br、meta、link、img、input

3.css实现垂直水平居中

一道特别经典的问题，实现的方法有很多种，一下是其中一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            position: relative;
            width:300px;
            height: 300px;
            border: 1px solid black;
        }
        .content{
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align:center;
            top:0;
            left: 0;
            right:0;
            bottom:0;
            margin: auto;
            border:1px solid yellow;

        }
    </style>
</head>
<body>
    <div class="container">
       <div class="content">
           
       </div>
    </div>
    
</body>
</html>

4简述一下src与href的区别

href是指网络资源所在的位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的文职，直线改的内容将会嵌入到文档中当前标签所在位置；在请求src资源是会将其直线改的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕之后，图片和框架等元素也是如此，类似于将所指向资源嵌入到当前标签内。这也是为什么将js脚本放在底部而不是头部。

6.px和em的区别

相同点：px和em都是长度单位；
异同点：px的值固定的，指定是多少就是多少，计算比较容易。em的值是不固定的，并且em会继承父元素的字体大小。
浏览器的默认字体高都是16px、所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em,10px=0.625em.

7.浏览器的内核分别是什么？

IE：triden内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

8.什么叫做优雅降级和渐进增强

**优雅降级：graceful degradation：**一开始就构成完整的功能，然后再针对低版本浏览器进行兼容。
渐进增强：progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

9、sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器存储的缓存数据
不同点：
（1）存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的贷款浪费；
localStorage会将数据保存到本地，不会造成宽带浪费；
（2）数据存储大小不同，Cookie数据不超过4k，适用于回话标识；localStotage数据存可以达到5M
（3）数据存储的有效位不同：cookie只在设置了Cookie过期时间之前一直有效，即使关闭窗口或者浏览器；sessionStorage，仅在关闭浏览器之前有效；localStorage数据存储永久有效；
（4）作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；