1.如何实现浏览器内多个标签页之间的通信?
- 调用localstorage,cookies等本地存储方式
- WebSocket、SharedWorker
- localstroge另一个浏览器上下文被添加、删除或修改时,它都会触发一个事件,我们通过监听事件,控制它的值来进行页面信息通信。
- 注意quirks:Safari在无痕迹模式下设置localstorge值抛出QuotExceededError的异常。
2 css盒模型有哪些及区别content-box border-box padding-box
- IE盒子模型box-sizing:border-box;(怪异模式)
- W3C标准盒子模型 box-sizing:content-box;(标准模式)默认模式
3 行内元素和块状元素的区别?行内快元素的兼容性使用?(IE8以下)
- 行内元素:会在水平方向排列,不能包含快级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效
- 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行
- 兼容性:display:inline-block;display:inline;zoom:1;
4 (1).css引入的方式有哪些?link和@import的区别是?
- 内联,内嵌,外链,导入
- 区别:同时加载,
- 前者无兼容性,后者css2.1以下浏览器不支持
- link支持使用javascript改变样式,后者不可。
5 选择器优先级是怎样的?
- 1、!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
- 2、权重算法:(0,0,0,0)==》第一个0对应的是important的个数,第二个0对应的是id选择器的个数,第三个0对应的类选择器的个数,第四个0对应的是标签选择器的个数,就是当前选择器的权重
- 3、比较:先从第一个0开始比较,如果第一个0大,那么说明这个选择器的权重高,如果第一个相同,比较第二个,依次类推。
6 清楚浮动有哪些方式?比较好的方式是哪一种
- 1、父级div定义height。
- 2、结尾处加空div标签clear:both。
- 3、父级div定义伪类:after和zoom。
- 4、父级div定义overflow:hidden。
- 5、父级div定义overflow:auto。
- 6、父级div也浮动,需要定义宽度。
- 7、父级div定义display:table。
- 8、结尾处加br标签clear:both。
- 比较好的是第3种,好多网站都这样用
7 行内元素有哪些?块级元素有哪些?css的盒模型?
- 块级元素:div ,p,h1,form,ul,li
- 行内元素:span,a,label,input,img,strong,em;
- css盒模型:内容,border,margin,padding;
8 css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
- 标签选择符;类选择符;id选择符
- id>class>标签选择
- important优先级高
9 css清除浮动的几种方法?
- 使用带clear属性的空标签;
- 使用css的overflow属性;
- 使用css的:after伪元素;
- 同时为了兼容 IE6,7 同样需要配合zoom使用
.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;} .clear{zoom:1;}
- 使用邻接元素处理;
- 父级设置成inline-block;
- br清浮动
- 以浮制浮(父级同时浮动)
- 给浮动元素父级设置高度
- 给父元素添加overflow:hidden 清除浮动方法;
- 问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;
overflow: hidden; *zoom: 1;
10 px、em、rem的区别?
- 1、px像素。绝对单位,像素px是相对于显示器屏幕分辨率而言的,是一个虚拟单位。是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI。
- 2、em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。
- rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事,仍然是相对大小但相对的只是HTML根元素。
- 4、区别:IE无法调用那些使用px作为单位的字体大小,而em和rem可以缩放,rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器已支持rem。