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

浏览器：IE，Chrome，FireFox，Safari，Opera。

内核：Trident，Gecko，Presto，Webkit。

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

  • 行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
    块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
  • 兼容性：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常用的属性有哪些？分别有什么作用？

box-sizing: content-box|border-box|inherit;

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

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

<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和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;

<!--[if
lt IE 9]>

<script>
src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

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

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

常见的CSS和HTML面试题的更多相关文章

  1. 一线互联网企业常见的14个Java面试题，Java面试题集大全等你拿，颤抖吧程序员！

    本文由尚学堂学员们根据自己参加过的面试回忆.总结而成,一线互联网企业常见的14个Java面试题,包括各大互联网企业.创业小公司,互联网企业.传统软件公司.对于刚毕业和想要跳槽的宝宝们,再适用不过啦,赶 ...

  2. 常见的CSS Hack

    原文地址: 小昱博客 - 常见的CSS Hack 转载请注明出处,谢谢! 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera ...

  3. 39条常见的Linux系统简单面试题

    39条常见的Linux系统简单面试题 本文主要分享39条常见的Linux系统简单面试题,其中包括如何看当前Linux系统有几颗物理CPU和每颗CPU的核数.如何实时查看网卡流量为多少等等,希望对你有所 ...

  4. 常见的CSS样式

    常见的css样式 color 文字颜色 background-color 背景颜色 opacity 设置透明度 颜色: 光的三原色: 红 绿 蓝 三种颜色表示法: 名词表示法: red green b ...

  5. 记录近期面试题，面试总结 (从css - vue 全面面试题)

    记录近期换工作时遇到的面试题和面试题答案 css 部分 盒模型 问题:说一下 css 的盒模型 盒模型分为标准模型和怪异盒模型(IE 盒模型) 标准盒模型:盒模型的宽高只是内容(content)的宽高 ...

  6. css学习（2）-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

  7. 关于IE6的一些常见的CSS BUG处理

    CSS BUG:样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS BUG: CSS Hack:css hack是指一种兼容css 在不同浏览器中正确显示的技巧方 ...

  8. css页面重构面试题

    偶然间又看到博客园中这两道页面重构面试题.题一:分别用2个DIV,3个DIV,5个DIV实现水平垂直均居中显示一个宽50px,高200px的正十字架.思路:水平垂直均居中的实现,当然非absolute ...

  9. 常见div+css网页布局（float,absolute）

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

随机推荐

  1. Python:笔记(1)——基础语法

    Python:笔记(1)——基础语法 我很抱歉有半年没有在博客园写过笔记了,客观因素有一些,但主观原因居多,再多的谴责和批判也都于事无补,我们能做的就是重振旗鼓,继续出发! ——写在Python之前 ...

  2. 【LeetCode】【动态规划】Generate Parentheses（括号匹配问题）

    描述 Given n pairs of parentheses, write a function to generate all combinations of well-formed parent ...

  3. winform窗体取消最大化双击标题最大化

    实现目标,固定窗体大小,1.窗体标题去掉最大化按钮2.双击窗体标题也不会最大化,彻底取消最大化 问题,如果设置窗体MaximizeBox和MinimumSize属性,看似问题解决了,单随之而来的问题是 ...

  4. HDU 3954 Level up（多颗线段树+lazy操作）

    又是一开始觉得的水题,结果GG了好久的东西... 题意是给你n个英雄,每个英雄开始为1级经验为0,最多可以升到k级并且经验一直叠加,每一级都有一个经验值上限,达到就升级.接着给你两种操作:W li r ...

  5. Ubuntu忘记用户密码解决方法--Authentication token manipulation error

    1.重启系统,按住shift键进入grub菜单: 2.选择recovery mode恢复模式: 3.在recovery menu中选择root drop to root shell prompt: 4 ...

  6. Hive- Hive 的基本操作

    创建数据库 create database db_hive; use db_hive; create database if not exists db_hive_02; create databas ...

  7. python循环切片

    x = [0,99, 'a', 1, 2, 'b',5, 3, 0,'a' ,1, 8, 5,'b',5,9,5] b=[] c=[] d=[] for i in range(len(x)): if ...

  8. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  9. Linux课程---4、Linux目录结构及常用命令（目录结构）

    Linux课程---4.Linux目录结构及常用命令(目录结构) 一.总结 一句话总结: 家目录:./root:root用户的家目录 能执行的程序:./bin:所有用户都能执行的程序:./sbin:只 ...

  10. .net Core 相关问题

    1.Vs中注释生成xml文档文件 项目->属性->生成->输出->勾选“XML文档文件”->保存  就完成. 保存后出现没有勾选情况,直接用txt打开.csproj文件加 ...