题库-HTML、CSS篇

1、浏览器的内核

IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2、Doctype

<!DOCTYPE> 声明位于文档中的最前面的位置，处于标签之前。
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
重点：告知浏览器该以何种模式来渲染文档
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

3、Quirks 模式和 Standards 模式区别

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度；
在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了；
因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢；
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时；
遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能；
IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式；
这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：

在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，
在 Quirks 模式下，IE的宽度和高度还包含了 padding 和 border。

设置行内元素的高宽：

在 Standards 模式下，给等行内元素设置 wdith 和 height 都不会生效，
在 quirks 模式下，则会生效。

设置百分比的高度：

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用 margin:0 auto 设置水平居中：
使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在quirks模式下却会失效。

4、div+css的布局较table布局的优点

改版的时候更方便，只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

5、img 的 alt 与 title 异同

a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字；
替换文字的语言由 lang 属性指定。在IE浏览器下会在没有 title 时把 alt 当成 tool tip 显示；
title(tool tip):该属性为设置该属性的元素提供建议性的信息。

6、strong 与 em 的异同

strong: 粗体强调标签，强调，表示内容的重要性
em: 斜体强调标签，更强烈强调，表示内容的强调点

7、渐进增强、优雅降级

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给；
渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），如何解决？

8、为什么利用多个域名来存储网站资源会更有效

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

9、对网页标准和标准制定机构重要性

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

10、cookies，sessionStorage 和 localStorage 的区别

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage 和 cookie 的区别

Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的;
Cookie的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽;
cookie 还需要指定作用域，不可以跨域调用;
Web Storage 拥有 setItem, getItem, removeItem, clear等方法，
cookie 需要前端开发者自己封装 setCookie，getCookie。
Cookie 是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在;
Web Storage 仅仅是为了在本地“存储”数据而生。

11、简述一下 src 与 href 的区别

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素，<script src =”js.js”></script>。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href=”common.css” rel=”stylesheet”/>，那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式。

12、网页制作会用到的图片格式

png-8，png-24，jpeg，gif，svg。

Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。
图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。
Facebook Ebay 等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

13、什么是微格式及其在前端构建中微格式的考虑

微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。
是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。
应用范例：豆瓣

14、在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理

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

15、加载海量图片

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

16、HTML结构的语义化　

去掉或样式丢失的时候能让页面呈现清晰的结构.

html本身是没有表现的，我们看到例如<h1>是粗体，字体大小 2em，加粗；
<strong>是加粗的，不要认为这是 html 的表现，这些其实 html 默认的 css 样式在起作用.
所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点.
但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达 html 的语义.
可以说浏览器的默认样式和语义化的 HTML 结构是不可分割的.
屏幕阅读器（如果访客有视障）会完全根据标记来“读”你的网页.
例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.
PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.

理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.
语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.
例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.
无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.
没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.
你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
如果页面文件的标题被标记,那么这个页面在搜索结果的位置可能会比较靠后.

除了提升易用性外,语义标记有利于正确使用CSS和JavaScript.

因为其本身提供了许多“钩钩”来应用页面的样式与行为.
SEO主要还是靠你网站的内容和外部链接的。

便于团队开发和维护

W3C 给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

16、以前端角度出发做好SEO需要考虑什么

了解搜索引擎如何抓取网页和如何索引网页

你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

Meta标签优化

主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。
还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

如何选取关键词并在网页中放置关键词

搜索就得用关键词。
- 关键词分析和选择是SEO最重要的工作之一。
首先要给网站确定主关键词（一般在5个上下）
- 针对这些关键词进行优化
  - 关键词密度（Density）
  - 相关度（Relavancy）
  - 突出性（Prominency）等

了解主要的搜索引擎

虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。
比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。
不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。
还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

主要的互联网目录

Open Directory自身不是搜索引擎，而是一个大型的网站目录，
他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；
搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

按点击付费的搜索引擎

搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。
最典型的有 Overture 和百度，当然也包括 Google 的广告项目 Google Adwords。
越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，用最少的广告投入获得最多的点击。

搜索引擎登录

网站做完了以后，要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。
如果是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如 Yahoo 要299美元）
但是好消息是（至少到目前为止）最大的搜索引擎 Google 目前还是免费，
而且它主宰着 60％以上的搜索市场。

链接交换和链接广泛度（Link Popularity）

网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此
除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）
其它网站到你的网站的链接越多，你也就会获得更多的访问量
更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名

