15、css和html的面试题和答案

                                             面试题

1. 如何清除一个标签的子标签的浮动？

清除浮动的几种方法：

1. 父元素有高度，此时就没有浮动的影响了
2. 父元素如果不愿意设置固定死的高度，而是自动适配，就写overflow:hidden;_zoom:1;
3. 后面的元素父盒子加上clear:both;盒子还是没有高度，margin失效；
4. 两个盒子之前加上一个
      .cl{clear:both}，隔墙法，盒子还是没有高度。
5. 盒子加上::after{content:"",clear:both;} ，内墙法，这个元素自己最后的子元素是一个标准流元素，所以一下子给这个父盒子撑高了。特别好用。

2、描述一下浮动会造成什么影响，如何居中一个浮动元素？

【脱标】浮动的元素脱离标准文档流，【贴边】左浮动就会贴左边，又浮动贴右边，贴上一个兄弟元素的边，【字围】字会环绕这个浮动元素，【收缩】不区分行内元素和块级元素了，原来的行内元素现在可以设置宽度、高度，原来的块级元素如果不写width现在会自动缩减为内容宽度。

浮动的元素要想居中，必须相对定位。相对定位利用margin-left:50%; left:-宽度一半。

原理就是margin-left:50%;此时元素的左边线就会到屏幕中线，拉回自己的width一半即可。所以要用相对定位拉动。或者transform:translate(-50%,0);

也可以left:50%; margin-left:-宽度一半;

3、简单说明绝对定位和浮动的区别和应用。

绝对定位脱离标准文档流，它的参考点是文档的左上角或者右上角。如果有任何父元素有定位属性，此时就依据“子绝父相”规则来设置自己的定位参考元素。在做网页时候非常的灵活方便。制作覆盖效果的时候，会大量使用绝对定位。

浮动脱离标准文档流，通常用于制作并排显示的元素，通常用于大的布局，或者无序列表比如图片的并排。可以使用clear:both属性让标准流中的其他元素在此之后依次排列。

4、当float和margin同时使用时，如何解决IE6的双倍边距？

当浮动的方向和margin是同方向的时候，此时IE6会在这个方向的第一个元素身上产生双倍margin。解决方法：

1) 改变margin的方向，float:left; margin-right:20px;  浮动向左，margin向右

2) 给第一个元素单独写一个类叫做.no1  此时.no1{_margin-left:一半的margin;}

3) 用display:inline;不用浮动了

5、行内元素和块级元素的区别，行内元素有哪些，块级元素有哪些？

行内元素不能设置宽度、高度，但是能并排显示，浏览器视行内元素是“文本流元素”。span、a、em、b、u、i。

块级元素能设置宽度、高度，但是不能并排显示。div、h1、ul、p、li、section、header。

1. CSS引入的方法有哪些？都有什么区别？

外链式（也叫作外联式）

内嵌式（也叫作内联式）

导入式

行内式

内嵌式速度快，但是改版麻烦，可以减少HTTP请求。

外链式方便多个网页同时使用一个样式表。

行内式通常用于开发时候的临时测试，语义不清晰，不能使用。

导入式不好用，因为页面首先加载，然后导入样式表，页面在1s~2s内会有没有样式表的情况，然后突然有了样式。

7、在书写高效CSS时，需要考虑哪些问题？

基本原则是：去掉不必要的样式、合并相同的样式、尽可能缩小样式的大小、多用公共类、让css变得不臃肿。

我在工作中，经常使用gulp中有一个插件叫做gulp-csso，可以智能合并相同的样式，比如div p{font-size:10px;color:green;}  p{color:green;} 它会智能变为：div p{font-size:10px;}  p{color:green;}。

8、简述一下什么是内容与表现分离。

HTML就是负责语义，其他什么都不需要管。HTML不要用b、u、i来设置加粗、下划线、倾斜，而是写font-weight:bold;  text-decoration:underline; font-style:italic; 用CSS来表示。再比如，logo可以用h1，用背景替换文字来呈递图片。text-indent:-999em;CSS负责样式，不要写行内样式。

