本文探讨了浏览器内核、doctype的作用、HTML语义化、CSS选择器与布局技巧，包括不同浏览器兼容性处理、CSS hack、图片优化、DOM样式设置、CSS盒模型及现代前端技术如Sass和WebP。
1、页面在那些浏览器进行测试？这些浏览器的内核分别是什么？
IE: trident内核
Firefox: gecko内核
Safari: webkit内核
Chrome：Blink(基于webkit)
2、每个Html文件开头都有个很重要的东西，Doctype，请对其说出你的理解。
<!Doctype>声明位于文档中最前面的位置，处于<html>标签之前。此标签可以告知浏览器文档中使用那种Html或XHtml规范。（告诉浏览器按照那种规范去解析页面）
3、Quirks模式是什么？它和Standards模式有什么区别
4、div+css的布局较table布局有什么优点？
改版的时候比较方便，只用修改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（SEO）搜索引擎更友好，排名更容易靠前。
5、img的alt和title有何异同？
6、描述渐进增强和优雅降级之间的不同
渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等该井和追踪功达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后在针对低版本的浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并且不断扩充适应未来环境需要。降级意味着回头看；而渐进增强意味着朝前看，同时保证其根基处于安全地带。
7、为什么要利用多个域名来存储网站资源会更有效？
CDN缓存更方便。
突破浏览器并发限制。
节约cookie带宽。
节约主域名的连接数，优化页面响应速度。
防止不必要的安全问题。
【如何利用域名存储网站资源】
8、谈一下对网页标准和标准制定机构的重要性
网页标准和标准制定机构都是为了让web发展更健康，开发者遵循统一的标准，降低开发难度，降低开发成本，SEO也更好做，也不会因为滥用代码导致各种bug、安全问题，最终提高网站的易用性。
9、请简述cookies、sessionStorage和localStorage的区别？
sessioStorage中的数据，这些数据只有存在一个会话中的页面才能访问并且当会话结束后，数据也会随之销毁。因此，sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而lcoalStorage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期。
webStorage拥有setItem、getItem等方法，不像cookie需要前端开发者自己封装setCookie等。但是Cookie也不能少，cookie的作用是与服务器进行交互，作为Http规范的一部分存在，而webStorage仅仅为了在本地存储数据而生。
10、简述一下src和href
src用于替换当前元素；href是用来建立当前文档和引用资源之间的确立关系
src指向外部资源的位置，指向内容将会嵌入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如img、js脚本。
当浏览器解析到该元素，会把其他下载资源暂停，直到将资源加载、编译、执行完毕，类似于将所有资源嵌入当前标签内。【js脚本放在底部而不是头部】
href指向网络资源所在的位置，建立和当前元素之阿金的连接。会识别下载引用资源不会停止。【使用link方式来加载css而不是@import】
11、网页制作会用到的图片格式有哪些？
png-8、png-2,jpeg,gif,svg
webp： google开发的WebP格式。旨在加快图片速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。
12、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
13、在css/js代码上线之后，开发人员会经常优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
dns缓存、cdn缓存、浏览器缓存、服务器缓存
14、一个页面上有大量的图片，加载慢，有哪些方法优化这些图片的加载，给用户更好的体验
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，距离小的优先加载。
如果是幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片是css图片，可以使用CSSsprite等技术
如果图片过大，可以使用特殊编码的图片，加载时现使用压缩也别厉害的缩略图，提高用户体验
图片展示区域小于图片真实大小，则因在服务器端根据业务需要进行图片压缩，图片压缩后大小与展示一致
15、有那些方式可以对一个DOM设置它的CSS样式
外部样式表,引入一个外部css文件
内部样式表，将css代码放在<head>标签内部
内联样式表,将css样式直接定义在html元素内部
16、css都有那些选择器
【选择器的优先级】
17、css中可以 通过那些属性定义，使得一个DOM元素不显示在浏览器的可视范围内？
最基本的：设置display属性为none或者设置visibility属性为hidden
技巧性：设置宽高为0，设置透明度为0，设置z-index位置在-1000
18、访问过后的hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有hover和active属性了
解决方案：改变css属性的排列顺序：link-visited-hover-active
20、什么是css hack？
针对不同浏览器写的css代码的过程就是css hack
21、使用Css写一个简单的幻灯片效果页面
使用css3、使用animation动画实现一个简单的幻灯片效果
22、行内元素和块级元素的区别是什么？行内元素的padding和margin可以设置吗？
块级元素特性：总是独占一行，表现为另起一行开始，而其后的元素也必须另其一行显示。width、height、padding、margin都可以控制
内联元素的特性：和相邻的内联元素同在一行。宽度(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>
23、什么是外边距重叠，重叠的结果是什么？
外边距重叠就是 margin-collapse。 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一 个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠 外边距。 折叠结果遵循下列计算规则： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。
24、rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但是最大不同是opacity作用于元素，以及元素内的所有内容透明度。而rgba()只作用于元素的颜色或背景色。rgba透明的元素的子元素不会继承透明效果。
25、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height 水平方向：letter-spacing 那么问题来了，关于 letter-spacing 的妙用知道有哪些么？ 答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。
26、如何垂直居中一个浮动元素？
【如何垂直居中一个<img>】
27、px和em的区别
px和em都是长度单位，区别是px的值是固定的，指定多少就是多少，计算比容易。em的值不是固定的，并且em会继承父级元素的字体大小
28、Sass、Less是什么？大家为什么要使用他们？
他们时候css预处理器，他们是css上的一种抽象层，他们是一种特殊的语法、语言编译成的css。
29、display: none与visibility: hidden的区别是什么？
display: 隐藏对应的元素但是不 挤占该元素原来的空间
visibility: 隐藏对应元素并且挤占该元素原来的空间
即：使用css display:none属性后，Html元素（对象）的宽度、高度等各种属性值都即将丢失；而使用visibility: hidden属性后，Html元素对象仅仅是在视觉上看不见（完全透明），而它所占据的空间位置任然存在
30、css的link和@import的区别是：
link属于html标签，而@import是css中提供的
在页面加载的时候，link会被同时加载，而@import引用的css会在页面加载完成之后才会加载引用的css
@import只有在ie5以上才可以被识别，而link是html的标签，不存在浏览器兼容问题
Link引入样式的权重大于@import的引入（@import是将引入的样式导入到当前的页面中）
31、简介盒子模型：
css的盒子模型：IE盒子模型、标准的w3c盒子模型
盒子模型: 内容、内边距、外边距（一般不计入盒子实际宽度）、边框
32、为什么要初始化样式？
由于浏览器兼容问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异。但是初始化css会对搜索引擎优化造成小影响。
33、BFC是什么？
34、html语义化是什么？
当页面样式加载失败的时候能够让页面呈现处清晰的结构
有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析
35、Doctype的作用？严格模式与混杂模式的区别？
<!Doctype>用于告知浏览器该以何种模式来渲染文档
严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来向后兼容旧的浏览器，向后兼容
36、HTML与XHTML--两者有什么区别？
37、html常见兼容性问题？
1、双边距BUGfloat引起的使用display
2、超链接hover点击后失效 使用正确的书写顺序 link-vistied -hover-active
3、IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片
38、行内元素有那些？块级元素有哪些？CSS的盒模型？
块级元素：div p h1 h2 h3 h4 form ul
行内元素：a b br i span select
CSS盒模型： 内容，border，margin，padding
39、前端页面有那三层构成？
结构层html、表示层css、行为层、js
40、CSS盒子模型
盒子模型：内容+margin+border+padding
41、CSS选择器有哪些？那些属性可以继承？优先级算法如何计算？css3新增伪类有哪些？
id选择器 (#myid)
类选择器（.myclass）
标签选择器（div，p）
相邻选择器（h+p）
子选择器（ul<li）
后代选择器（li a）
通配符选择器 （*）
属性选择器（a[rel='external']）
伪类选择器：（a: hover,li: nth-child）
可继承：font-size font-family color
不可继承： border、padding、margin
优先级就近原则，样式定义最近者为准
载入样式以最后的定位为准
优先级为：!important > id >class > tag
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>元素
42、如何居中div，如何居中一个浮动元素？
给div设置一个宽度，然后添加margin: 0 auto
div{width:200px;margin: 0 auto}
居中一个浮动元素，确定容器的宽高设置外边距
.div{width:50px;heigth;30px;margin:-150px 0 0
-250px;position:relative;left:50%;top:50%}
43、浏览器的内核分别是什么？经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么？常用的hack技巧？
IE的浏览器内核Trident、Mozilla的Gecko、google的webkit
44、列出display的值，说明他们的作用。position、relative和absolute的定位远点是
block像块元素一样显示
inline-block: 像行内元素一样显示，但其内容像块元素一样显示
list-item: 像块元素一样显示，并添加样式列表标记
position: absolute:生成绝对定位的元素，相对于static定位意外的第一个父元素进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
relative: 生成相对定位的元素，相对于其正常元素进行定位
static： 默认值。没有定位，元素出现在正常的流中
45、absolute 的 containing block 计算方式跟正常流有什么不同
46、position 跟 display、margin collapse、overflow、float 这些特性相互 叠加后会怎么样？
47、css的基本语句构成是
选择器{属性1：值；属性2：值2....}
48、说说display属性有哪些？可以做什么？
display:block行内元素转换为块级元素
display:inline块级元素转换为行内元素
display:inline-block转换为内联元素
扫一扫
4207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