合理的标签使用

17、有哪些方式可以对一个 DOM 设置它的 CSS 样式？　

外部样式表，引入一个外部css文件
内部样式表，将css代码放在标签内部
内联样式，将css样式直接定义在 HTML 元素内部

18、CSS 选择器

派生选择器/标签选择器（用 HTML 标签申明, div, h1, p）
id选择器（用 DOM 的 ID 申明, #myid）
类选择器（用一个样式类名申明, .myclassname）
属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）
除了前3种基本选择器，还有一些扩展选择器，包括
后代选择器（利用空格间隔，比如div .a{}）
群组选择器（利用逗号间隔，比如p,div,#a{}）
相邻选择器（h1 + p）
子选择器（ul > li）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a: hover, li: nth - child）

CSS3 新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

可继承： font-size font-family color, UL LI DL DD DT;
不可继承：border padding margin width height ;
优先级就近原则，样式定义最近者为准; 载入样式以最后载入的定位为准;

CSS选择器的优先级是怎么样定义的? !important > id > class > tag

important 比内联优先级高。

基本原则：一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

复杂的计算方法：

用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1

#xxx li 优先级 100 +1

那么问题来了，看下列代码，

标签内的文字是什么颜色的？

<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>

red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p class='classB classA'>中的先后关系无关。

19、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

最基本的：设置 display 属性为 none ，或者设置 visibility 属性为 hidden
技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在 -1000em

20、超链接访问过后 hover 就样式不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有 hover 和 active 了；

解决方法是改变CSS属性的排列顺序: L-V-H-A（link, visited, hover, active）

21. 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

示例如下：

 #test{   
      width:300px;   
      height:300px;   
      background-color:blue;      /*firefox*/
      background-color:red\9;      /*all ie*/
      background-color:yellow;    /*ie8*/
      +background-color:pink;        /*ie7*/
      _background-color:orange;       /*ie6*/    }  
      :root #test { background-color:purple\9; }  /*ie9*/
@media all and (min-width:0px)
     { #test {background-color:black;} }  /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} }       /*chrome and safari*/

22、行内元素和块级元素区别，行内元素的 padding 和 margin 可设置吗？

块级元素：div p h1 h2 h3 h4 form ul ol li dl dt dd
行内元素: a b br i span input select
知名的空元素：br img input link meta
鲜为人知的是：area base col command embed keygen param source track wbr

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom) 和外边距的 top/bottom(margin-top/margin-bottom) 都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。

那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

<input> 、<img> 、<button> 、<texterea> 、<label>

内联元素(inline element)

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
big – 大字体
br – 换行
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
label – 表格标签
s – 中划线(不推荐)
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量

块级元素

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是css layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容）
noscript – ）可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 排序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

23、外边距重叠、重叠的结果

外边距重叠就是 margin-collapse。在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

24、rgba() 和 opacity 的透明效果的不同

rgba() 和 opacity 都能实现透明效果
最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度；
rgba() 只作用于元素的颜色或其背景色。
设置 rgba 透明的元素的子元素不会继承透明效果。

25、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing

关于 letter-spacing 的巧妙使用：

可以用于消除inline-block元素间的换行符空格间隙问题。

如何垂直居中一个浮动元素

方法一：已知元素的高宽

#div1{
    background-color: #6699FF;
    width: 200px;
    height: 200px;
    position: absolute; /* 父元素需要相对定位 */
    top: 50%;
    left: 50%;
    margin-top: -100px ; /* 二分之一的height，width */
    margin-left: -100px;
    }

//方法二:未知元素的高宽

#div1{
  background-color: #6699FF;
  margin:auto;
  position: absolute; /* 父元素需要相对定位 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  }

如何垂直居中一个<img>用更简便的方法。

#container /* <img>的容器设置如下 */
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

27、px 和 em 的区别

px 和 em 都是长度单位。

区别是：

px 的值是固定的，指定是多少就是多少，计算比较容易。
em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px 。
所以未经调整的浏览器都符合: 1em = 16px。那么 12px = 0.75em, 10px = 0.625em。

一个 `reset` 的 CSS 文件如何使用。normalize.css 是什么，有什么不同

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它们。
原因是不同的浏览器对一些元素有不同的默认样式，如果不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。
既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。
在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。

Sass、LESS

是 CSS 预处理器，是 CSS 上的一种抽象层，是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性：
如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为什么要使用它们？

结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。
LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

