【前端面试题——CSS篇】

1.从浏览器地址栏输入url到显示页面的步骤

查看浏览器缓存
DNS域名解析
生成http请求报文
Tcp连接
发送http请求
服务器收到请求并返回数据
Tcp断开连接

2.如何进行网站性能优化

内容

减少HTTP请求
减少DNS查询：DNS缓存，将资源分布到恰当数量的主机
减少DOM元素数量
服务器
使用CDN
配置Etag
Gzip压缩
CSS
外部&顶部引入
不使用 CSS 表达式
link 替代 @import
JS
外部&底部引入
减少DOM访问
图片
优化图片
压缩图片
其他
压缩css和js
用浏览器开发工具监控前端页面的性能
预加载
懒加载及延迟加载
避免 404 页面及 favicon
缓存（HTTP , 本地缓存）
首屏性能优化
按需加载
服务器渲染
CSS 动画优化
避免资源的重定向

3.语义化的理解

html语义化就是让页面的内容结构化。
1.在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
2.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
3.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
4.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
5.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化
Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。
包含两个方面：html语义化及css命名语义化。
简单来说就是利于 SEO，便于阅读维护理解。
总结起来就是：
正确的标签做正确的事情
页面内容结构化
无CSS样子时也容易阅读，便于阅读维护和理解
便于浏览器、搜索引擎解析。利于爬虫标记、利于SEO
html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。h1拥有最高的权值，在一个页面中最好指使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是非常的不友好。

4.HTML5的离线储存怎么使用，工作原理能不能解释一下？

原理：HTML5的离线存储是基于一个新建的app cache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

5.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件。
如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件。
如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

6.iframe有那些缺点？

搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe会阻塞主页面的Onload事件
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

7.WEB标准以及W3C标准是什么?

web标准简单来说可以分为结构（HTML）、表现（CSS）和行为（JS）。
W3C对 web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。

网页标准和标准制定机构都是为了能让web发展的更“健康”，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

8.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

严格模式：又称标准模式，是指浏览器按照 W3C标准解析代码
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码
区分
1、如果文档包含严格的 DOCTYPE，那么它一般以严格模式呈现。（严格 DTD——严格模式）
2、包含过渡 DTD和 URI的 DOCTYPE，也以严格模式呈现，但有过渡 DTD而没有 URI（统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI的过渡 DTD——严格模式；没有 URI的过渡 DTD——混杂模式）
3、DOCTYPE不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4、HTML5没有 DTD，因此也就没有严格模式与混杂模式的区别，HTML5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5没有严格和混杂之分）

9.HTML全局属性(global attribute)有哪些

class:为元素设置类标识
data-*: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
id: 元素id，文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息

10.Canvas和SVG有什么区别？

SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较
Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

11.如何在页面上实现一个圆形的可点击区域？

12.网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

13.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

14. CSS选择器有哪些？哪些属性可以继承？

id选择器，比如#header
类选择器，比如.main
类型选择器，比如div
兄弟选择器，比如div + p
子元素选择器，比如div > p
包含选择器，比如div span
通配选择器，比如div *
属性选择器，比如input[type=“text”]
伪类选择器，比如a:hover,ul:nth-child(2n)

15.CSS优先级算法如何计算？

就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为: !important > 内联 > id > class > tag

16.CSS3有哪些新特性？

选择器
2D/3D转换
过渡 transition
渐变 background: linear-gradient(direction,color-stop1,color-stop2, …);
动画 @keyframes, animation
弹性盒子 flex box 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
flex-direction, justify-content, align-items
文字特效 text-shadow, box-shadow，text-overflow: clip / ellipsis, white-space: nowrap;，@font-face
圆角和边框 border-radius, box-shadow, border-image
背景 background-origin/clip:content-box, padding-box,border-box定位，origin 定位区域，clip 绘制裁剪区域
多列布局 column-count:3;
用户界面 resize:both, box-sizing, outline-offset
多媒体查询

17.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。

18.用纯CSS创建一个三角形的原理是什么？

19.常见的兼容性问题？

不同浏览器的标签默认的margin和padding不一样。
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

20.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。