学习笔记七常见前端面试题之HTMLCSS部分(二).pdfVIP

学习好资料 欢迎下载 前端攻城狮学习笔记七：常见前端面试题之 HTML/CSS 部分（二） 前端页面有哪三层构成，分别是什么？作用是什么？ 1 、结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅 负责语义的表达。解决了页面 “内容是什么 ”的问题。 2 、表示层：由 CSS 负责创建，解决了页面 “如何显示内容 ”的问题。 3 、行为层：由脚本负责。解决了页面上 “内容应该如何对事件作出 反应 ”的问题。 css 的基本语句构成是什么？ 选择符 { 属性 1: 值 1; 属性 2: 值 2;...} 等。 主流的浏览器分别是什么内核？ IE ：Trident 内核 Mozilla FireFox ：Gecko 内核 Chrome 、Safari ：Webkit 内核 Opera ：Presto 内核 经常遇到的浏览器兼容性有哪些？如何解决？ 1 、浏览器默认的 margin 和 padding 不同。解决方案是加一个全 局的 *{margin:0;padding:0;} 来统一。 学习好资料 欢迎下载 2 、IE6 双边距 bug: 块属性标签 float 后，又有横行的 margin 情 况下，在 ie6 显示 margin 比设置的大。解决方案是在 float 的标签样 式控制中加入 display:inline; 将其转化为行内属性。测试代码如下： html head titleDemo/title meta http-equiv=Content-Type content=text/html; charset=utf-8/ style type=text/css .one{ float: left; width: 150px; height:150px; background:#EEE; margin: 5px 0 5px 150px; } /style /head body div class=oneDouble Margin Bug(150*150)/div /body /html 正常的应该是： 但在 IE6 中是这样的： 学习好资料 欢迎下载 加上 display:inline; 后才正常。 3 、在 ie6 ，ie7 中元素高度超出自己设置高度。原因是 IE8 以前 的浏览器中会给元素设置默认的行高的高度导致的。解决方案是加上 overflow:hidden 或设置 line-height 为更小的高度。测试代码： .one{ height:5px; width:100px; background:#F60; } HTML 没变，还是 div class=one/div ，在 IE6 下显示 为： 这个一看就知道不止 5px ，CSS 改为下面两种之一就可以了： .one{ height:5px; width:100px; overflow:hidden; background:#F60; } /*-- 或--*/ 学