【前端面试笔记】面试准备02

1,居中一个浮动元素?

 1,宽度不固定的话:在浮动元素外包裹一个外盒子

 <div class="outerbox"> <div class="innerbox">我是浮动的</div> </div>

然后,外部盒子相对于默认位置即整体距离左侧50%,内部盒子相对于外部盒子的宽度距离右侧50%,即自身一半偏移量;

.outerbox{float:left; position:relative; left:50%; } 
.innerbox{     float:left; position:relative; right:50%; }

2,宽度固定的话:同样是相对位置,但是外盒子距离左侧距离上面50%距离,同时外边距margin弥补本身的高度和宽度,向左50% 宽度,向上50%高度;

<div class="outerbox"><div>我是浮动的</div></div>

 .outerbox{
     width:500px ; 
     height:300px; /*高度可以不设*/
     margin: -150px 0 0 -250px; /*使用marin向左移动250px,保证元素居中*/
     position:relative;   /*相对定位*/
     left:50%;
     top:50%;

 }

3,对行级元素垂直居中(height与line-height的值一样)

  1. height:300px;

  2. line-height:300px;

2,清除浮动

第一种:添加新的元素,应用clear:both; 

第二种:给父级元素定义overflow:hidden;

第三种:伪类:after 方法:(注意:作用于浮动元素的父亲)

浮动的影响:(1)父元素的高度无法被撑开,影响与父元素同级的元素
(2)与浮动元素同级的非浮动元素会跟随其后
(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

3,性能优化的方法

链接:https://www.nowcoder.com/questionTerminal/03d484e1aad84b1da60f0f70575156f3
来源:牛客网
网页内容:

1.减少http请求: http协议是无状态的应用层协议,意味着每次http请求都要建立通信链路、进行数据传输。减少http的主要手段是合并css、合并javascript、合并图片。

2.减少DNS查询次数 3.避免页面跳转 4.使用浏览器缓存:缓存AJAX;5.延迟加载:LazyLoad Images。刚加载的时候减少http请求。 6.提前加载7.减少DOM元素数量 8.根据域名划分内容 9.减少iframe数量10.避免404

服务器:1.使用CDN 2.添加Expires或Cache-Control报文头 3.Gzip压缩传输文件4.配置ETags 5.使用GET AJAX请求 6.避免空的图片src

cookie:1.减少cookie的大小和传输次数 2.页面内容实用无cookie域名

CSS:1.将样式表放在head中:网页会在全部加载完成CSS后渲染页面。2.避免CSS表达式 3.用<link>代替@import 4.避免使用Filters

Javascript:1.脚本置底 2.使用外部的Javascript和CSS文件 3.精简Javascript和CSS4.去除重复脚本 5.减少DOM访问 6.使用智能事件处理7.慎用with 8.减少作用域查找

图片:1.优化图片; 2.使用CSS Sprites ;3.不要在HTML中缩放图片;4.使用小且可缓存的favicon.ico

4,如何解决多个元素重叠问题?

z-index

5,页面布局的方式

1,双飞翼布局:

负边距:

负边距对这些由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,但这种偏移不同于相对定位,通过相对定位偏移后,其仍然会坚守着它原来占据的空间,不会让文档流的其它元素乘虚而入。

而通过负边距进行偏移的元素,它会放弃偏移前占据的空间,这样它后面文档流中的其它元素就会“流”过来填充这部分空间。

在文档流中,元素的最终边界是由margin决定的,margin为负的时候就相当于元素的边界向里收,文档流认的只是这个边界,不会管你实际的尺寸是多少。

某个元素虽然是写在了后面,但可以通过负边距让它在浏览器显示的时候是在前面的。

margin-left:为负,使元素左移;

双飞翼布局,即middle,left,right

middle宽度100%,靠左,left宽度固定,靠左,但是向左移动一整个middle,即middle的宽度100%,覆盖在middle上且最左边,此时right被挤到了下一行,使其向左移动自身宽度,占据最右侧;

2,flex弹性布局:

3,多栏布局:

4,响应式布局:

网络安全

6,XSS攻击,如何防范

攻击者向Web界面里插入恶意的HTML标签或者JS代码,比如在评论里放一个看似安全的链接,骗取用户的点击并窃取Cookie信息;或者放恶意表单,将信息传到攻击者的服务器。

防范:1.在代码里对于用户输入的地方和变量都要仔细检查长度和对"<",">"";等字符做过滤;2,在任何内容写入页面之前必须进行编码,避免泄露HTMLtag.

7,如何避免cookie信息被窃取?

首先避免在cookie中泄露用户隐私;其次使cookie与ip绑定,降低cookie泄露后的危险,这样得到的cookie没有实际价值,不能拿来用;如果网站不需要在浏览器端进行cookie操作,可以在setcookie末尾加上httponly防止JS代码直接获取cookie表单;

尽量用POST请求方法而不是GET提交表单。

8,XSS攻击与CSRF攻击区别

XSS用于获取信息,不需要用户页面的代码和数据包;

CSRF用于代替用户完成指定的动作,需要知道其他用户页面的代码和数据包;

9,如何防范CSRF攻击?

攻击流程:1,登录受信任网站A,并在本地生成cookie;2,在不登出A的情况下,访问危险网站B.

对已完成认证的用户进行非预期的个人信息或者设定信息等状态的更新。

防范服务器端的CSRF攻击有很多方法,基本思路是在客户端页面中添加伪随机数

10,Web攻击有哪些?

XSS攻击,SQL注入,CSRF攻击。

SQL注入:把SQL命令插入web表单,输入域名或者页面请求的查询字符串中,最终欺骗服务器执行恶意的SQL命令。

防范措施:1,不要信任用户的输入,进行校验,通过正则表达式或者限定长度,对单引号-进行转换;

2,始终不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询和读取;

3,始终不要使用管理员权限的数据库连接,为每个应用使用单独的权限和有限信息;

4,不要把机密信息明文存放,可以通过加密或者散列处理密码和敏感信息;

作者:cc.-C
链接:https://www.nowcoder.com/discuss/162963
来源:牛客网
 

11,从输入一个url到页面展示,期间经历了什么过程。

一般来说,会先经过DNS域名解析,将其解析为IP地址,建立TCP连接,三次握手:1,客户端问服务端能连吗?2,服务端回复你可以;3,客户端向服务器端说我发了哦;(4次挥手。),

http应用层协议传输数据

浏览器收到http报文,将其解析渲染;

12,http状态码

2:200正常,206部分请求,返回正常;

3:   301永久重定向,302,303临时重定向;304缓存没变

4:客户端错误 401:需要登录,未授权;403:服务器拒绝请求;404:

5:服务器错误 500:服务器错误;502:网关故障;504:网关超时;

13,跨域如何解决

14,回流与重绘。

15,获取url信息(协议、参数)

16,修改url参数,页面不刷新(是url参数,不是hash)

猜你喜欢

转载自blog.csdn.net/weixin_41835977/article/details/88762149
今日推荐