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（缺点：会多加CSS和HTML标签）

（3）在父级元素上加一个class是clearfix定义这个class为 .clearfix:after{content: '';display: block;clear: both;} .clearfix{ /*兼容 IE*/ zoom: 1;}另/* 新浪使用方式 .clearfix:after{ content: '';display: block;clear: both;height: 0;visibility: hidden;}*/

（4）父级div定义overflow:hidden;zoom:1;

（5）父级div也浮动，但需要定义宽度

（6）父级div定义display:table;

（7）父级内的结尾处加br并定义clear:both

（8）父元素处于绝对定位

----------------------------------------------------------------------------------------------------》比较好的是第3种

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引擎越来越独立，内核就倾向于只指渲染引擎。

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

用正确的标签做正确的事情。

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

web前端问题整理的更多相关文章

  1. WEB前端工程师整理的原生JavaScript经典百例

    一.原生JavaScript实现字符串长度截取 二.原生JavaScript获取域名主机 三.原生JavaScript转义html标签 四.原生JavaScript时间日期格式替换 Date.prot ...

  2. web前端素材整理汇总

    最近一直搞前端开发,整理下前端用的一些常用素材,分享给大家 框架类 Vue:https://cn.vuejs.org/ iview:https://www.iviewui.com/ 插件类 Jquer ...

  3. web前端优化整理（转）

    如今浏览器能够实现的特性越来越多,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了. 开发人员普遍会将他们的代码习惯优先于用户体验.但是很多很小的改变可以让用户体验有 ...

  4. 手机移动端web前端常见问题整理

    移动端常见问题及解决方案 一.meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="w ...

  5. web前端笔记整理，从入门到上天，周周更新

    由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客 http://www.cnblogs.com/luxiaoyao/ 一.HTML 1.注释 格式:<!-- 注释内容 --> ...

  6. Web前端（整理不好，自己未学）

    1.公司招聘信息 (1)小公司 (2)腾讯 ①社会招聘 ②校园招聘 (3)百度 ①社会招聘 ②实习 ③校园招聘 2.岗位要求 开发经验,良好的编程习惯,学习能力,至少二个项目开发设计,具备需求功能模块 ...

  7. Web前端笔记整理

    不使用Ajax无刷新提交: header('HTTP/1.1 204 No Content'); var a=document.createElement('img'); a.setAttribute ...

  8. web前端笔记整理一---HTML

    一 HTML标签1 页面及标记 1 HTML 文件结构 拓展名 .html或者.htm <!DOCTYPE html>// 声明 <html> html 主体 <head ...

  9. web前端笔记整理---CSS

    一   Css  文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...

随机推荐

  1. 倾斜摄影数据转cesium 3D tiles工具介绍

    软件操作:http://jingyan.baidu.com/article/3aed632e3912c8701080912c.html 软件测试数据: 数据,油库链接: http://pan.baid ...

  2. 在SpringBoot中使用Junit测试

    一:加入依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactI ...

  3. XRichText

    XRichText是一个可以显示Html富文本的TextView.可以用于显示新闻.商品详情等场景.欢迎star.fork,提出意见. 使用 Gradle : compile 'cn.droidlov ...

  4. 第19届亚太零售商大会 | 奇点云CEO行在受邀出席发表演讲

    2019年9月5日—7日,第19届亚太零售商大会在重庆举行. 亚太零售商大会作为世界三大零售盛会之一,是亚太地区零售行业最具规模.最具影响力的零售行业盛会.本次大会以“新零售·新消费·新动力·合作与共 ...

  5. 奇点云数据中台技术汇(一) | DataSimba——企业级一站式大数据智能服务平台

    在这个“数据即资产”的时代,大数据技术和体量都有了前所未有的进步,若企业能有效使用数据,让数据赚钱,这必将成为企业数字化转型升级的有力武器. 奇点云自研的一站式大数据智能服务平台——DataSimba ...

  6. ccpc20190823

    04 http://acm.hdu.edu.cn/showproblem.php?pid=6705 分析:先把每条边以 形式放进堆,堆按路径权值从小到大排序,然后每次取出堆顶,用v的出边扩展 新的路径 ...

  7. peewee 对 mysql 类型支持问题，并不支持bit

    这个问题是当时想当然了 看到python BooleanField(default=False) 便认为 对应 mysql的bit 出现问题 mysql实际字段存储值为0,但 peewee orm 后 ...

  8. Linux文件属性和权限

     Linux文件属性 第一栏:表示文件类型和权限 文件的类型:  d:目录    -:文件    l:链接文件    b:可存储设备    c:可输入设备 第一组:表示拥有者权限 第二组:表示该组的权 ...

  9. django框架基础-ORM单表操作-长期维护

    ###############    单表操作-添加数据    ################ import os if __name__ == '__main__': os.environ.set ...

  10. MAC上安装maven以及配置Intellij IDEA

    大前提:java环境已经配置好 maven是对于java工程的管理 一.maven安装到mac 1.首先,maven下载地址http://maven.apache.org/download.cgi 点 ...