CSS面试题

最新推荐文章于 2024-10-02 23:33:51 发布

面相进程，面相对象

最新推荐文章于 2024-10-02 23:33:51 发布

阅读量963

点赞数

分类专栏：前端面试题文章标签： css 前端面试

本文链接：https://blog.csdn.net/weixin_57575133/article/details/131712923

版权

前端面试题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、BFC 是什么？

2、列举 HTML5 移动开发 APP 框架？

3、Style 标签写在 body 后与 body 前有什么区别？

4、如何区分 HTML 和 HTML5？

5、使用 CSS 预处理器的优缺点有哪些？

6、Doctype 作用，H5 为什么只需要写？

7、什么是字体图标？如何避免图片在网页上失真？

8、ifram 有哪些优缺点？

9、什么是 canvas，基本用法是什么？你使用它做个什么需求？

10、使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？

面试题

面试题一：

1、BFC 是什么？

问题解答：

定义

        BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干

布局规则

        1、内部的 Box 会在垂直方向，一个接一个地放置

        2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

        3、每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

        4、BFC 的区域不会与 float box 重叠

        5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

        6、计算 BFC 的高度时，浮动元素也参与计算哪些元素会生成 BFC： 1、根元素 2、float 属性不为 none 3、position 为 absolute 或 fixed 4、display 为 inline-block， table-cell， table-caption， flex， inline-flex 5、overflow 不为 visible

面试题二：

2、列举 HTML5 移动开发 APP 框架？

问题解答：

1、jquery mobile 框架

2、mui 框架

3、ionic 框架

4、Mobile Angular UI 框架

5、Intel XDK 框架

6、Appcelerator Titanium 框架

7、Sencha Touch 框架

8、Kendo UI 框架

9、PhoneGap 框架

面试题三：

3、Style 标签写在 body 后与 body 前有什么区别？

问题解答：

区别

       1、写在 body 标签前利于浏览器逐步渲染： resourcesdownloading->CSSOM+DOM->RenderTree(composite)->Layout->paint

        2、写在 body 标签后：由于浏览器以逐行方式对 html 文档进行解析；当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染；

        在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）；

面试题四：

4、如何区分 HTML 和 HTML5？

问题解答：

一、概念
HTML 即超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。通常说的 HTML 指的是 HTML4.0。HTML5 是 HTML 的第五次重大修改而成的，可以理解为升级版，但里面的内容是非常丰富的
二、区分 HTML 和 HTML5 有很多方法
1. 在文档类型声明上 HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "&nbsp;&nbsp;<html xmlns="HTML5:<!DOCTYPE html>说明：在文档声
明上，HTML 代码很长，而 HTML5 只有简简单单的声明。
2. 在结构语义上 HTML4.0：没有体现结构语义化的标签，通常都是这样来命名的,这样表
示网站的头部。<divid="header"></div>HTML5：在语义上却有很大的优势。提供了一些
新的 HTML5 标签比如:<header> 、<nav>、<article>、<aside>、<footer>..

面试题五：

5、使用 CSS 预处理器的优缺点有哪些？

问题解答：

优点：

用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处

缺点：

简单来说 CSS 预处理器语言较 CSS 玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵

面试题六：

6、Doctype 作用，H5 为什么只需要写？

问题解答：

Doctype 作用声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档原因 1、HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为（让浏览器按照它们应该的方式来运行） 2、HTML4.01 基于 SGML，所以需要对 DTD 进行引用，才能让浏览器知道该文档所使用的文档类型

面试题七：

7、什么是字体图标？如何避免图片在网页上失真？

问题解答：

字体图标

字体图标简单的说，就是一种特殊的字体，通过这种字体，显示给用户的就像一个个图片一样字体图标最大的好处，在于它不会变形和加载速度快。字体图标可以像文字一样，随意通过 CSS 来控制它的大小和颜色，对于建网站来说，非常方便

图片失真

首先查看是否是素材的原因，如果是素材的原因可以找 UI 修改图片。如果是前端代码的问题需要通过容器尺寸去控制

面试题八：

8、ifram 有哪些优缺点？

问题解答：

iframe 的优点：

        1、iframe 能够原封不动的把嵌入的网页展现出来

        2、如果有多个网页引用 iframe，那么只需要修改 iframe 的内容，就可以实现调用每一个页面的更改，方便快捷

        3、网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 嵌套，可以增加代码的可重用

        4、如果遇到加载缓慢的第三方内容，如图标或广告，这些问题可以由 iframe 来解决。         5、iframe 会堵塞主页面的 Onload 事件

        6、iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

iframe 的缺点：

        1、iframe 会阻塞主页面的 Onload 事件；

        2、iframe 和主页面共享链接池，而浏览器对相同城的链接有限制，所以会影响页面的并行加载；

        3、使用 iframe 之前需要考虑这两个缺点，如果需要使用 iframe，最好是通过 JavaScript；

        4、动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题

        5、不利于 seo

        6、代码复杂，无法一下被搜索引擎索引到

        7、iframe 框架页面会增加服务器的 http 请求，对于大型网站不可取。

        8、很多的移动设备无法完全显示框架，设备兼容性差

面试题九：

9、什么是 canvas，基本用法是什么？你使用它做个什么需求？

问题解答：

定义

        canvas 元素是 HTML5 的一部分，允许脚本语言动态渲染位图像。canvas 由一个可绘制地区 HTML 代码中的属性定义决定高度和宽度。JavaScript 代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的 API，从而生成动态的图形

用法

        创建 canvas 标签

        首先我们需要有一个画布（Canvas）
<canvas id="canvas" width="150" height="150"></canvas>
渲染上下文创建画布之后，怎么使用了，需要在 javascript 中获取到画布并渲染上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
代码的第一行通过使用 document.getElementById() 方法来为元素得到 DOM 对象。一旦有了元素对象，你可以通过使用它的 getContext() 方法来访问绘画上下文

如何检查支持性

创建 canvas 标签时可以在标签内写上不支持的信息，如该浏览器不支持 canvas
<canvas id="canvas" width="150" height="150">该浏览器不支持 canvas</canvas>
同时也可以通过检测 getContext()方法是否存在来测试是否支持编程
var canvas = document.getElementById('tutorial');if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 // drawing code here} else {
 // canvas-unsupported code here}
##来看一下最基本的模板
<html>
 <head>
 <title>Canvas tutorial</title>
 <style type="text/css">
 canvas { border: 1px solid black; }
 </style>
 </head>
 <body onload="draw();">
 <canvas id="tutorial" width="150" height="150"></canvas><script 
type="text/javascript">
 function draw(){
 var canvas = document.getElementById('tutorial');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 }
 }
 </script>
 </body>
</html>
canvas 能应对以下需求：

1、游戏：游戏在 HTML5 领域具有举足轻重的地位。HTML5 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，Ohad 认为运用 canvas 制作的图像能够令 HTML5 游戏在流畅度和跨平台方面发挥更大的潜力

2、图表制作：现在一些开发者使用 HTML/CSS 完成图标制作，但完全可以用 canvas 来实现。当然，使用 SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。(例如： echarts.js heightchart.js 都是基于 canvas 来绘图!

面试题十：

10、使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？

问题解答：

作法针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放！
<style>
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
</style>
<p>
<span>豪豪豪 10px</span>
</p>