HTML CSS面试题 一

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。