9、CSS层叠是什么？

CSS全名叫做层叠式样式表，cascading style sheet，cascading就是层叠的意思。层叠具体有两层含义：

1） 比如一个标签它可以通过多种手段给他添加属性。

#logo{}

.spec{}

h1{}

body{}

此时这个标签就被多个选择器添加属性，如果属性有冲突，CSS有精确的权重计算方法来确定“听谁的”。

2） 一个选择器可以同时作用在多个标签身上，比如同一个类名可以加在不同的标签身上，也有一些属性可以继承下去。

 

10. 请解释浏览器是如何根据CSS选择器选择对应元素的？

#表示id，浏览器会寻找拥有id的元素。.表示类名class属性，空格表示后代，> 表示子元素, + 表示下一个兄弟 ， ~ 后面所有兄弟。

 

11、以下有若干个CSS选择器，请给出他们的优先级顺序。

div h1、  #div h1、    div h1 #_h、   div h1.c_h

div h1权重(0,0,2)

#div h1权重（1,0,1）

div h1 #_h权重（1,0,2）  这个最大

div h1.c_h  权重（0,1,2)

 

12、在HTML代码中如何做SEO？

1. h标签合理使用，strong标签语义比较强，合理使用。
2. title、、要合理设置
3. a标签要写title，img要写alt
4. div要有合理类名，比如.content、.header、.address，便于搜索引擎爬虫检索
5. HTML层次清晰，id不要重复，便于搜索引擎爬虫检索

 

13、CSS怎样判断不同分辨率显示不同宽度布局，从而实现自适应宽度？

1. 使用百分比布局，用百分比来写宽度、marign、padding
2. 使用rem当做单位，写一点JS让html根元素的字号随着浏览器宽度的变化而等比例变化
3. 使用媒体查询让不同宽度的浏览器使用不同的样式表，

 

14、一个页面（HTML）由哪几部分构成？分别是什么？作用是什么？

由head和body构成。

head里面放置一些配置信息，比如配置title、keyword、description、charset等等信息，不会显示在浏览器中。

body是内容，会显示在浏览器的屏幕中。

15、你如何理解HTML的语义化？能否接触或了解重构？

根据语义来选择合适的标签，而不是表现形式。HTML只负责语义，不是说要加粗了，就放一个h，只是可以让开发者能写出优雅的代码，并且利于SEO。

网页重构指的是将Table布局的网页变为标准DIV+CSS代码，让结构和表现分离，方便维护

16、如何区别CSS中的display:none和visibility:hidden？

display:none; 释放了自己的位置，后面的元素会上来占据现有位置，并且如果内部有img元素，此时img元素不会加载；

visibility:hidden如同opacity：0；只是不可见了，位置还是保留的。

17、给文字添加阴影用哪个属性？

text-shadow:1px 1px 1px red;

18、display属性值的常用取值不包括（c）。

A:inline      B.block       C.hidden      D.none

19、标签上的alt与title属性区别是什么？

alt是alternate的简写，当图片不可以显示的时候的替代文本

title是a、img、label等等标签的悬浮提示文本。

20、清除浮动和闭合浮动的不同点？

设置高度的元素叫做闭合浮动。

清除浮动回答清除浮动的5种方法即可。

21、rem为什么可以缩放，以什么为基准？

rem以html的字号为基准，比如2rem，而html的字号是16px，此时2rem就是32px。写一段JS让html根元素的字号随着浏览器宽度的变化而等比例变化，此时造成页面等比例缩放的现象。

22、下面哪一个标签可以产生一个回车换行（b）
 

A.

---

     B.
     C.     D.

23、下面哪一个是&的符号码（B）
 

A."       B.&     C.&comp       D. 

24、font-size：62.5%，解释一下如此设计字体大小的原因？

