html和css的期末考试填空题,前端面试题之HTML和CSS部分题目以及答案

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

浏览器内核

IE：trident内核

FireFox：gecko内核

Safari：webkit内核

Opera：blink内核

Chrome：blink内核

Doctype的含义

!DOCTYPE声明位于文档最前面的位置，在html标签之前，可以告知浏览器要使用哪种文档规范，然后浏览器便用何种规范去解析此页面。

div+css布局比较table布局有什么优点？改版方便，只需要修改css文档

页面加载速度快，结构化明显，结构简洁

表现与结构分离

利于优化seo搜索引擎，排名靠前

img的alt与title有何异同，strong与em的异同

alt是指当img不能显示的情况下，替换的文字内容

title为该图片的名字，信息

strong粗体，加粗，强调

em为斜体

渐进增强和优雅降级

渐进增强：针对低版本浏览器进行页面的构件，保证其最基本的功能，然后再对高级的浏览器进行一些效果交互等方面的改进从而达到更好的用户体验。

优雅降级：一开始就进行完整功能的构件，然后在针对低版本浏览器进行兼容。

为什么利用多个域名存储网站更有效CDN缓存缓存更加方便

突破浏览器并发限制

节约cookie带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

cookie，sessionStorage和localStorage的区别

sessionStorage中的数据只能够在一个页面中访问，并且当页面关闭缓存也随之销毁，因此它不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage是用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期

cookie大小受限，每次请求新的页面cookie都会被发送，浪费带宽，cookie还要指定作用域，不可跨域。

一次js请求一般情况下有哪些地方会有缓存处理

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

一个网页中大量图片，加载慢，如何优化？图片懒加载：也就是当这个图片出现在视图区域的时候再进行加载

如果为幻灯片等，就将此刻展示图片的前一张和后一张优先加载

如果为css图片，可以使用雪碧图，svg，icon，base64等技术

图片过大，可以先进行缩略图的加载

html的语义化去掉或者样式丢失的时候能够让页面展示出清晰的结构

利于搜索引擎的优化，利于爬虫，能够更好的引流

便于团队的开发和维护，让开发人员能够更轻易的看懂你的结构

哪些方式可以对DOM设置CSS样式外部样式表，引入一个css文档

内部样式表，放在head标签下的style标签下

内联样式，将css样式直接定义在html元素内部

css选择器派生选择器

ID选择器

类选择器

属性选择器

后代选择器

群组

等等……

优先级，1，10，100

隐藏可视范围内DOM元素display:none

visibility:hidden

宽高为0，透明度0，z-index为-1000

超链接设置属性顺序

link visited hover active

css Hack

针对不同浏览器写不同的css code的过程就是css hack

行内元素和块级元素

块级元素：独占一行，宽高内边距外边距都可控制

1

-

内敛元素：同一行，padding和margin的left以及right是可以设置的

1

如何垂直居中一个元素父级元素相对定位，居中元素绝对定位，设置50%top以及left，然后margin-top和left负的居中元素本身

注意是否宽高已知，不知道的话用 transform: translateY(-50%);即可

sass、less是什么，大家为什么要使用他们

css的预处理器，一种特殊的语法编译css

例如less动态样式语言，赋予动态语言特性，变量，继承，运算，函数等。方便使用，减少不必要的机械劳动，实现多重继承。

盒子模型

IE盒子：width+margin

普通盒子模型：width+padding+border+margin

不断更新中……欢迎留言补充！