30、display:none 与visibility:hidden 的区别

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。

使用 display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将”丢失”;
使用 visibility: hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），它所占据的空间位置仍然存在。

31、CSS 中 link 和 @import 的区别

Link 属于 html 标签，而 @import 是 CSS 中提供的
在页面加载的时候，link 会同时被加载，而 @import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于 @import 的引用（ @import 是将引用的样式导入到当前的页面中）
@import 导入的样式不能使用 js 修改

32、盒模型

CSS盒模型有两种：IE盒模型、标准的 W3C 盒模型模型

盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

33、初始化样式的原因

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异但是初始化 CSS 会对搜索引擎优化造成小影响。

34、BFC 块级格式化上下文

BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。
在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题；

35、html语义化

当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于 seo 优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
便于项目的开发及维护，使 html 代码更具有可读性，便于其他设备解析。

36、严格模式与混杂模式的区别？

严格模式下：
- 页面排版及 JS 解析是以该浏览器支持的最高标准来执行
混杂模式：
- 不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容
- 页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

37、IE 的双边距 BUG

出现条件：IE6、块级元素、float、横向margin，
出现问题：e6 显示的横向的 margin 放大两倍。
解决办法：加入_display：inline

38. HTML 与 XHTML 区别

所有的标记都必须要有一个相应的结束标记
所有标签的元素和属性的名字都必须使用小写
所有的 XML 标记都必须合理嵌套
所有的属性必须用引号 “” 括起来
把所有 < 和 & 特殊符号用编码表示
给所有属性赋一个值
不要在注释内容中使用 “–”
图片必须有说明文字

39、html常见兼容性问题

IE6.7 下的双边距 BUG 块级元素浮动有 margin 值引起的。使用 display: inline 解决
标准浏览器下，子元素不会撑开父级元素设置好的宽度，在 IE6 下会撑开。解决办法：计算精准
IE6.7 下元素浮动如果宽度需要内容撑开，就给里面块的元素都加浮动
IE6.7 下元素通过浮动并在一行，就给两个元素都加浮动，不要给第二个元素加 margin-left
最小高度问题，小于 19px 当做 19px 处理。解决方法：overflow: hidden
IE6 下 1px 的点线不支持。解决方法：切背景图平铺
IE6.7 下，li 本身没有浮动，但内容有浮动，li 下面就会产生间隙。解决办法：给父级元素加宽度并清浮动，li 加 vertical: top;
IE6.7 下最小高度问题和 li 下间隙问题并存时给 li 加浮动，加宽度，加 overflow: hidden;
IE6.7 下的文字溢出 bug，子元素宽度和父级元素宽度相差小于3像素，在两个浮动元素之间有注释或者内嵌元素时。解决：用<div></div> 包起来
IE6.7 下当浮动元素和绝对定位元素是并列关系，绝对定位元素会消失。解决：在定位元素外套 <div></div>
3像素问题使用float引起的使用dislpay:inline -3px
超链接 hover 点击后失效使用正确的书写顺序 link visited hover active
Ie z-index问题给父级添加 position:relative
Png 透明使用js代码改
Min-height 最小高度！Important 解决
select 在ie6下遮盖使用 iframe 嵌套
为什么没有办法定义 1px 左右的宽度容器（IE6默认的行高造成的，使用 over:hidden, zoom:0.08 line-height:1px）
IE5-8不支持 opacity，解决办法：

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

png24为的图片在iE6浏览器上出现背景，解决方案是做成 PNG8.

浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *{margin:0;padding:0;} 来统一。_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb{
   background-color:#f1ee18;/*所有识别*/
  .background-color:#00deff\9; /*IE6、7、8识别*/
  +background-color:#a200ff;/*IE6、7识别*/
  _background-color:#1e0bd1;/*IE6识别*/
}

IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute() 获取自定义属性;
Firefox下,只能使用 getAttribute() 获取自定义属性. 解决方法: 统一通过 etAttribute() 获取自定义属性.
IE下,even 对象有 x, y 属性,但是没有 pageX, pageY 属性;
Firefox下, event 对象有 pageX, pageY 属性,但是没有 x, y 属性.
（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

40、对 WEB 标准以及 W3C 的理解与认识

标签闭合
标签小写
不乱嵌套
提高搜索机器人搜索几率
使用外链css和js脚本
结构行为表现的分离
文件下载与页面速度更快
内容能被更多的用户所访问
内容能被更广泛的设备所访问
更少的代码和组件
容易维护
改版方便
不需要变动页面内容
提供打印版本而不需要复制内容
提高网站易用性

