前端面试秘籍HTML+CSS篇

Posted 2021-04-04 小ke同学

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