AI专业者开发社区 1 号成员
  •  0 回帖  •  5 浏览  •  4 个月前
   

前端攻城狮学习笔记七：常见前端面试题之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>
    <title>Demo</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="one">Double 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;
}
/*-- 或 --*/
.one{
    height:5px;
    width:100px;
    font-size:2px;
    line-height:2px;
    background:#F60;
}

　　注意这里加了 line-height:2px 后还要加上 font-size 才行。效果如图：

　　4、min-height 在 IE6 下不起作用。解决方案是添加 height:auto !important;height:xxpx; 其中 xx 就是 min-height 设置的值。

　　5、透明性 IE 用 filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6;

　　6、a(有 href 属性) 标签嵌套下的 img 标签，在 IE 下会带有边框。解决办法是加上 a img{border:none;} 样式。

　　7、input 边框问题。去掉 input 边框一般用 border:none; 就可以，但由于 IE6 在解析 input 样式时的 BUG(优先级问题)，在 IE6 下无效。

　　ie6 的默认 CSS 样式，涉及到 border 的有 border-style:inset;border-width:2px; 浏览器根据自己的内核解析规则，先解析自身的默认 CSS，再解析开发者书写的 CSS，达到渲染标签的目的。IE6 对 INPUT 的渲染存在 bug，border:none; 不被解析，当有 border-width 或 border-color 设置的时候才会令 IE6 去解析 border-style:none;。

　　解决方案是用:border:0 或 border:0 none; 或 border:none:border-color:transparent;，推荐用第三种方案。

　　8、父子标签间用 margin 的问题，表现在有时除 IE(6/7) 外的浏览器子标签 margin 转移到了父标签上，IE6&7 下没有转移。测试代码：

<body>
    <style type="text/css">
        .box1{
            height:150px;
            background:#CCC;
        }
        .box1_1{
            height:50px;
            margin-top:50px;
            background:#AAA;
        }
    </style>
    <div class="box1">
        <div class="box1_1">box1_1</div>
    </div>
</body>

　　chrome & FireFox & IE8 & IE9 下的效果为：

　　IE6 & IE7 下的效果：

　　对于这两种显示效果，我倒认为 IE6&IE7 是正确的，不知道是否有朋友能给出解释。

　　解决办法就是父子标签间的间隔建议用 padding，兄弟标签间用 margin。

　　9、假设两块 div，第一块浮动而第二块没有浮动，IE6 下第二块就会跑到第一块边上，并且二者之间还留有间距，但标准浏览器中是第二块重合于第一块。测试代码：

<body>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            border:1px solid #CCC;
        }
        .one{
            float:left;
            height:50px;
        }
    </style>
    <div class="one">One</div>
    <div class="two">Two</div>
</body>

　　正常应该是：

　　IE6 中是：

　　解决办法是改变设计思路，如果真有两个 div 重合的需求，可以用下面的代码实现：

<body>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            border:1px solid #CCC;
        }
        .parent{
            position:relative;
        }
        .one{
            position:absolute;
            left:0;
            top:0;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
        <div class="one">Two</div>
    </div>
</body>

　　10、父子关系的标签，子标签浮动导致父标签不再包裹子标签。测试代码：

<body>
    <style type="text/css">
        .parent{
            background:#888;
            border:5px solid #888;
        }
        .one{
            float:left;
            width:100px;
            height:100px;
            background:#F60;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
    </div>
</body>

　　在 IE、Chrome、Firefox 下都是下面的效果：

　　可以看到父元素并没有包裹子元素，这是因为 float 造成的，解决方案是清除浮动就行了，用下面的代码可以解决：

<body>
    <style type="text/css">
        .parent{
            background:#888;
            border:5px solid #888;
            zoom:1;/*--for IE--*/
        }
        .parent:after{ /*--for other broswer--*/
            content:".";
            display:block;
            line-height:0;
            clear:both;
            visibility:hidden;
        }
        .one{
            float:left;
            width:100px;
            height:100px;
            background:#F60;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
    </div>
</body>

　　现在效果是：

　　最后关于 float 力荐两篇文章：CSS float 浮动的深入研究、详解及拓展 (一)、CSS float 浮动的深入研究、详解及拓展 (二)

如何居中一个浮动元素?

　　父元素和子元素同时左浮动，然后父元素相对左移动 50%，再然后子元素相对右移动 50%，或者子元素相对左移动 -50% 也就可以了。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        .p{
            position:relative;
            left:50%;
            float:left;
        }
        .c{
            position:relative;
            float:left;
            right:50%;
        }
    </style>
</head>
<body>
    <div class="p">
        <h1 class="c">Test Float Element Center</h1>
    </div>
</body>
</html>

你如何管理 CSS 文件、JS 与图片？

　　1、对各个项目中 CSS，JS 里的稳定的通用代码进行提取，形成公共文件，然后利用 CDN 等资源进行缓存，减轻服务器压力。

　　2、去掉 JS、CSS 里的冗余代码，对代码进行精减。

　　3、对 JS、CSS 进行压缩合并，减少请求次数。

　　4、对页面上的小图标，背景等图片进行合并，减少请求次数。

　　5、JS、CSS、图片均用版本控制工具进行管理，方便修改与恢复。

　　我能想到的就这么多，请大家继续补充。

小结

　　以上总结只是依据本人目前的水平给出的自己的看法，不确保严格正确，如果有误欢迎大家指出。

　　以上题目主要是选自淘宝 2011 年 HTML&CSS 面试题的剩余几题。如果大家有什么好的前端面试题，欢迎提供。