HTML,CSS面试题

2020年04月07日 16:44 · 阅读 466

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

浏览器
- chrome
- IE
- Opera
- Safari
- FireFox
内核
- Blink
- Trident
- Gecko
- Webkit
- Presto

2 清除浮动有哪些方式？

给父元素添加高度
给父元素添加浮动，不过父元素需要宽度
结尾添加空标签 clear:both
结尾处添加br标签设置clear:both
给父元素定义伪类:after和zoom
给父元素定义overflow:hidden
给父元素定义overflow:auto
给父元素定义display:table

3 html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？

绘画canvas
用于媒介回放的audio和video
语义化更好的内容元素 header footer nav aside section
本地离线存储的locatStorage，只要不手动删除，即使浏览器关闭也不会删除数据
sessionStorage的数据在浏览器关闭后会自动删除
表单控件 data time email urll search

IE8/IE7/IE6支持使用document.createElement()产生的标签

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

HTML语义化是使用正确的标签做正确的事情

它的好处有:

利于SEO搜索搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重
开发人员看源代码的时候更加方便的理解内容结构，方便后期维护，
在没有css样式的情况下，也以中文档格式显示，并且容易阅读
内容结构清晰,便于对浏览器，搜索引擎解析

5 什么叫优雅降级和渐进增强？**

优雅降级:一开始就构建完整的功能，然后在针对低版本浏览器进行兼容渐进增强:一开始构建所有浏览器支持的基本功能，逐步的添加那些只有新式浏览器才支持的功能，当浏览器支持时，他们会自动的呈现出来并发挥作用

6 display:none和visibility:hidden的区别？

display:none 隐藏对应元素脱离文档流当标签进行隐藏时，在文档布局中不再给它分配口空间，各边的标签会合拢，就当他不存在 visbility:hidden 隐藏对应元素当标签隐藏时，在文档布局中仍保留原来的空间

7 CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？

id选择符
类选择符
标签选择符
相邻选择符
属性选择符
后代选择符
子代选择符
通配符选择符
伪类选择器

8 CSS3有哪些新特性？

border-radius（圆角）
box-shadow（阴影）
text-shadow(文本特效)
gradient (渐变)

9 谈谈你对重构的理解

在不改变外部行为的前提下，简化结构，添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化在扩展的同时保持一致的UI

10 对web标准以及w3c的理解和认识

标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率。使用外链css和js脚本，结构行为表现分类，内容能被更多广泛的设备所访问，更少的代码和组件，容易维护，改版方便，不需要变动页面内容

11 Html和xhtml有什么区别?

XHMLT元素必须正确被嵌套，元素必须关闭，标签必须小写，必须有根元素

12介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

盒子模型是由内容 padding border margin

他们的不同之处在于内容宽的不同

标准的CSS盒子模型:内容宽+padding左右+border左右+margin左右

低版本的盒子模型:内容宽(padding左右+border左右)+margin左右

13 媒体查询怎么使用？

媒体查询可以为不同尺寸不同大小的媒体定义不同的css样式，适合相应的设备显示,也就是响应式布局

@media screen and(min-width:400px)and(max-width:700px){...}
复制代码

14 margin和padding分别适合什么场景使用？

margin 在边框的外面需要空白的时候空白处不需要背景的时候(背景色，背景图片) 两个纵向的盒子中间需要间距是选择最大的那一个，使用Margin padding 在边框里面需要空白的时候空白处需要背景的时候(背景色，背景图片) 两个纵向的盒子中间间距是两个盒子的padding值的时候

15 如何修改chrome记住密码后自动填充表单的黄色背景**

设置chrome关闭自动填充表单功能，设置表单属性autocomplete="off/on"，关闭自动填充表单，自己实现记住密码

16 请写出html5新增的标签，并说明其语义和应用场景

header 标签设置页面或章节的头部
footer 标签设置页面或章节的尾部
aside 标签设置和页面内容关联不大的内容
nav 标签设置用于链接导航的部分
section 定义文档中的一个节

17 描述一下 cookies、sessionStorage 和 localStorage的区别

cookie是由同源HTTP请求携带，在服务端和浏览器之间传递 sessionStorage和localStorage是不会把数据传递到服务端的，只保存在本地存储大小 cookie的存储大小只有4k，多出来的会被截掉 sessionStorage和localStorage的存储大小也有限制，但是比cookies多，有5M

生命期 cookies在过期时间之前，数据都会保存,即使关闭窗口和浏览器 sessionStorage的数据，只要一关闭浏览器就会自动删除数据 localStorage的数据存储时间长，除非手动删除,即使关闭浏览器也不会删除