布局部分(二)
实现不使用 border 画出 1 px 高的线，在不同浏览器的标准模式与怪异 模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
title 与 h1 的区别？
title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也 有很大的影响。
的 title 和 alt 有什么区别？
title 通常当鼠标滑动到元素上的时候显示 alt 是 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅 读图片。可提图片高可访问性，除了纯装 饰图片外都必须设置有意义的值，搜索引擎会重点分析。
Canvas 和 SVG 有什么区别？
Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的， 因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况。
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中 的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保 存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真。
渐进增强和优雅降级的定义
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器 进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行 兼容。
attribute 和 property 的区别是什么？
attribute 是 dom 元素在文档中作为 html 标签拥有的属性；
property 就是 dom 元素在 js 中作为对象拥有的属性。
对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的， 但是对于自定义的属性来说，他们是不同步的。
常用的 meta 标签
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度 的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联 的名称/值对。<!DOCTYPE html> H5 标准声明，使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版 本和 Chrome
<meta name=”description” content=”不超过 150 个字符”/> 页面描述
<meta name=”keywords” content=””/> 页面关键词者
<meta name=”author” content=”name, [email protected]”/> 网页作
<meta name=”robots” content=”index,follow”/> 搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”> 启用 360 浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免 IE 使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码
<meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些 老的不识别 viewport 的浏览器，比如黑莓
<meta name=”MobileOptimized” content=”320″> 微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”> uc 强制竖屏
<meta name=”x5-orientation” content=”portrait”> QQ 强制竖屏
<meta name=”full-screen” content=”yes”> UC 强制全屏
<meta name=”x5-fullscreen” content=”true”> QQ 强制全屏
<meta name=”browsermode” content=”application”> UC 应用模式
<meta name=”x5-page-mode” content=”app”> QQ 应用模式
<meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光 设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
主流浏览器内核私有属性 css 前缀？
mozilla 内核 （firefox,flock 等） -moz webkit 内核 （safari,chrome 等） -webkit opera 内核 （opera 浏览器） -o trident 内核 （ie 浏览器） -ms
前端性能优化？
前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。我认为可以从这些 方面来进行优化。
第一个方面是页面的内容方面 （1）通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的 请求造成等待的情况。 （2）通过 DNS 缓存等机制来减少 DNS 的查询次数。 （3）通过设置缓存策略，对常用不变的资源进行缓存。 （4）使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用 户需要访问时，再去请求加载。 （5）通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速 度。
第二个方面是服务器方面 （1）使用 CDN 服务，来提高用户对于资源请求时的响应速度。 （2）服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。 （3）尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态 资源请求时携带不必要的 cookie 第三个方面是 CSS 和 JavaScript 方面 （1）把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。 （2）避免使用 @import 标签。 （3）尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行 阻塞页面的渲染。 （4）通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。
介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
相关知识点： （1）有两种盒子模型：IE 盒模型（border-box）、W3C 标准盒模型（content-box） （2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个 部分IE 盒模型和 W3C 标准盒模型的区别： （1）W3C 标准盒模型：属性 width，height 只包含内容 content，不包含 border 和 padding
（2）IE 盒模型：属性 width，height 包含 content、border 和 padding，指的是 content +padding+border。 在 ie8+浏览器中使用哪个盒模型可以由 box-sizing（CSS 新增的属性）控制，默认值为 content-box，即标准盒模型； 如果将 box-sizing 设为 border-box 则用的是 IE 盒模型。如果在 ie6，7，8 中 DOCTYPE 缺失会 将盒子模型解释为 IE 盒子模型。若在页面中声明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为 W3C 盒模 型。
CSS 选择符有哪些？
（1）id 选择器（#myid） （2）类选择器（.myclassname） （3）标签选择器（div,h1,p） （4）后代选择器（h1 p） （5）相邻后代选择器（子）选择器（ul>li） （6）兄弟选择器（li~a） （7）相邻兄弟选择器（li+a） （8）属性选择器（a[rel=“external”]） （9）伪类选择器（a:hover,li:nth-child） （10）伪元素选择器（::before、::after） （11）通配符选择器（*）
::before 和:after 中双冒号和单冒号有什么区别？
单冒号（:）用于 CSS3 伪类，双冒号（::）用于 CSS3 伪元素。
CSS 中哪些属性可以继承？
有继承性的属性： （1）字体系列属性 font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust （2）文本系列属性 text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、 text-transform、direction、color （3）表格布局属性 caption-sideborder-collapseempty-cells （4）列表属性 list-style-type、list-style-image、list-style-position、list-style （5）光标属性 cursor （6）元素可见性 visibility （7）还有一些不常用的；speak，page，设置嵌套引用的引号类型 quotes 等属性 注意：当一个属性不是继承属性时，可以使用 inherit 关键字指定一个属性应从父元素继承 它的值，inherit 关键字用于显式地 指定继承性，可用于任何继承性/非继承性属性。
CSS3 有哪些新特性？
新增各种 CSS 选择器 （:not(.input)：所有 class 不是“input”的节点） 圆角 （border-radius:8px） 多列布局 （multi-columnlayout） 阴影和反射 （Shadow\Reflect） 文字特效 （text-shadow） 文字渲染 （Text-decoration） 线性渐变 （gradient） 旋转 （transform） 缩放，定位，倾斜，动画，多背景
用纯 CSS 创建一个三角形
<style>
.box {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
</style>
li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
间隔设为默认 letter-spacing:normal。
初始化样式
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
margin: 0;
padding: 0;
}
body,
button,
input,
select,
textarea {
font: 12px/1.5tahoma, arial, \5b8b\4f53;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
address,
cite,
dfn,
em,
var {
font-style: normal;
}
code,
kbd,
pre,
samp {
font-family: couriernew, courier, monospace;
}
small {
font-size: 12px;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
legend {
color: #000;
}
fieldset,
img {
border: 0;
}
button,
input,
select,
textarea {
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
width:auto 和 width:100%的区别
一般而言 width:100%会使元素 box 的宽度等于父元素的 contentbox 的宽度，最终宽度可能会大于父节点宽度。 width:auto 会使元素撑满整个父元素，margin、border、padding、content 区域会自动分配水平空间。
简单介绍使用图片 base64 编码的优点和缺点。
base64 编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上 显示的时候，可以用该字符串来代替图片的 url 属性。 使用 base64 的优点是： （1）减少一个图片的 HTTP 请求 使用 base64 的缺点是： （1）根据 base64 的编码原理，编码后的大小会比原文件大小大 1/3，如果把大图片编码到 html/css 中，不仅会造成文件体 积的增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。 （2）使用 base64 无法直接缓存，要缓存只能缓存包含 base64 的文件，比如 HTML 或者 CSS， 这相比域直接缓存图片的效果要 差很多。
（3）兼容性的问题，ie8 以前的浏览器不支持。 一般一些网站的小图标可以使用 base64 图片来引入。
BFC 规范
相关知识点： 块格式化上下文（BlockFormattingContext，BFC）是 Web 页面的可视化 CSS 渲染的一部分， 是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品 摆放，并且不会影响其它环境中的物品。 如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
创建 BFC （1）根元素或包含根元素的元素 （2）浮动元素 float＝left|right 或 inherit（≠none） （3）绝对定位元素 position＝absolute 或 fixed （4）display＝inline-block|flex|inline-flex|table-cell 或 table-caption
（5）overflow＝hidden|auto 或 scroll(≠visible)
IFC 是什么？
IFC 指的是行级格式化上下文，它有这样的一些布局规则： （1）行级上下文内部的盒子会在水平方向，一个接一个地放置。 （2）当一行不够的时候会自动切换到下一行。 （3）行级上下文的高度由内部最高的内联盒子的高度决定。