当前位置: 移动技术网 > IT编程>网页制作>CSS > 分享36道前端html+css的面试题

分享36道前端html+css的面试题

2019年04月30日  | 移动技术网IT编程  | 我要评论
1.    对web标准以及w3c的理解与认识? 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载

1.    对web标准以及w3c的理解与认识?

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

定制这些标准主要是为了提高网页加载速度,便于开发。同时这也是一种商业手法,目的是让制造商重视并重新定位规范,在新的和网络设备中完全地支持那些规范,有利于整个行业的发展。

2.    xhtml和html有什么区别?

html与xhtml是一种语言的不同阶段,有点类似于文言文和白话文之间的关系。在xhtml中标记名称、属性名称必须小写,标记必须严格嵌套,必须封闭。而html是一种基本的web语言,定义为超文本标记语言。

3.    doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

   用于声明文档使用那种规范(html/xhtml)一般为严格过度基于框架的html文档。

加入xml声明可触发,解析方式更改为ie5.5拥有ie5.5的bug。

4.    行内元素有哪些?块级元素有哪些?css的盒模型?

  块级元素:p ph1 h2 h3 h4 form ul

 行内元素:a b br i span input select

css盒模型:内容,border,margin,padding

5.    css引入的方式有哪些? link和@import的区别是?

    内联内嵌外链导入

  区别:同时加载

  前者无兼容性,后者css2.1以下浏览器不支持

link 支持使用javascript改变样式,后者不支持。

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

        标签选择符类选择符 id选择符

    继承不如指定 id>class>标签选择

    后者优先级高

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

    结构层 html(作用:)表示层 css 行为层 js

8.    css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.    你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

    ie(ie内核) 火狐(gecko) 谷歌(webkit) opear(presto)

10. 说出几种ie6bug的解决方法

    1.双边距bug float引起的使用display

2.3像素问题使用float引起的使用dislpay:inline-3px

3.超链接hover点击后失效使用正确的书写顺序link visited hover active

4.iez-index问题给父级添加position:relative

5.png 透明使用js代码改

6.min-height最小高度!important 解决’

7.select 在ie6下遮盖使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器(ie6默认的行高造成的,使用over:hidden,zoom:0.08line-height:1px)

9.ie 6 不支持!important

11. img标签上title与alt属性的区别是什么?

  alt 当图片不显示是用文字代表。

title 为该属性提供信息

12. 描述cssreset的作用和用途。

    reset重置浏览器的css默认属性浏览器的品种不同,样式不同,然后重置,让他们统一

13. 解释csssprites,如何使用,他的优点是什么?

    css 精灵把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量

14. 浏览器标准模式和怪异模式之间的区别是什么?

    盒子模型渲染模式的不同

  使用window.top.document.compatmode 可显示为什么模式

15. 你如何对网站的文件和资源进行优化?期待的解决方案包括:

    文件合并

  文件最小化/文件压缩

  使用cdn托管

  缓存的使用

16. 什么是语义化的html?

       直观的认识标签对于搜索引擎的抓取有好处

17. 清除浮动的几种方式,各自的优缺点

    1.使用空标签清除浮动 clear:both(理论上能清楚任何标签,,,增加无意义的标签)

2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容ie)

3.是用afert伪元素清除浮动(用于非ie浏览器)先来简单讲讲after,所谓after,就是指标签的最后一个子元素的后面。于是呢,我们可以用css代码生成一个具有clear属性的元素,其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点,我了很多次,貌似随便写什么东西都没有问题。

18. css hack

    <!--[if ie 6]--><![end if]-->

_marging\\ie 6

+margin\\ie 7

marging:0auto \9 所有ie

margin \0\\ie 8

19. 超链接访问过后hover样式就不出现的问题?

解决方法是改变css属性的排列顺序:l-v-h-a。

例子:<style>

a:link{ background:red;}

a:hover{background:blue;}

a:visited{background:green;}

a:action{background:white;}

</style>

20. ie6的双倍边距bug

给当前元素添加样式,使当前元素不为块,如:display:inline;display:list-item这样在元素浮动的时候就不会在ie6下面产生双倍边距的问题了.

拓展:这个bug是如何出现的?

当块级元素有浮动样式的时候,给元素添加margin-left和margin-right样式,在ie6下就会出现双倍边距。

21. 为什么ff下文本无法撑开容器的高度?

因为标准浏览器中固定高度值的容器是不会象ie6里那样被撑开的。

想固定高度,又想能被撑开需要怎样设置呢?

办法就是去掉height设置min-height:200px;   这里为了照顾不认识min-height的ie6 可以这样定义:

{

height:auto!important;

height:200px;

min-height:200px;

}

22. 为什么web标准中ie无法设置滚动条颜色了?

滚动条的颜色一直以来就只支持ie的浏览器,就是ie浏览器的专有属性,火狐等都是不支持的。

解决办法是将body换成html。

注:原来样式<style type="text/css"> 

body { scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff; } 

</style> 

23. 为什么无法定义1px左右高度的容器?

    ie6下这个问题是因为默认的行高(大概10px)造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px。

24. 怎么样才能让层显示在flash之上呢?

 解决的办法是给flash设置透明。

25. 怎样使一个层垂直居中于浏览器中?

针对于已知大小元素。首先使用百分比的绝对定位,此时只是层的左上角顶点居于浏览器中间,要想使层的中心位于浏览器中间就要使层的左上角顶点向上、向左移动高度、宽度的一半(与外补丁负值的方法,负值的大小为其自身宽度高度除以二)。

例子:

<styletype="text/css">

.center{ background:red;

            width:200px;

            height:300px;

            position:absolute;

            top:50%;

            left:50%;

            margin:-150px 0 0 -100px;}

</style>

</head>

<body>

<p class="center">层垂直居中于浏览器</p>

</body>

26. firefox嵌套p标签的居中问题的解决方法

假定有如下情况:

<p id="a"style="width:200px;border:1px solid red;text-align:center;">

     <p id="b"style="width:30px;">&nbsp;</p>

</p>

如果要实现b在a中居中放置,一般只需用css设置a的text-align属性为center。这样的方法在ie里看起来一切正常;但是在firefox中b却会是居左的。

解决办法就是除了需要在a中设置text-align属性为center之后,还需要设置b的横向margin为auto。例如设置b的css样式为:margin: 0auto;

所以,设置如下就可以实现居中:

<p id="a"style="width:200px;border:1px solid red;text-align:center;">

     <p id="b"style="width:30px;margin:0auto">&nbsp;</p>

</p>

27. 网页制作中有哪几种样式设置方法?各有何特点?

28.  用户自定义的类和id在定义和使用时有什么区别?

定义时,类以英文形式的句点“.”为起始标志,id以“#”为起始标志;使用时,类可以在一个页面中被多个不同的元素引用,而id在一个页面中只能被引用一次。

29. float元素的父元素不能指定clear属性?

如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是macie的著名的bug,倘若不知道就会走弯路。

30. 简述一下src与href的区别。

   href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。src 表示来源地址,在 img、script、iframe 等元素上。

src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。

31. 知道的网页制作会用到的图片格式有哪些?

 主流的用于网页的图像格式有jpg,png,gif等

jpg:压缩率高,文件小,最常用。

png:支持无损压缩,色彩损失小,保真度高,文件稍大。

gif:支持动画显示,但只支持256色显示,目前已经被flash大量取代。

32. 每个html文件里开头都有个很重要的东西,doctype,知道这是干什么的吗?

<!doctype> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型,规范来解析这个文档。

33. 行内元素有哪些?块级元素有哪些?css的盒模型?

行内元素有:ab span img input select strong(强调的语气) 块级元素有:p ul olli dl dt dd h1 h2 h3 h4…p。内容(content)、填充(内边距padding)、边框(border)、边界(外边距margin)。

拓展:知名的空元素:<br><hr><img><input><link><meta>

34. css层叠是什么?介绍一下。

  css是cascading style sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

35. position值都有哪些,css3都有哪些新内容…

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 left 位置添加 20 像素。

static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit规定应该从父元素继承 position 属性的值。

css3属性:

第 1 选择器

第 2 rgba和透明度

第 3 多栏布局

第 4 多背景图

第 5 word wrap

第 6 文字阴影

第 7 @font-face属性

第 8 圆角(边框半径)

第 9 边框图片

第 10 盒阴影

第 11 盒子大小

第 12 媒体查询

第 13 语音

36. 在新窗口打开链接的方法是?

target=_bank

拓展:为什么要清除浮动?

css的float属性,作用就是改变块元素对象的默认显示方式,html标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果,所以需要在样式定义的后面进行清除浮动。

通过指定css属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。css的float属性,作用就是改变块元素对象的默认显示方式,html标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果。float的功能很强大,但是如果没有好好掌握而使用很可能会成为你调试样式的噩梦。 

使用float样式,如果没有清除浮动,那么有浮动元素的父元素容器将无法自动撑开。如果没有清除内部浮动,此时会导致浮动的父元素无法自动撑开到本身应有的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网