因为默认情况下html标签的默认字号是16px，此时如果取默认，那么1em就是16px，此时fotn-size:62.5%; 此时就能将HTML这个根元素的字号变为10px。此时页面上所有元素的尺寸就方便计算了。但是62.5%逐步退出了历史舞台，因为Chrome30版本不支持12px以下的字号了。

25、  前端工程师html

  
以上代码中不合理的部分有哪些？

首先如果要空格，应该使用css中的text-indent:2em; 并且如果要换行，应该使用语义标签ｐ。非要用ｂｒ，也要写
，而不是标签对儿。

26、常见的网页图像格式有（C）
A.gif，tiff           B.tiff，jpg                  C.gif，jpg                  D.tiff，png

27、的意思是（A）？
A.图像对于周围的文本左对齐
B.图像对于周围的文本右对齐
C.图像对于周围的文本底部对齐
D.图像对于周围的文本顶部对齐

28、Form中的input可以设置readonly和disable，请问这两项属性有什么区别？

readonly表示只读，  不能更改元素内容。仅仅能作用在text/password/textarea上面。

disabled表示不可用，能作用在所有控件上面，比如select、radio、checkbox。

29、列举CSS中position的参数和作用？

四种定位：absolute、relative、fixed、static。

展开说三种定位的参考点是什么。

absolute：绝对定位。使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 

relative：相对定位。将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分

fixed：固定定位。生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

30、为什么利用多个域名来存储网站资源会更有效？

1. CDN，表示让用户从离自己最近的下载点下载资源。
2. 突破服务器的带宽限制。
3. 节约主域名的连接数，提升并发
4. 更加安全，比如静态资源服务器上面，不能运行任何代码的。

31、定义一个div，在IE8下高度为100px，在IE7下为120px，在IE6下为140px。

height:120px;

-height:140px;

height:100px\0;

还有HTML的hack：

32、当p的元素设置为bold时，以下哪条CSS语句的说法是正确的（D）
                                    

A.

              B.

C.p{text-size:bold;}                   D.p{font-weight:bold;}

33、网页设计采用div+css有什么好处？

语义清晰，DIV负责结构，CSS负责样式。便于更改，缩减页面代码，对SEO有利。便于改版，便于控制和排班布局。表现和内容相分离。

34、介绍盒子模型，说说标准盒子模型和IE盒子模型有什么区别，以及触发不同模型的条件？

标准盒子模型padding、margin外扩

IE盒子模型是padding、marign内减。如同写上了box-sizing:border-box; width=content+padding+border

要加上标准DTD，可以让IE使用标准盒子模型。去掉DTD此时浏览器叫做Quirk(怪异模式)。

 

35、CSS哪些属性可以继承？

text-开头的、line-开头的、font-开头的、color、cursor。

不能继承的是一切盒模型属性。

36、标签的定义与用法，你常用的DOCTYPE是什么？

用在html标签之前，定义是HTML什么版本和XHTML什么版本。

我常用是html5的声明头。

Strict版本不能使用b、u、i

transitional版本可以使用b、u、i，所以HTML4中我经常使用这个。

37、介绍你所知道的CSS hack技巧。

hack就是浏览器留的后门，方便对这一个版本的浏览器单独定义样式，

_ 和 - 针对IE6，*width、+width用于IE7及以下。

color:red\0; 是IE8、9、10的hack。

color:red\9\0：是IE9、10的hask

还有HTML中：

38、请用div+css简单写出一段“返回顶部”的悬浮效果。

name="top">

...

...

..

    #top">

 

样式:

.top{position:fixed;right:20px;bottom:20px;width:100px;height:100px;}

39、内联和important哪个优先级高？

  

还有样式表：

p{color:blue !important;}

important优先级高。如果属性是通过继承影响的，此时!important无效。

40、请解释一下CSS的优先级，并说明优先级如何计算？

当多个选择器定义了同一个属性为不同值，根据优先级来确定以谁为准。

id最大，类第二，标签名第三。数个数即可。比如：

