又到了毕业季，很多小伙伴们都到了找工作的时候了，好多小伙伴问我有前端的面试题么？答：没有。 呃呃… …

小伙伴本宝宝真的没有骗你们，我从毕业到现在一直在一家公司没有换过，所以手里压根没有面试题。我们公司招聘也压根不需要什么面试题。因为那些都是可以百度的哈哈。 但是大部分公司还是有面试题的，所以征求大家意见后总结一下关于前端的面试题。今天我们分享关于Html和CSS部分的。

1. 常用那几种浏览器测试？有哪些内核(Layout Engine)?

  • (Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。
  • (Q2)内核：Trident，Gecko，Presto，Webkit。

2. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

  • (Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
    块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
  • (Q2)兼容性：display:inline-block;*display:inline;*zoom:1;

3.清除浮动有哪些方式？比较好的方式是哪一种？

  • （1）父级div定义height。
  • （2）结尾处加空div标签clear:both。
  • （3）父级div定义伪类:after和zoom。
  • （4）父级div定义overflow:hidden。
  • （5）父级div定义overflow:auto。
  • （6）父级div也浮动，需要定义宽度。
  • （7）父级div定义display:table。
  • （8）结尾处加br标签clear:both。

4.box-sizing常用的属性有哪些？分别有什么作用？

  • (Q1)box-sizing: content-box|border-box|inherit;
  • (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
    border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5.Doctype作用？标准模式与兼容模式各有什么区别?

  • (Q1)<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
  • (Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

6.HTML5 为什么只需要写 <!DOCTYPE HTML>？

  • HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
  • 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

7.页面导入样式时，使用link和@import有什么区别？

  • （1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
  • （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
  • （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

8.介绍一下你对浏览器内核的理解？

  • 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
  • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
  • JS引擎则：解析和执行javascript来实现网页的动态效果。
  • 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

9.html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

  • (1)绘画 canvas;
  • (2)用于媒介回放的 video 和 audio 元素;
  • (3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
  • (4)sessionStorage 的数据在浏览器关闭后自动删除;
  • (5)语意化更好的内容元素，比如 article、footer、header、nav、section;
  • (6)表单控件，calendar、date、time、email、url、search;
  • (7)新的技术webworker, websocket, Geolocation;

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim;

  1. <!--[if lt IE 9]>
  2. <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  3. <![endif]-->

10.简述一下你对HTML语义化的理解？

  • 用正确的标签做正确的事情。
  • html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
  • 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
  • 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

关于html和css的总结到这里。有错误的地方还清大家指出来。大家在面试的时候遇到什么问题可以给我留言我们一起解决整理下来！

前端面试题之Html和CSS的更多相关文章

  1. 2019届校招前端面试题整理——HTML、CSS篇

    前言 2019届校招陆陆续续开始了,整理了一些高频的面试题. HTML部分 1. 什么是<!DOCTYPE>? DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行.来 ...

  2. 总结一下前端面试题之Html和CSS

    总结一下关于前端的面试题,今天我们分享关于Html和CSS部分的 面试 (1) 1. 常用那几种浏览器测试?有哪些内核(Layout Engine)? 2. 说下行内元素和块级元素的区别?行内块元素的 ...

  3. 前端面试题（HTML、CSS部分）

    HTML.CSS部分: 一.html5有哪些新特性.移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?   新特性: HTML5 现在已经不是 SGML 的 ...

  4. 前端面试题 之 JavaScript

    昨天我们一起分享了关于html和css的面试题<前端面试题之Html和CSS>,今天我们来分享关于javascript有关的面试题.我面试的时候最害怕面试官问我js了,因为我真心不擅长这个 ...

  5. 常见前端面试题之HTML/CSS部分

    转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...

  6. 2010年腾讯前端面试题学习（jquery,html,css部分）

    看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:) 原文地址:https://segmentfau ...

  7. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

  8. 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

    好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...

  9. 前端面试题总结（二）CSS篇

    前端面试题总结(二)CSS篇 一.link和@import的区别? link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件. link会在页 ...

随机推荐

  1. Storm入门2-单词计数案例学习

     [本篇文章主要是通过一个单词计数的案例学习,来加深对storm的基本概念的理解以及基本的开发流程和如何提交并运行一个拓扑] 单词计数拓扑WordCountTopology实现的基本功能就是不停地读入 ...

  2. DllImport attribute的总结

    C#有没有方法可以直接都用已经存在的功能(比如Windows中的一些功能,C++中已经编写好的一些方法),而不需要重新编写代码? 答案是肯定,就是通过接下来要说的 DllImport . DllImp ...

  3. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  4. highchart导出功能的介绍更改exporting源码

    本案利用highchar作为前端,展示数据的图形效果,结合spring+springmvc来完成数据图片的导出. jsp引入文件: <script src="${pageContext ...

  5. Upload java coed in Ubuntu(在Linux 16上，上传代码)

    指令如下:(按照如下指令顺序执行即可) 1.git status  (注释:可以查看哪些代码改动了) 2.git add .     (注意:不要漏掉add后面的" . ",将本地 ...

  6. ionic入门之色彩、图标、边距和界面组件：列表

    目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...

  7. [OC] Podfile 格式内容

    platform :ios, '8.0' target :'targetName' do pod 'Masonry', '~> 1.0.1' pod 'SDCycleScrollView', ' ...

  8. idea jrebel6 安装，破解

    一.Setting中在线安装JRebel插件,install 二.拷贝下载的jrebel.rar解压后 把里面内容覆盖IDEA插件安装目录中此插件目录之下 下载:http://pan.baidu.co ...

  9. 21.TFS文件系统搭建笔记

    TFS文件系统搭建笔记 参考地址: https://github.com/alibaba/tfs/blob/master/INSTALL.md https://github.com/alibaba/t ...

  10. Ubuntu中配置Thunderbird登录qq邮箱

    1.打开thunderbird 2.开启QQ邮箱pop功能 登录网页版QQ邮箱(email.qq.com) 设置---->>账户---->> 3.配置thunderbird 注 ...