淘宝前端面试题之HTML/CSS部分

 Html/Css   高蒙   阅读(1454)   评论(0)   2015-12-04 22:05:25    前端面试题 常见前端面试题 


最近收集到一些关于淘宝前端面试的面试题,下面分享给大家。

 

Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义?

 

  Doctype是document type(文档类型)的简写,是用来说明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三种DTD声明可供选择,分别是:

 

  1、过渡的(Transitional,也叫混杂模式):要求比较宽松,允许继续使用HTML4.01的标识,完整声明为

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd">

 

  2、严格的(Strict):要求严格的DTD,不能使用任何表现层的标识和属性,完整声明为

 

<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

  3、框架的(Frameset):专门针对框架页面设计使用的DTD,如果页面中包含有框架,可以采用DTD,完整声明为

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

  定义成相应的声明就可以触发相应的模式。

 

  区分的意义是为了最终能达到数据与表现相分离的目地。

 

行内元素和块级元素各有哪些?

 

  行内元素会再一条直线上,是在同一行的。如   我是行内元素span   我是行内元素a

 

  块级元素会各占一行。如

 

  行内元素主要有:<span>、<a>、<b>、<img>、<br>、<button>、<strong>、<textarea>、<select>

 

  块级元素主要有:<div>、<ul>、<li>、<p>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<iframe>、<ol>、<pre>、<table>、<tr>、<td>

 

  行内元素可以通过display:block转为块级元素。另外块级元素的margin和padding都正常,行内元素左右maring和左右padding正常,上下不识别,也就是说不能通过margin-top和padding-top来改变行高。

 

CSS的盒模型?

 

  CSS盒模型:网页设计中的每个元素都是长方形的盒子,如下图所示

 

 

 

  Margin 比较特别,它不会影响盒子本身的大小,但是它会影响和盒子有关的其他内容。盒子本身的大小是这样计算的:

 

  width(即MSIE中的offsetWidth):width + padding-left + padding-right + border-left + border-right

 

  height(即MSIE中的offsetHeight):height + padding-top + padding-bottom + border-top + border-bottom

 

CSS引入的方式有哪些?

 

  CSS与HTML文档结合的4中方法:

  1、使用<link>元素链接到外部的样式文件

  2、在<head>元素中使用"style"元素来指定

  3、使用CSS "@import"标记来导入样式表单

  4、在<body>内部的元素中使用"style"属性来定义样式

 

  Demo:

 

<html>
<head>
      <title>css demo</title>
      <link rel=stylesheet type="text/css" href="css/name.css" title="cool">
      <style type="text/css">
            @import url(css/name2.css);
            h1 {color:red}
      </style>
</head>
<body>
      <h1>CSS demo</h1>
      <p style="color:blue">Test</p>
</body>
</html>

link和@import的区别是?

 

  本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。

 

  1、老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

 

  2、加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。

 

  3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

 

  4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

 

CSS选择符有哪些?

 

  CSS选择符主要有以下10类:

 

  1、通配选择符:*{margin:0px;}

 

  2、类型选择符:a{text-decoration:none;}

 

  3、属性选择符:input[type="button"]{padding:5px;}

 

  4、包含选择符:div.code a{text-decoration:none;}

 

  5、子对象选择符:ul.test>li{font-size:14px;}

 

  6、ID选择符:#test {color:red;}

 

  7、类选择符:.test{color:red;}

 

  8、选择符分组:body,ul,li{margin:0px;}

 

  9、伪类及伪对象选择符:div:first-letter{font-size:16px;}、a.test:hover{text-decoration:underline;}

 

  10、相邻选择符:li+li{font-weight:bold;}

 

哪些属性可以继承?

 

  CSS可以继承的属性有:

 

  1、文字相关:font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing

 

  2、列表相关:list-style-image、list-style-position、list-style-type、list-style

 

  3、颜色相关:color

 

  4、透明度:opacity(opacity的继承有问题,子元素会继承祖元素的opacity,但是无法更改。)

 

  另外,font-size继承的是父元素的大小,而不是比例。line-height当父元素是百分比或px值的时候,子元素跟父元素相同,当父元素是normal或数字的时候,子元素的line-height是子元素的字体大小乘以数字。

 

优先级算法如何计算?

 

  重要性和来源的优先级排序从低到高是:

 

  1、浏览器默认样式

 

  2、用户在浏览器中定义的普通样式(normal规则,不带important规则)

 

  3、开发人员定义的普通样式( normal规则,不带important规则)

 

  4、开发人员定义特殊样式(带important规则)

 

  5、用户在浏览器中定义特殊样式(带important规则)

 

  另外还有一些原则:

 

  1、相同的样式在CSS规则后添加了!important的优先于没有添加的。

 

  2、CSS规则在文档中出现的顺序后面定义的的优先于前面定义的。

 

  3、内联样式优先于用link引入的样式和页面上<style>里的样式。

 

  常见的用以上规则就可以确定了,如果以上规则还不能区分,请参考这里:http://www.w3.org/TR/CSS21/cascade.html#specificity

 

内联和important哪个优先级高?

 

  important高,DEMO:

 

<style type="text/css">
        .test{
                padding:10px;
                border-radius:5px;
                border:1px solid red!important;
        }
</style>
...
<div class="test" style="border:1px solid blue;">Test</div>

 

前端页面有哪三层构成,分别是什么?作用是什么?

 

  1、结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达。解决了页面&ldquo;内容是什么&rdquo;的问题。

 

  2、表示层:由CSS负责创建,解决了页面&ldquo;如何显示内容&rdquo;的问题。

 

  3、行为层:由脚本负责。解决了页面上&ldquo;内容应该如何对事件作出反应&rdquo;的问题。

 

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>

 

正常的应该是:

 

2012070922331652.jpg

 

 

但在IE6中是这样的:

 

2012070922331652.jpg

 

 

加上display:inline;后才正常。

 

  3、在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。解决方案是加上overflow:hidden或设置line-height为更小的高度。测试代码:

 

.one{
    height:5px;
    width:100px;
    background:#F60;
}

 

HTML没变,还是<div class="one"></div>,在IE6下显示为:

 

2012070922331652.jpg

 

 

这个一看就知道不止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才行。效果如图:

 

2012070922331652.jpg

 

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下的效果为:

 

2012070922331652.jpg

IE6 & IE7 下的效果:

 

2012070922331652.jpg

 

对于这两种显示效果,我倒认为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>

 

正常应该是:

 

2012070922331652.jpg

 

IE6中是:

 

2012070922331652.jpg

 

解决办法是改变设计思路,如果真有两个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下都是下面的效果:

 

2012070922331652.jpg

可以看到父元素并没有包裹子元素,这是因为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>

 

现在效果是:

 

2012070922331652.jpg

 

如何居中一个浮动元素?

父元素和子元素同时左浮动,然后父元素相对左移动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、图片均用版本控制工具进行管理,方便修改与恢复。

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

小结

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

 

  以上题目主要是选自淘宝HTML&CSS面试题,今天就总结这几个,现在出去吃饭,以后会继续。如果大家有什么好的前端面试题,欢迎提供。

 

 




相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客