1.什么是盒模型,如何在css中告诉浏览器使用不同的盒模型来渲染你的布局?
css中所有的html元素都可以看成一个盒模型,一个盒模型包括margin,border,padding,content
盒模型分为两类:W3C标准盒子模型和IE盒子模型
编写代码尽量使用标准的W3C盒子模型
<!DOCTYPE html>用来声明,放在页面开头
标准盒模型:
总宽/高度=我们设置的宽/高度+padding+border
IE盒模型:(怪异盒模型)
总宽/高度=我们设置的宽/高度
在CSS3中通过设置box-sizing的属性来完成标准或者怪异模式的切换:
box-sizing: content-box 采用标准模式,是默认样式
box-sizing: border-box 采用怪异模式
2.请描述cookies,sessionStorage和localStorage的区别?
1》数据存储大小不同。
cookies:数据始终在同源的http请求中携带,即cookie能在服务器和浏览器之间回传。故存储的数据的小,一般为4096B。
sessionStorage:数据保存在本地,不会自动发给服务器。所以一般为5M或者更大。
localStorage:数据保存在本地,不会自动发给服务器。所以一般为5M或者更大。
2》数据有效期不同。
cookies:数据在cookie设置的有效期之前都有效,即窗口和浏览器关闭。
sessionStorage:数据在关闭浏览器窗口后自动清除。存储的数据仅在同源窗口内有效,即使在不同浏览器相同页面也是无效的,一般用于存储会话数据。
localStorage:始终有效,因此用作持久数据。(除非被清除,否则永久保存)
3》数据作用域不同。
cookies、localStorage:在所有同源窗口敏感词享。
sessionStorage:不在不同浏览器窗口敏感词享
注意:cookies,一般应用于:
判断用户是否登陆过网站,以便下次登陆时能够实现自动登陆(或记住密码)
保存上次登陆的时间等信息
保存上次查看的页面
浏览计数
session,一般用于:
网上商城中的购物车
保存用户登陆信息
将某些数据放入session中,供同一用户的不同页面使用
防止用户非法登陆
3.行内元素,块级元素,空(void)元素分别有哪些?
行内元素:a ,b ,span , img , strong , select ,label ,em ,button ,textarea 等
块级元素:div , p , ul ,li ,dl ,dt ,dd ,h1-h6 ,blockquote等
(<blockquote> 标签定义摘自另一个源的块引用。是双标签)
空元素(没有内容的html元素):br , meta ,hr , link , input ,img
4.如何居中一个浮动元素?
可以加定位
5.如何对网站的文件和资源进行优化?
文件合并,文件压缩,使用cdn(内容分发网络)托管你的资源,使用缓存,优化meta标签,启用Gzip压缩css/js文件,将css/js文件放在外部文件中,避免写在同一页面中,引用时将css放在最上面,js放在最下面等
6.常见的浏览器兼容问题?你使用过哪些浏览器调试你的项目?它们的内核分别是什么?
1》不同浏览器的标签的默认的margin和padding不同;
2》图片之间默认有间距;
3》外边距重叠问题;当两个相邻元素都设置了margin边距时,margin将取最大值,舍弃最小值。那么如何解决外边距重叠问题呢?
@1.可以为父元素定义1px的上边框(border)或上边距(padding);
@2.可以为父元素添加overflow:hidden;
4》IE9以下版本的浏览器不能使用opacity;
5》IE6双边距问题;在IE6中设置了float,同时又设置margin,就会出现边距问题
谷歌浏览器(webkit)
7.b和strong区别 ?
两个都是加粗,但是建议使用strong,因为要尽量标签语义化。
b标签:加粗,无意义,是html标签
strong:强调文档逻辑,strong是web标准中xhtml的标签,标签语义化
8.js的数据类型有多少种?
7种,String ,Nubmer ,Object ,Undefined ,Boolean ,Function,symbol(es6)
9.js的闭包?
闭包就是能够读取其他函数内部变量的函数,使得函数不被GC(垃圾回收机制)收回,如果过多使用闭包,容易导致内存泄漏。
10.关于页面性能优化?
11.标签的使用顺序?
script标签写在后面,css引入放在前面
12.如何用css隐藏一个块?
1》display:none(不保留位置)
2》z-index:设置为最低层
3》visiblity:hidden(保留位置)
4》opacity:0
5》技巧性的可以使用:width,height为0
13.那么display和opacity有什么区别呢?
display:隐藏后不再保留位置
visiblity:隐藏后保留原来的位置