前端面试秘籍HTML+CSS篇

Posted 小ke同学

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试秘籍HTML+CSS篇相关的知识,希望对你有一定的参考价值。

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

                      IE                trident 内核
                   Firefox                 gecko 内核
                    Safari                     webkit 内核
                   Opera            以前是 presto 内核,Opera 现已改用 Google Chrome 的 Blink 内核
                  Chrome                Blink(也是基于webKit开发的)

2、简述src与href的区别。

src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。

src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素。

<script src ="js/javascript.js"></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。

所以我们应该将引用的js放在文档结构的底部。另外我们在引用js的时候,最好是将资源包含在自己的项目目录里面。千万不要直接引用第三方资源,尤其是将第三方资源引入在头部。如果资源加载不出来会导致这个页面无响应。

href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

<link href="css/xke.css" rel="stylesheet"/>

那么浏览器会识别该文档为 css 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css,而不是使用@import 方式。

@import url("css/xke.css");  //引入css,非并行获取的。不建议使用

3、知道的网页制作会用到的图片格式有哪些吗?

PNG (包括PNG-8、PNG-24)JPG JPGE BMP GIF   //动态图,其实就是有无数张静态PNG或者JPG合成的,他的每一帧为一张图片SVG EMF WMF  //这些都是矢量图,无限放大而不会失真


PNG:优点(可保存透明背景的图片),缺点(画质中等)
JPG:优点(文件小,利于网络传输),缺点(画质损失)
BMP:优点(无损bai压缩,图质最好),缺du点(文件太大,不利于网络zhi传输)
GIF:优点(动画存储格式),缺bai点(最多256色,画质差)
SVG  矢量图放大不失真

    注意:WMF EMF这个图片格式浏览器是没有办法直接打开预览的。

4、CSS选择器有哪些?

    派生选择器,用html标签声明。

    id 选择器(用 DOM 的 ID 申明)

    类选择器(用一个样式类名申明)

    属性选择器(用 DOM 的属性申明,属于 CSS2,IE6 不支持,不常用。这个不必知道

    后代选择器(利用空格间隔,比如 div .a{ })

    群组选择器(利用逗号间隔,比如 p,div,#a{ })

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。(请参知识点9)

5、CSS  中可以通过哪些属性定义 , 使得一个DOM 元素不显示在浏览器可视范围内?

最基本的:   设置 display 属性为 none,或者设置 visibility 属性为 hidde

企业中经常会被问及到的一个问题。

    请说明display: none与visbility;hidden的区别是什么?

答: (1)display:none是彻底消失,不在文档流中占位;浏览器也不会解析该元素visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;    (2)使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。

6、超链接访问过后hover样式就不出现的问题是什么如何解决?

    答案:被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变CSS属性的

排列顺序: L-V-H-A(link,visited,hover,active)

7、说说display属性有哪些可以做什么?

display:block 行内元素转换为块级元素display:inline 块级元素转换为行内元素display:inline-block 转为内联元素

8、哪些css 属性可以继承

可继承:font-size font-family color, ul li dl dd dt;不可继承:border padding margin width height ;

9、css 优先级算法如何计算?

!important > id > class > 标签
!important 比 内联优先级高* 优先级就近原则,样式定义最近者为准;* 以最后载入的样式为准;

10、text-align:center 和 line-height  有什么区别?

text-align 是水平对齐,line-height 是行间。

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

结构层 Html 表示层 CSS 行为层 js

12、行内元素有哪些? 块级元素有哪些?CSS的盒模型有哪些? 

块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding

13、px和em 的区别

px 和 em 都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em 的值不是固定的,并且 em 会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em

以上是关于前端面试秘籍HTML+CSS篇的主要内容,如果未能解决你的问题,请参考以下文章

285页解析百度阿里腾讯前端面试题,通关秘籍请收好!

前端面试CSS系列——DIV垂直水平居中

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

前端最强面试宝典 - CSS 篇

2021前端面试总结

前端面试题——html/css篇