学长历险记之前端面试题（基础部分分享）

一、代码简化

请简化下面的 CSS 代码：
a)margin:0px;
b)padding:10px 0 10px 0;
c)border-width:1px;border-style:solid;border-color:#ff5500;

答：考察 CSS 的优化:

margin:0;padding:10px 0;border:1px solid #ff5500;
还可以进一步简写
margin:0;padding:10px 0;border:1px solid #f50;

二、行内元素有哪些?块级元素有哪些?CSS 的盒模型?

块级元素：div p h1 h2 h3 h4 form ul。
行内元素: a b br i span input select。
Css 盒模型:内容，border ,margin，padding。

三、CSS 引入的方式有哪些? link 和@import 的区别是?

参考：
内联 内嵌
外链 导入。
区别 ：同时加载。
前者无兼容性，后者 CSS2.1 以下浏览器不支持。
Link 支持使用 javascript 改变样式，后者不可。
1.使用 LINK 标签
将样式规则写在.css 的样式文件中，再以标签引入。
"text/css" href="example.css">
2.使用@import 引入
跟 link 方法很像，但必须放在 中

3.使用 STYLE 标签
将样式规则写在标签之中。

4.使用 STYLE 属性
将 STYLE 属性直接加在个别的组件标签里，<组件(标签) STYLE="性质(属性)1: 设定值 1; 
性质(属性)2: 设定值 2; ...}
5.使用标记引入样式
"font:12px/20px #000000;">cnwebshow.com
两者区别：加载顺序的差别。当一个页面被加载的时候，link 引用的 CSS 会同时被加载，
而@import 引用的 CSS 会等到页面全部被下载完再被加载。@import 可以在 css 中再次引入
其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：
main.css
———————-
@import“sub1.css”;
@import“sub2.css”;
这样做有一个缺点，会对网站服务器产生过多的 HTTP 请求，以前是一个文件，而现在
却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。

四、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和 important 哪个优先级高?

标签选择符 类选择符 id 选择符
继承不如指定 Id>class>标签选择
后者优先级高

五、前端页面由哪三层构成，分别是什么?作用是什么?

网页分成三个层次，即：结构层、表示层、行为层。网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。
这是 Javascript 语言和 DOM 主宰的领域。

六、link 和@import 的区别是？

link 属于 XHTML 标签，而@import 是 CSS 提供的;
页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题;link 方式的样式的权重高于@import 的权重.使用@import 引入跟 link 方法很像，但必须放在样式表中 @import url(css/example.css);–>使用 STYLE 标签将样式规则写在标签之中。 body {color: #666;background: #f0f0f0;font-size: 12px;}td,p {color:#c00;font-size: 12px;}–>@import 可以在 css 中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：main.css———————-@import “sub1.css”;@import “sub2.css”;这样做有一个缺点，会对网站服务器产生过多的 HTTP 请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。

七、常见兼容性问题？

• png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。* IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin比设置的大。浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将 IE 游览器从所有情况中分离出来。接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。.bb{background-color:#f1ee18;/所有识别/.background-color:#00deff\9; /IE6、7、8 识别/+background-color:#a200ff;/IE6、7 识别/_background-color:#1e0bd1;/IE6 识别/ }* IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性;Firefox 下,只能使用 getAttribute()获取自定义属性.解决方法:统一通过 getAttribute()获取自定义属性.* IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性.* 解决方法：（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和active 了解决方法是改变 CSS 属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

八、`html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

• HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。* 绘画 canvas用于媒介回放的 video 和 audio 元素本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除语意化更好的内容元素，比如 article、footer、header、nav、sectio表单控件，calendar、date、time、email、url、search新的技术 webworker, websockt, Geolocation* 移除的元素纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；支持 HTML5 新标签：* IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式：* 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架如何区分： DOCTYPE 声明\新增的结构元素\功能元素

九、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie 在浏览器和服务器间来回传递。sessionStorage 和 localStorage 不会 sessionStorage 和 localStorage 的存储空间更大sessionStorage 和 localStorage 有更多丰富易用的接口；sessionStorage 和 localStorage 各自独立的存储空间；

十、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

1.id 选择器（ # myid）2.类选择器（.myclassname）3.标签选择器（div, h1, p）4.相邻选择器（h1 + p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（ * ）8.属性选择器（a[rel = “external”]）9.伪类选择器（a: hover, li: nth – child）* 可继承的样式： font-size font-family color, UL LI DL DD DT;* 不可继承的样式：border padding margin width height ;* 优先级就近原则，同权重情况下样式定义最近者为准;* 载入样式以最后载入的定位为准;优先级为:!important > id > class > tagimportant 比 内联优先级高