前端随心记---------每日面试题8.29

Posted 2022-09-11 hudunyu

CSS：

清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法？

1.给父元素添加声明 overflow：hidden ； (触发一个BFC)       　　缺点：隐藏那个内容之外的元素。

2.在浮动元素下方添加空div ，并添加声明    div claer：both ;  height :  0 ;overflow : hidden ;       缺点：造成代码冗余。

3:万能清除浮动法： 选择符：after content: "  "; clear: both ; display : block ; height : 0 ; overflow : hidden ; visibility : hidden ; font-size : 1px ;      优点：实用简洁方便。

如何保持浮层水平垂直居中？让一个元素始终在窗口水平垂直居中？

<style>
            /*第一种*/
            div
                width: 200px;
                height: 200px;
                background: #F00;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                
                /*第二次*/
                div
                    width: 200px;
                    height: 200px;
                    background: #f00;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin: -100px 0  0 -100px;
                
                
        </style>

 

CSS中link 和@import的区别是?

*link和import导入外部样式的区别：

差别1：老祖宗的差别：link属于Xhtml标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。

差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识识别，而link标签无此问题。

差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

 

了解过flex吗?

 

 

 

 

 

 

 

 

 

问题：怎么理解ajax无刷新技术？ 面试必问 前端问题

答：
从如下几点进行作答：

 

1. 概念 2. 用处（使用的场景、项目）3. 优点和弊端

 

标准答法：ajax技术是属于浏览器的技术，由浏览器实例化一个ajax对象，然后帮我们发送一个http请求，并携带一定的参数，当服务器端接收该请求后，对参数进行过滤，做出相应的逻辑判断，然后决定是否需要数据库的参与，做出相应的处理后，对返回的数据进行格式化（一般都处理为json格式的数据）后返回给前端，前端在接收到后端的响应后，然后做出相应的逻辑判断，通过DOM选取页面的局部区域进行数据的操作，实现局部的更新，达到页面整体没有刷新（也就是URL地址不变的情况下），局部的区域实现更新。一般用作ajax无刷新分页展示数据，用户名、邮箱的校验等功能。

 

好处：用户的体验比较好 节省服务的带宽（减少服务器的压力）

弊端：1.浏览器无法记住访问的历史信息 2. 搜索引擎 不利于SEO