20道web前端面试题及问题答案

小编给大家分享一下20道web前端面试题及问题答案，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

公司主营业务：做网站、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出休宁县免费做网站回馈大家。

一、CSS问题

1.flex布局

display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩

flex:1; 子元素设置，设置子元素如何分配父元素的空间，flex:1,子元素宽度占满整个父元素align-items:center 定义子元素在父容器中的对齐方式，center 垂直居中justify-content:center 设置子元素在父元素中居中，前提是子元素没有把父元素占满，让子元素水平居中。

2.css3的新特性

transtion

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。

ainimation实现动画效果主要由两部分组成：

通过类似Flash动画中的帧来声明一个动画；

在animation属性中调用关键帧声明的动画。

translate 3D建模效果

3.img中alt和title的区别

图片中的 alt属性是在图片不能正常显示时出现的文本提示。alt有利于SEO优化

图片中的 title属性是在鼠标在移动到元素上的文本提示。

4.用纯CSS创建一个三角形

5.如何理解CSS的盒子模型？

标准盒子模型：宽度=内容的宽度（content）+ border + padding

低版本IE盒子模型：宽度=内容宽度（content+border+padding)

6.如何让一个div水平居中

已知宽度，block元素，添加添加margin:0 auto属性。

已知宽度，绝对定位的居中，上下左右都为0，margin:auto

7.如何让一个div水平垂直居中

div {
position: relative / fixed; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top:-150px;
margin-left:-250px;

外边距为自身宽高的一半 */

background-color: pink; /* 方便看效果 */
 }
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px; /* 可省 */
height: 100px; /* 可省 */
background-color: pink; /* 方便看效果 */
}

8.如何清除浮动？

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式

{clear:both;height:0;overflow:hidden;}

给浮动元素父级设置高度

父级同时浮动（需要给父级同级元素添加浮动）

父级设置成inline-block，其margin: 0 auto居中方式失效

给父级添加overflow:hidden 清除浮动方法

万能清除法 after伪类清浮动（现在主流方法，推荐使用）

float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}

9.css3实现三栏布局，左右固定，中间自适应

圣杯布局/双飞翼布局

function unique(arr){ var arr2 = arr.sort(); var res = [arr2[0]]; for(var i=1;i

利用下标查询

 function unique(arr){
    var newArr = [arr[0]];
    for(var i=1;i17.ajax中get和post请求的区别
get 一般用于获取数据
get请求如果需要传递参数，那么会默认将参数拼接到url的后面；然后发送给服务器；
get请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；
get安全性较低
get 一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用个时间戳
post 一般用于发送数据
post传递参数，需要把参数放进请求体中，发送给服务器；
post请求参数放进了请求体中，对大小没有要求；
post安全性比较高；
post请求不会走缓存；
18.ajax的状态码
2开头
200 : 代表请求成功；
3开头
301 : 永久重定向；
302: 临时转移
304 : 读取缓存 [表示浏览器端有缓存，并且服务端未更新，不再向服务端请求资源]
307:临时重定向
以4开头的都是客户端的问题；
400 :数据/格式错误
401: 权限不够；（身份不合格，访问网站的时候，登录和不登录是不一样的）
404 : 路径错误，找不到文件
以5开头都是服务端的问题
500 : 服务器的问题
503: 超负荷；
19.移动端的兼容问题
给移动端添加点击事件会有300S的延迟
如果用点击事件，需要引一个fastclick.js文件，解决300s的延迟
一般在移动端用ontouchstart、ontouchmove、ontouchend
移动端点透问题,touchstart 早于 touchend 早于click,click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上
尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
用fastclick，github.com/ftlabs/fast…
用preventDefault阻止a标签的click
消除 IE10 里面的那个叉号
input:-ms-clear{display:none;}
设置缓存
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
圆角BUG
某些Android手机圆角失效
background-clip: padding-box;
防止手机中网页放大和缩小
这点是最基本的，做为手机网站开发者来说应该都知道的，就是设置meta中的viewport
设置用户截止缩放，一般写视口的时候就已经写好了。
20.JS中同步和异步,以及js的事件流
同步：在同一时间内做一件事情
异步：在同一时间内做多个事情
JS是单线程的，每次只能做一件事情，JS运行在浏览器中，浏览器是多线程的，可以在同一时间执行多个任务。
以上是20道web前端面试题及问题答案的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！            
            
                            

                当前标题：20道web前端面试题及问题答案                

                URL标题：http://dzwzjz.com/article/jcscig.html
            
        
        
            其他资讯
            
                
                    
                            马上着手开发ios,马上着手开发iOS
                        

                            jqueryxml解析的简单介绍
                        

                            怎么删除mysql隐藏的,怎么把隐藏的数据删除
                        

                            css样式剧中,CSS百度百科
                        

                            怎么给oracle起名,oracle名字由来
                        
                
            
        
    



    
        
            
                
                
                    分享至：
                    
                        
                        
                        
                        
                    
                    
                
            
            
                
                    关于我们
                    
                        公司简介
                        发展历程
                    
                
                
                    服务项目
                    
                        高端网站建设
                        小程序开发
                        APP开发
                        网络营销
                    
                
                
                    建站知识
                    
                        行业新闻
                        建站学堂
                        常见问题
                    
                
                
                    联系我们
                    
                        公司地址
                        人才招聘
                    
                
            
            
                
                    成都
                    达州
                
                
                    
                        
                            
                            电话：028-86922220
                        
                        
                            
                            地址：成都市太升南路288号锦天国际A幢1002号
                        
                    
                    
                        
                            
                            电话：028-86922220
                        
                        
                            
                            地址：达州市南岸区弹子石腾龙大道58号2栋21-6
                        
                    
                
            
        
        
            友情链接：
            巴彦网站建设   乐尚佳花箱   wap网站建设   温岭熙道网站   成都娃娃鱼   网站空间   四川内江电信机房   不锈钢防护栏   网站制作公司   成都网站改版           
    
    版权所有：青羊区大橙子信息咨询工作室
        蜀ICP备2022028542号-14
    




    
        
            
            在线咨询
        
    
    
        
            
            服务热线
        
        服务热线：028-86922220
    
    
        
            
            TOP

大橙子网站建设，新征程启航

20道web前端面试题及问题答案

其他资讯