#box ul li.spec  权重就是（1,1,2）

#box ul li权重就是（1,0,2）

如果是继承，权重是0。如果都是继承，有“就近原则”。

41、如何解决IE6下select优先级高于div而导致的无法遮盖问题？

再写一个div，用此div盖住select。当select应该出现的时候，此时让div盖住它。

42、定位的值有哪几种？区别是什么？

absolute：绝对定位。使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 

relative：相对定位。将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分

fixed：固定定位。生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

43、在HTML页面中，position的默认值是什么？

static。

44、一个宽度不确定的div里面放三个水平对齐的div，左右2个div宽度固定为150px，中间那个div充满剩余的宽度。

就是固比固的思路，两个固定的元素绝对定位，中间的元素标准流中。此时利用绝对定位无视父盒子的padding，此时给父盒子加padding，错开左右两边的宽度即可。

        

45、IE如何让超出宽度的文字显示为省略号？

 

p{

    width: 50px;  /*必须设置宽度*/

    overflow: hidden;  /*溢出隐藏*/

    text-overflow: ellipsis; /*以省略号...显示*/

white-space: nowrap;  /*强制不换行*/

}

46、首行缩进2个字符的CSS代码是什么？

text-indent:2em;

47、为什么在firefox下文本无法撑开容器的高度？

如果我们一个盒子写了height那么此时文本无法撑开盒子高度，请使用min-height。

48、写一段CSS代码，让Chrome支持小于12px的文字。

font-size:12px; -webkit-transform:scale(0.8);

49、下面哪一个属性可以在新窗口打开一个链接（B）
 

A. _parent    B. _blank     C. _self      D. _top

50、谈谈对CSS Sprites技术优缺点的理解。

CSS精灵技术，优点就是减少HTTP的请求数量，加快网页渲染速度。便于一整套更换，比如圣诞节了，此时可以改变CSS中的各种按钮、logo变成圣诞风格，一下子全变了。

缺点就是不能随意改变之前已经在精灵上面的图片的位置，做repeat-x、repeat-y精灵难以实现。

 

51、CSS的伪类有哪些？有什么作用？在各个浏览器下都兼容吗？

:hover、:visited、:link、:active。

link没有点击的

visited：点击过的

hover悬停的

active是按下那一瞬间。

都兼容，但是要按照“爱恨准则”link、visited、hover、active放置。

52、以下链接到电子邮件的正确格式是：（B）

 

A.邮箱
B.邮箱
C.邮箱
D.邮箱

Email

53、怎样解决超链接访问过后hover样式不出现的问题？
要按照“爱恨准则”link、visited、hover、active放置。

54、请列举IE6的一些Bug的解决办法。

双倍margin：浮动的方向设置的和marign方便不相同即可。

有链接的图片的边框：img{border:none}即可。

3px bug ：给容器设置display:inline-block即可。

overflow:hidden失效，用zoom:1;来解决。

55、一个网页制作完成后，在发布之前，我们会对页面进行测试，测试内容主要包括哪几个方面？

兼容性、js特效的bug、流畅度、加载速度的测试。

56、在网页设计与制作时，为了使制作出来的网页下载速度快、布局合理、浏览方便、和谐悦目，应注意哪些问题？

1. 网页文件大小
2. 页面布局
3. 页面导航
4. 图像大小
5. 颜色搭配
6. 背景图像

57、IE6下为什么无法定义1px左右高度的容器？

加上伴生属性 ：   _font-size:0;
 

58、写出5条Firefox和IE的脚本兼容问题？

绑定监听：IE是attatchEvent()  、 firefox是addEventListener();

计算样式：IE是computedStyle、 firefox是getComputedSyle();

滚动事件：IE是MouseWheel、 firefox是onmousewheel

表单元素：IE是 document.forms(”formname”) ， firefox是document.forms["formname"]

事件对象： IE是window.event属性， firefox必须给事件处理函数注入实参event