41、前端页面有构成

结构层
- Html
表示层
- CSS
行为层
- js

42、如何居中 div, 如何居中一个浮动元素

给 div 设置一个宽度，然后添加 margin:0 auto 属性

div{
  width:200px;
  margin:0 auto;
}

居中一个浮动元素
确定容器的宽高宽 500 高 300 的层, 设置层的外边距

.div { 
   width:500px ; height:300px; /* 高度可以不设 */
   margin: -150px 0 0 -250px;
   position:relative; /*相对定位*/
   background-color:pink; /*方便看效果*/
   left:50%;
   top:50%;
 }

43、display的值和作用、position的值

block 像块级元素一样显示

none 缺省值
inline-block
- 像行内元素一样显示，但其内容像块类型元素一样显示
list-item
- 像块类型元素一样显示，并添加样式列表标记。

position的值

absolute
- 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed （老IE不支持）
- 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
- 生成相对定位的元素，相对于其正常位置进行定位。
static
- 默认值。没有定位，元素出现在正常的流中
- 忽略 top, bottom, left, right z-index 声明
inherit
- 规定从父元素继承 position 属性的值。

44、absolute 的 containing block 计算方式跟正常流有什么不同

lock-level boxes
- 一个 block-level element (‘display’ 属性值为 ‘block’, ‘list-item’ 或是 ‘table’)
- 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中。
block formatting context
- 在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列
- 水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)
containing block
+一般来说，盒子本身就为其子孙建立了 containing block，用来计算内部盒子的位置、大小
- 对内部的盒子，具体采用哪个 containing block 来计算，需要分情况来讨论：
  - 若此元素为 inline 元素，
  - 则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
  - 否则则由这个祖先元素的 padding box 构成。
  - 根元素所在的 containing block 被称为 initial containing block，在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形；
  - 对于 position 为 static 或 relative 的元素，其 containing block 为祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的区域)；
  - 对于 position:fixed 的元素，其 containing block 由 viewport 建立；
  - 对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position 属性非 static 的元素，然后判断：
  - 如果都找不到，则为 initial containing block。

45、b 标签和 strong 标签, i 标签和 em 标签的区别

后者有语义，前者则无

1、浏览器的内核

2、Doctype

3、Quirks 模式和 Standards 模式区别

4、div+css的布局较table布局的优点

5、img 的 alt 与 title 异同

6、strong 与 em 的异同

7、渐进增强、优雅降级

8、为什么利用多个域名来存储网站资源会更有效

9、对网页标准和标准制定机构重要性

10、cookies，sessionStorage 和 localStorage 的区别

11、简述一下 src 与 href 的区别

12、网页制作会用到的图片格式

13、什么是微格式及其在前端构建中微格式的考虑

14、在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理

15、加载海量图片

16、HTML结构的语义化

16、以前端角度出发做好SEO需要考虑什么

17、有哪些方式可以对一个 DOM 设置它的 CSS 样式？

18、CSS 选择器

19、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

20、超链接访问过后 hover 就样式不出现的问题是什么？如何解决？

21. 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？

22、行内元素和块级元素区别，行内元素的 padding 和 margin 可设置吗？

23、外边距重叠、重叠的结果

24、rgba() 和 opacity 的透明效果的不同

25、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

如何垂直居中一个浮动元素

27、px 和 em 的区别

一个 reset 的 CSS 文件如何使用。normalize.css 是什么，有什么不同

Sass、LESS

30、display:none 与visibility:hidden 的区别

31、CSS 中 link 和 @import 的区别

32、盒模型

33、初始化样式的原因

34、BFC 块级格式化上下文

35、html语义化

36、严格模式与混杂模式的区别？

37、IE 的双边距 BUG

38. HTML 与 XHTML 区别

39、html常见兼容性问题

40、对 WEB 标准以及 W3C 的理解与认识

41、前端页面有构成

42、如何居中 div, 如何居中一个浮动元素

43、display的值和作用、position的值

44、absolute 的 containing block 计算方式跟正常流有什么不同

45、b 标签和 strong 标签, i 标签和 em 标签的区别

16、HTML结构的语义化　

17、有哪些方式可以对一个 DOM 设置它的 CSS 样式？　

一个 `reset` 的 CSS 文件如何使用。normalize.css 是什么，有什么不同