WEB前端面试

本文主要是介绍WEB前端面试，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.HTML+CSS

1. 行内元素（行级元素、内联元素）、行内块元素、块元素各有什么区别。

1. html元素的分类
2. 各种类型的区别
3. 各有哪些元素

2. 清除浮动有哪些方法

1. 为什么设置元素浮动（当前可以用flex布局替换浮动布局）
2. 浮动元素的特性
3. 使用空div清除浮动。
4. overflow：hidden：扩展overflow的属性
5. 伪元素：扩展伪元素的用法，img不可以添加伪元素，js不能操作伪元素

3. 前端优化

降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。 加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。 缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。 渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline

4. 盒子模型有哪些常用的属性，如何使用这些属性。

1. margin
2. padding
3. border
4. box-sizing

5. HTML5新增了哪些标签

1. 布局：header、footer、section、aside、nav、article
2. 媒体：audio、video
3. 画板：canvus

5. px、em、rem的区别和用法。

1. px是固定尺寸
2. em参考父级font-size值
3. rem参考html元素font-size值：多用于移动端百分比布局。

6. css选择器权重如何判断。

1. 内联样式
2. 嵌入样式
3. 外部样式

7 . 如何使用css的定位（position属性）。

1. 绝对定位
2. 相对定位
3. 固定定位
4. 设置参照物

8. 让一个div垂直水平居中

1. 使用定位
2. 使用flex布局

/* 方法一 */ .container{ width:500px; height:500px; border:1px solid red; position: relative; } .box{ width:100px; height:100px; background-color: blue; /* 垂直水平居中 */ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } /* 方法二 */ .container{ width:500px; height:500px; border:1px solid red; display:flex; align-items: center; justify-content: center; } .box{ width:100px; height:100px; background-color: blue; }

9. 让两个块元素在同一行显示有哪些方法

1. 元素浮动：需要清除浮动，如果不熟练，会引入很多新问题。
2. 设置display:inline | inline-block：边距不好控制
3. flex布局：推荐
4. 定位（永远都不要用）

10. css3新增了哪些特性

1. 更多的选择器
2. 边框阴影、文字阴影、圆角、渐变
3. transform:translate|scale|rotate
4. 过渡效果：transition
5. 引入外部字体
6. 动画效果
7. 媒体查询
8. flex布局
9. gird布局

11. 设置元素透明度有哪些属性

1. rgba：只有当前元素透明
2. opacity：子元素继承透明属性

12. display:none和visibility:hidden的区别

1. display:none 隐藏不占位
2. visibility:hidden隐藏占位

GET 和 POST 的区别:

 

get 参数通过 url 传递，post 放在 request body 中。 get 请求在 url 中传递的参数是有长度限制的，而 post 没有。 get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。 get 请求只能进行 url 编码，而 post 支持多种编码方式 get 请求会浏览器主动 cache，而 post 支持多种编码方式。 get 请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留。 GET 和 POST 本质上就是 TCP 链接，并无差别。但是由于 HTTP 的规定和浏览器/服务器 的限制，导致他们在应用过程中体现出一些不同。 GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。 画一个三角形   三角形原理：边框的均分原理 div { width:0px; height:0px; border-top:10px solid red; border-right:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid transparent; }

说一下浏览器缓存

缓存分为两种：强缓存和协商缓存，根据响应的 header 内容来决定。

强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话， cache-control 的优先级高于 expires。 协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match HTML5 新增的元素 首先 html5 为了更好的实践 web 语义化，增加了 header，footer，nav,aside,section 等语义 化标签，在表单方面，为了增强表单，为 input 增加了 color，emial,data ,range 等类型， 在存储方面，提供了 sessionStorage，localStorage,和离线存储，通过这些存储方式方便数 据在客户端的存储和获取，在多媒体方面规定了音频和视频元素 audio 和 vedio，另外还 有地理定位，canvas 画布，拖放，多线程编程的 web worker 和 websocket 协议。 HTML5 和 CSS3 用的多吗？你了解它们的新属性吗？有在项目中用过 吗

 

html5： 1）标签增删 8 个语义元素 header section footer aside nav main article figure 内容元素 mark 高亮 progress 进度 新的表单控件 calander date time email url search 新的 input 类型 color date datetime datetime-local email 移除过时标签 big font frame frameset 2）canvas 绘图，支持内联 SVG。支持 MathML 3）多媒体 audio video source embed track 4）本地离线存储，把需要离线存储在本地的文件列在一个 manifest 配置文件 5）web 存储。localStorage、SessionStorage css3： CSS3边框如border-radius， box-shadow等； CSS3背景如background-size， background-origin 等；CSS3 2D，3D 转换如 transform 等；CSS3 动画如 animation 等。

这篇关于WEB前端面试的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！