前端知识总结之HTML+CSS

		                HTML4/HTML5+CSS2/CSS3

一、HTML
1.什么是HTML 语义化，有什么好处
是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），简单来说就是，标签用语义化的英文单词或者单词缩写，比如段落使用

，侧边栏用

，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
好处`： 1.1有助于构架良好的HTML结构
1.2有助于搜索引擎建立索引、抓取，有利于SEO
1.3有利于不同设备的解析
1.4有利于团队的开发维护
2.谈谈你对HTML5的认识
优点：
1）多设备，跨平台；
2）用户体验好；
3）新标签的可读性高，有助于开发人员定义重要内容；
4）提供了更多的多媒体元素（视频和音频）；
5）很好地替代了Flash和Silverlight；
6）涉及到网站的抓取和索引的时候，SEO更加友好；
7）可以被大量应用于移动应用程序和游戏。

缺点：
1）web storage和web socket这样的功能很容易被黑客利用，安全性差；
2）兼容性不好，很多浏览器的支持程度不一样；
3）有一定的技术门槛；
4）某些平台上的引擎问题导致HTML5性能低下
3.HTML4和HTML5有啥区别
1.DOCTYPE声明的简化 HTM5不基于SGML因此不需要引用DTD
2.指定字符编码
HTML5:
HTML4:
3.新增内联SVG和Canvas
Canvas和SVG的区别？
Canvas和SVG是html5支持的两种可视化技术。基于这两种技术，诞生了很多可视化工具。Echarts是基于Canvas技术的可视化工具，底层封装了原生的JavaScript的绘图 API。我们很容易联想到另一个同样很优秀的web前端可视化库D3，D3是也最流行的可视化库之一，它被很多其他的表格插件所使用。
D3底层基于SVG技术，与Canvas完全不一样，SVG的本质是一个XML 文档。这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。它们都是有效的图形工具，可用来快速创建在网页中显示的轻型图形；它们都使用 JavaScript 和 HTML；它们都遵守万维网联合会 (W3C) 标准。Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。它们很不相同，他们各有强项和弱点。

Canvas 通过JavaScript来绘制2D图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
这两种技术之间的主要区别是：
Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas不支持鼠标键盘等事件。
SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。Canvas和SVG在修改方式上还存在着不同。绘制Canvas对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。
现在对两种技术做对比归纳如下：
Canvas
1)依赖分辨率
2)不支持事件处理器
3)弱的文本渲染能力
4)能够以 .png 或 .jpg 格式保存结果图像
5)最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
1)不依赖分辨率
2)支持事件处理器
3)最适合带有大型渲染区域的应用程序（比如谷歌地图）
4)复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5)不适合游戏应用

新增的标签

... 修改的标签，主要是修改了语义

... 废除的标签 新增的属性，HTML5新增了很多属性， input的type属性增加的新类型 tel、search、url、email、date、time、number、range、color form属性可用于在input、output、select、textarea、button、label、object、fieldset元素上指定关联的元素的id，不局限于常规的层叠关系 input、textarea元素可使用placeholder属性来帮助用户填写数据，注意，它不应当替代label元素的作用 可使用autofocus元素来制定自动获得焦点的元素（非type="hidden"的input、select、textarea、button的元素） fieldset标签允许使用disabled属性，这将禁止所有子元素的交互；它同时还可以使用name以方便脚本获取 input元素有了用于指明输入限制的属性autocomplete, min,max, multiple, pattern及step input type="image"的元素有width和height属性 input与textarea元素有了dirname以指明书写方向（译注：ltr或rtl） textarea元素有了新的属性，如maxlength、minlength、wrap来控制最大输入长度与提交时的断行行为 form元素有了novalidate属性来禁止默认的表单验证行为 input与button元素有了formaction, formenctype, formmethod, formnovalidate与formtarget属性，用于覆盖继- 承自form的action, enctype, method, novalidate及target属性 input元素有了minlength和maxlength属性 非表单元素：

area元素同a和link元素一样有了新的hreflang、type、rel属性
base元素同a一样可以有target属性
meta元素有了charset属性
script元素有了async属性将影响脚本的加载与运行
html元素有manifest属性，可用于指定缓存行为
link元素有了新的属性sizes，可以指定不同的大小的favicon
ol元素有了新的属性reversed，它代表着列表的顺序是逆序的
iframe元素有了sandbox和srcdoc属性以支持沙盒安全保护
object元素有了typemustmatch元素以保证更安全的嵌入顺序
img元素有crossorigin属性以在canvas中支持CORS
contenteditable
data-*代表了开发定制的属性，这种格式可以避免与将来的新HTML属性冲突
hidden属性代表一个元素不再与文档相关
role及aria-*用于支持无障碍访问
spellcheck用于指定内容是否允许进行拼写检查
translate用于指定内容是否应当翻译
废弃的属性，废弃的属性也有很多，a废弃属性：shape, coords, rev, charset
area废弃属性：nohref
form废弃属性：accept
head废弃属性：profile
html废弃属性：version
iframe废弃属性：longdesc
img废弃属性：name
input废弃属性：usemap
link废弃属性：target, rev, charset
meta废弃属性：scheme
object废弃属性：archive, classid, codebase, codetype, declare, standby
param废弃属性：valuetype, type
table废弃属性：summary
td废弃属性：axis, abbr, scope
th废弃属性：axis
HTML不再包含纯用于表现的属性，它们应当被CSS替代：

caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup,tbody, td, - tfoot, th, thead和tr的align属性被废弃
body的alink, link, text, background属性被废弃
table, tr, td, th和body的bgcolor属性被废弃
object的border属性被废弃
table的cellpadding和cellspacing属性被废弃
col, colgroup, tbody, td, tfoot, th, thead和tr的char和charoff属性被废弃
br的clear属性被废弃
dl, ol和ul的compact属性被废弃
table的frame属性被废弃
iframe的frameborder属性被废弃
td和th的height属性被废弃
img和object的hspace和vspace属性被废弃
iframe的marginheight和marginwidth属性被废弃
hr的noshade属性被废弃
td和th的nowrap属性被废弃
table的rules属性被废弃
iframe的scrolling属性被废弃
hr的size属性被废弃
li,和ul的type属性被废弃
col, colgroup, tbody, td, tfoot, th, thead和tr的valign属性被废弃
hr, table, td, th, col, colgroup和pre的width属性被废弃
8.本地数据存储类型（localStorage、sessionStorage）
HTML5 提供了两种在客户端存储数据的新方法：
1）localStorage - 没有时间限制的数据存储
2）sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。

5. HTML5支持音视频
   6.元素标记的省略、具有boolean值的属性、省略引号
   具有boolean值的属性(常见的checked、selected、disabled、readonly)
   4.HTML5应用程序缓存为应用带来什么优势。
   应用程序缓存为应用带来三个优势：
   1）离线浏览：用户可在应用离线时使用它们。
   2）速度：已缓存资源加载得更快。
   3）减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。
   5.为什么要在html文件开头加上一个
   告诉浏览器的/标准通用标记语言解析器使用哪个版本的HTML规范来解析文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。只有确定了一个正确的文档类型，超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效，甚至对 javascript 脚本都会有所影响。
   6.如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
   通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
   7.HTML5的新增特性
   新增加了图像、位置、存储、多任务等功能。
   • 新增功能标签：可以用作画板的canvas，用于媒介回放的video和audio元素等
   • 本地离线存储：localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
   • 语意化更好的标签：figure、footer、nav(定义只包含导航链接的章节
   • )、header、aside、time 等标签
   • 位置API：Geolocation
   • 表单控件：calendar date time email url search
   • 新的技术：Web Worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) Web Socket
   • 拖放API：drag、drop
   • 离线网路程序：能够让网页在客户端本地高效地离线运行。
   • History API：允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
   8.请说出XHTML和HTML的区别
   1、文档顶部doctype声明不同，xhtml的doctype顶部声明中明确规定了xhtml DTD的写法；
   2、html元素必须正确嵌套，不能乱；
   3、属性必须是小写的；
   4、属性值必须加引号；
   5、标签必须有结束，单标签也应该用 “/” 来结束掉；
   9、 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
   行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素
   块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；
   空元素：在HTML元素中，没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
   就是没有关闭标签的空元素。

行内元素：a span img input select label input button textarea select
块级元素：div ul ol li dl dt dd h1 p form
空元素：

---

10. SGML 、 HTML 、XML 和 XHTML 的区别？
• SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
• HTML 是超文本标记语言，主要是用于规定怎么显示网页。
• XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多， 而 HTML 的标签都是固定的而且数量有限。
• XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。
回到顶部
11. DTD 介绍
• DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元 素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。
• DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。
二、CSS3
1.怎么让一个不定宽高的 DIV，垂直水平居中？
在我们公司也经常有这种需求，以前都是用css定位的方式实现，后来在逛掘金时候看flex知识时候发现这个方式也能实现。
• 1）使用 CSS 方法：
• 父盒子设置：display：table-cell； text-align：center；vertical-align：middle；
• Div 设置： display：inline-block；vertical-align：middl；
• 2）使用 CSS3transform：
• 父盒子设置：display：relative
• Div 设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；
• 3.使用弹性布局flex
.one {
• width: 500px;
• height: 500px;
• background-color: royalblue;
• display: flex; //弹性布局display：flex 属性，在 ie10 以下都是无效的
• justify-content: space-around; //水平居中
• align-items: center; //垂直居中
• }
2.position几个属性的作用？
• 答：position的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right"以及 “bottom”
• 属性使用。
• 1）Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。一般不常用。
• 2）Relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了 relative 值，那么，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。
• 3）Absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的
• 父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如
• 果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位
• 置。
• 4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。
3、px，em，rem的区别？
• 答： 1）px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的， 是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
• 2）em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
• 3）rem是CSS3新增的一个相对单位（rootem，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
• 4）区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。
4、什么是BFC？
• 答： 1）定义：
• BFC(Block formatting context)直译为"块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box 参与， 它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干。
• 布局规则：
• A. 内部的 Box 会在垂直方向，一个接一个地放置。
• B. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box的margin 会发生重叠。
• C. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• D. BFC 的区域不会与 float box 重叠。
• E. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• F. 计算 BFC 的高度时，浮动元素也参与计算。
• 3）哪些元素会生成 BFC：
• A. 根元素
• B. float 属性不为 none
• C. position 为 absolute 或 fixed
• D. display 为 inline-block， table-cell，table-caption， flex， inline-flex F. overflow 不为visible
下列方式会创建块格式化上下文：
• 根元素()
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 paint 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
•
5、表格自动换行怎么实现？
• 答：word-break：normal 使用浏览器默认的换行规则；
• break-all允许单词内换行；
• keep-all只能在半角空格或连字符处换行
• word-wrap：normal 是用浏览器默认的换行规则；break-word 在长单词或 URL 地址内部进行换行。
6、box-sizing、transition、translate分别是什么？
• 答：Box-sizing： 用来指定盒模型的大小的计算方式。主要分为boreder-box（从边框固定盒子大小）、content-box（从内容固定盒子大小）两种计算方式。
• transition： 当前元素只要有“属性”发生变化时，可以平滑的进行过渡。通过 transtion-propety 设置过渡属性；
• transtion-duration 设置过渡时间；
• trantion-timing-function 设置过渡速度；
• trantion-delay 设置过渡延时
• translate：通过移动改变元素的位置；有 x、y、z 三个属性
7、选择器优先级是怎样的？
• 答：！important>行内样式>id 选择器>类选择器>标签选择器>通配符>继承
• 权重算法：
• （0，0，0，0）==》第一个 0 对应的是 important 的个数，第二个 0 对应的是 id 选择器的个数，第三个 0 对
• 应的类选择器的个数，第四个 0 对应的是标签选择器的个数，就是当前选择器的权重。
• 比较：
• 先从第一个 0 开始比较，如果第一个 0 大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推
8、Iframe的作用？
• 答：用法：
• Iframe是用来在网页中插入第三方页面，早期的页面使用 iframe 主要是用于导航栏这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。
• 优点：便于修改，模块分离，像一些信息管理系统会用到。但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。
• 缺点 :
• （1）iframe 的创建比一般的 DOM 元素慢了 1-2 个数量级
• （2）iframe 标签会阻塞页面的加载，如果页面的onload 事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好.在 Safari 和 Chrome 中可以通过 js 动态设置 iframe 的 src 属性来避免阻塞.
• （3）iframe 对于 SEO 不友好，替代方案一般就是动态语言的 Incude 机制和 ajax 动态填充内容等。
9、标签上title 与 alt 属性的区别是什么?
• 答：Alt 当图片不显示时，用文字代表。Title为该属性提供信息。
10、改变元素的外边距用什么属性？改变元素的内填充用什么属性？
• 答：改变元素的外边距用 margin，改变元素的内填充用 padding。
11、在新窗口打开链接的方法是？
• 答：target：_blank。
12、合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？
• 答：结构是 html，表现是 css。
13、display：none；与 visibility： hidden 的区别是什么？
• 答：display：none； 使用该属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”；
• visibility：hidden； 使用该属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
14.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?
• 行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素
块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；
行元素转换为块级元素方式：display：block；
15.将多个元素设置为同一行?清除浮动有几种方式?
• 将多个元素设置为同一行：float，inline-block
清除浮动的方式：
• 方法一：添加新的元素 、应用 clear：both；
方法二：父级div定义 overflow: hidden；
方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
16.怪异盒模型box-sizing？弹性盒模型|盒布局?
• 在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。
• 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
• 图片元素垂直对齐方式
在strict mode中 ：vertical-align 属性默认取值为 baseline
在quirks mode中 ：vertical align 属性默认为 bottom，因此，在图片底部会有几像素的空间。
• < table >元素中的字体
Quirks Mode 下，对于 table 元素，字体的某些属性将不会从 body 或其他封闭元素继承到 table 中，特别是 font-size 属性。
• 内联元素的尺寸
在 Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 Quirks Mode 下，定义这些元素的 width 和 height 属性，能够影响该元素显示的大小尺寸。
• 元素的百分比高度
当一个元素使用百分比高度时，在 Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。
• 元素溢出的处理
在 Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容
17.css hack？原理是啥？
CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 　　
CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。

类内部Hack：比如 IE6能识别下划线"“和星号” * “，IE7能识别星号” * “，但不能识别下划线”"，而firefox两个都不能认识。

选择器Hack：比如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
HTML头部引用(if IE)Hack：针对所有IE：<!–[if IE]> <![endif]–>，针对IE6及以下版本：<!–[if lt IE 7]> <![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。 　　
书写顺序，一般是将识别能力强的浏览器的CSS写在前面。
18.简述几个css hack?
• (1) 图片间隙
在div中插入图片，图片会将div下方撑大3px。hack1：将

与 写在同一行。hack2：给 添加display：block；
dt li 中的图片间隙。hack：给 添加display：block；
(2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；
hack2：声明：overflow：hidden；
表单行高不一致
hack1：给表单添加声明：float：left；height： ；border： 0；
鼠标指针
hack：若统一某一元素鼠标指针为手型：cursor：pointer；
当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；
19.href和src区别? title和alt
• href (Hypertext Reference)指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和a 等元素上使用。
src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html标签，又是html属性，title作为属性时，用来为元素提供额外说明信息.
alt：alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息.
20.transform？animation？区别?animation-duration
• Transform:它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。
Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
21.nth-of-type | nth-child?
• 举例说明：

• 111

  222
• 1
• 2
• 3

li:nth-of-type(2):表示ul下的第二个li元素 li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（找不到）。 建议一般使用nth-of-type，不容易出问题。 22.css选择器有哪些？优先级？ id选择器(#myid)、 类选择器(.myclassname)、 标签选择器(div, h1, p)、 相邻选择器(h1 + p)、 子选择器（ul > li）、 后代选择器（li a）、 通配符选择器（*）、 属性选择器（a[rel=”external”]）、 伪类选择器（a:hover, li:nth-child） 可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：!important > [ id > class > tag ] !important 比内联优先级高 23. :before 和 ::before 区别? • 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。 • 24.如何让一个div 上下左右居中? • 答：有三种方法。 • 方法1： .div1{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); }

• 方法2： .div2{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }

• 方法3： .div3{ width:400px; height:400px; border:#CCC 1px solid; background:#9f9; position: absolute; left: 50%; top:50%; margin-left:-200px; margin-top: -200px; }

25.css2.0 和css3.0 • 答：css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果(圆角，动画之类的)，还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好，只有一些高级版本的浏览器支持。 • CSS3实现圆角（border-radius），阴影（box-shadow）， 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); //旋转,缩放,定位,倾斜增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局 border-image 26.弹性盒子模型?flex|box区别? Css3弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。 • (1) 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。

即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。

当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。
在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；
而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
(2) flex和box的区别: display：box 是老规范，要兼顾古董机子就加上它； 父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。 flex是最新的，董机老机子不支持的；
父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。 Android UC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。
27.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
   清除浮动的方式：
4. 父级div定义height
5. 最后一个浮动元素后加空div标签 并添加样式clear:both。
6. 包含浮动元素的父标签添加样式overflow为hidden或auto。
7. 父级div定义zoom
   28.meta viewport 是做什么用的，viewport 所有属性怎么写？
   控制页面在移动端不要缩小显示。

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
:only-child表示的是一个元素是它的父元素的唯一一个子元素。
:first-line为某个元素的第一行文字使用样式。
:first-letter 为某个元素中的文字的首字母或第一个字使用样式。
:before 在某个元素之前插入一些内容。
:after 在某个元素之后插入一些内容。
c3中伪元素：
::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
::selection用来改变浏览网页选中文的默认效果
30.placeholder?如何在ie8上兼容placeholder这个效果
• 方法一：
首先判断浏览器是否支持placeholder属性，如果不支持的话，就遍历所有input输入框，获取placeholder属性的值填充进输入框作为提示信息，同时字体设置成灰色。

当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清空；

当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的placeholder属性的值填充
进输入框作为提示信息，同时字体设置成灰色；

当输入框内有输入( keydown )时，此时输入框内的提示信息已经由focus事件清除，此时只需要把字体再恢复成黑色即可

此方法的缺点是，不适用于加载完DOM时即获得焦点的输入框，因为在用户的角度，加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。
• HTML：
•
•
• CSS：
• .phcolor{ color:#999;}
•
• JS
• $(function(){
• //判断浏览器是否支持placeholder属性
• supportPlaceholder='placeholder’in document.createElement(‘input’),
• placeholder=function(input){
• var text = input.attr(‘placeholder’),
• defaultValue = input.defaultValue;
• if(!defaultValue){
• input.val(text).addClass(“phcolor”);
• }
• input.focus(function(){
• if(input.val() == text){
• $(this).val("");
• }
• });
• input.blur(function(){
• if(input.val() == “”){
• $(this).val(text).addClass(“phcolor”);
• }
• });
• //输入的字符不为灰色
• input.keydown(function(){
• $(this).removeClass(“phcolor”);
• });
• };
• //当浏览器不支持placeholder属性时，调用placeholder函数
• if(!supportPlaceholder){
• $(‘input’).each(function(){
• text = $(this).attr("placeholder");•if($(this).attr(“type”) == “text”){
• placeholder($(this));
• }
• });
• }
• });
• 方法二：
此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；
当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。
• CSS：
• .phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}
•
• JS
• $(function(){
• //判断浏览器是否支持placeholder属性
• supportPlaceholder=‘placeholder’ in document.createElement(‘input’);
• if(!supportPlaceholder){
• //初始状态添加背景图片
• $("#uname").attr(“class”,“phbg”);
• //初始状态获得焦点
• KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲uname").focus; …("#uname").val() != “”){
• $("#uname").removeClass(“phbg”);
• }else{
• $("#uname").attr(“class”,“phbg”);
• }
• }
• //当输入框为空时，添加背景图片；有值时去掉背景图片
• destyle();
• $("#uname").keyup(function(){
• //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片
• destyle();
• });
• $("#uname").keydown(function(){
• //keydown事件可以在按键按下的第一时间去掉背景图片
• $("#uname").removeClass(“phbg”);
• });
• }
• });
• 方法三：
使用插件：Placeholders.js

31.常见兼容性问题？
• * png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。

• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

• IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

• 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

• 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
  css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; }

• IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性。

• IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

• 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

• 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用html5推荐的写法：<doctype html>

• 上下margin重合问题
  ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
  解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

• ie6对png图片格式支持不好(引用一段脚本处理)
  32.简述前端优化的方式 旧的雅虎34条|h5新添加的方式
  • 1、尽量减少HTTP请求次数
  2、减少DNS查找次数
  3、避免跳转
  4、可缓存的AJAX
  5、推迟加载内容
  6、预加载
  7、减少DOM元素数量
  8、根据域名划分页面内容
  9、使iframe的数量最小
  10、不要出现404错误
  11、使用内容分发网络
  12、为文件头指定Expires或Cache-Control 13、Gzip压缩文件内容
  14、配置ETag
  15、尽早刷新输出缓冲
  16、使用GET来完成AJAX请求
  17、把样式表置于顶部
  18、避免使用CSS表达式（Expression）
  19、使用外部JavaScript和CSS
  20、削减JavaScript和CSS
  21、用代替@import
  22、避免使用滤镜
  23、把脚本置于页面底部
  24、剔除重复脚本

33.media属性？screen？All？max-width?min-width?
• media 属性规定被链接文档将显示在什么设备上。media 属性用于为不同的媒介类型规定不同的样式。Screen计算机默认屏幕，all适用于所有设备，max-width超过最大宽度就不执行，min-width必须大于最小宽度才执行。
34.meta标签的name属性值？
• name 属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是：＜meta name=“参数” content="具体的参数值"＞。
其中name属性主要有以下几种参数：
A 、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是什么。
B 、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容.
C 、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow,默认是all。
举例：＜meta name=“robots” content="none"＞D 、author(作者)
•
35.一般做手机页面切图有几种方式?
• 响应式布局，弹性布局display：flex，利用js编写设定比例，给根元素设定像素，使用rem为单位。
36.px/em/rem有什么区别？ 为什么通常给font-size 设置的字体为62.5%
• 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1、em的值并不是固定的；
2、em会继承父级元素的字体大小。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
rem是相对于浏览器进行缩放的。1rem默认是16px，在响应式布局中，一个个除来转换成rem，太麻烦，所以重置rem
body{font-size=62.5% } 此时1rem = 10px;若是12px则是1.2rem.
37.sass和scss有什么区别?sass一般怎么样编译的
• 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(😉，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
38如果对css进行优化如何处理？如何对css文件进行压缩合并? gulp ?
• 压缩打包，图片整合，避免使用Hack，解决兼容问题，使用简写，让CSS能保证日后的维护。
• 使用gulp, 首页全局安装gulp。
1、npm install --global gulp
2、其次局部安装gulp。npm install gulp --save-dev
3、在项目根目录下创建一个名为 gulpfile.js 的文件
var gulp = require(‘gulp’);
gulp.task(‘default’, function() {
// 将你的默认的任务代码放在这});
4、运行gulp。（默认的名为 default 的任务（task）将会被运行，想要单独执行特定的任务（task），请输入 gulp ）
gulp
合并和压缩JS、CSS文件
压缩JS，CSS文件需要引用如下组件：
gulp-minify-css: 压缩css
39.组件? 模块化编程？
• 组件化编程: 将js css html包装一起提供方法和效果；
模块化化: 将相同的功能抽取出来 存放在一个位置进行编程
40.图片和文字在同一行显示?
• 1 在css中给div添加上“vertical-align:middle”属性。
2 分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行。
3 把图片设置为背景图片。
41禁止事件冒泡？禁止默认事件？如何禁用href 跳转页面 或 定位链接？
• event.stopPropagation()
• event.preventDefault()
• e.preventDefault();
href="javascript:void(0);
42.a标签中 active hover link visited 正确的设置顺序是什么?
• a标签的link、visited、hover、active是有一定顺序的
a:link
a:visited
a:hover
a:active
43.手机端上 图片长时间点击会选中图片，如何处理?
• οnselect=function(){return false}
44.video标签的几个个属性方法
• src：视频的URL poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度
•
45.常见的视频编码格式有几种?视频格式有几种?
• 视频格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式
视频编码格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1
46.canvas在标签上设置宽高 和在style中设置宽高有什么区别？
• canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值 。
47.border-image？box-sizing?
• Border-image : 图形化边框
Box-sizing : 属性允许您以特定的方式定义匹配某个区域的特定元素。
语法 ：box-sizing：content-box | border-box
Content-box : padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding) 此属性表现为标准模式下的盒模型 .
Border-box : padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
48.渐进增强和优雅降级
• 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？
49.animation对应的属性
• 写法：animation: name duration timing-function delay iteration-count direction;
下面是对应的属性的介绍
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
50.transition?
• css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 注意区别transform，transform是进行2D转换的 如移动，比例化，反过来，旋转，和拉伸元素。
51.canvas 如何绘制一个三角形|正方形
• moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
•
•
•
•
•
•
•
•
• Your browser does not support the canvas element.
•
•
•
•
52.css清除浮动的几种方式？
• 1、父级div定义 height
2、结尾处加空div标签 clear:both
3、父级div定义 伪类:after 和 zoom
4、父级div定义 overflow:hidden
5、父级div定义 overflow:auto
6、父级div 也一起浮动
7、父级div定义 display:table
53.为什么要初始化CSS样式。
• 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
54.解释下 CSS sprites，以及你要如何在页面或网站中使用它。
• CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了http2。
• 优点：
• a. 减少网页的http请求
• b. 减少图片的字节
• c. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
• d. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
• 缺点：
• a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
• b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
• c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片
55.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
• FOUC - Flash Of Unstyled Content 文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在之间加入一个或者

79、很多网站不常用table iframe这两个元素，知道原因吗？
答：因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好

80、jpg和png格式的图片有什么区别？
答： jpg是有损压缩格式，png是无损压缩格式。所以，相同的图片，jpg体积会小。比如我们一些官网的banner图，一般都很大，所以适合用jpg类型的图片。但png分8位的和24位的，8位的体积会小很多，但在某些浏览器下8位的png图片会有锯齿。

81、请用html知识解决seo优化问题
答： 网站上线应该设置TDK（T=title-标题，D=description-描述，K=keywords-关键词）
然后就是html语义化标签，要简洁，合理，这样可以在css和js加载不全的时候，使我们的html文档尽量清晰的展示出来，而不会特别乱；
82、常用浏览器有哪些，内核都是什么？
答： 常用浏览器有
IE （内核：Trident）
火狐(firefox) （Gecko）
chrome （Webkit）
safari （Webkit）
360 搜狗（极速Webkit 兼容Trident）
83、form标签上定义请求类型的是哪个属性？定义请求地址的是哪个属性？
答：form表单定义请求类型的是method 属性 ，
定义请求地址的是action属性
84.介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
85. HTML5的文件离线储存怎么使用，工作原理是什么？
在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如，
在页面头部加入manifest属性

在cache.manifest文件中编写离线存储的资源 CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: Resourse/logo.png FALLBACK: //offline.html 86.cookies，sessionStorage和localStorage的区别？ 共同点：都是保存在浏览器端，且是同源的。 区别： 1. cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。 2. 存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。 3. 数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。 4. 作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享 87. label的作用是什么? 是怎么用的? label标签用来定义表单控件间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label 中有两个属性是非常有用的, FOR和ACCESSKEY。 FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如， 姓名 ACCESSKEY属性功能：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。例如，

100. flex怎么用？常用的属性有哪些？
     flex可用作弹性布局。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
     常用的属性：
     • flex-direction—>决定主轴的方向；
     • flex-wrap—>决定如何换行；
     • flex-flow—>flex-direction属性和flex-wrap属性的简写形式；
     • justify-content—>定义了项目在主轴上的对齐方式；
     • align-items—>定义项目在交叉轴上如何对齐；
     • align-content—>定义了多根轴线的对齐方式；回到顶部
101. 纯CSS画三角形/梯形/圆
     利用CSS border 属性
     • 三角形

div {
width: 0;
height: 0;
border-left: 50px solid transparent;/* transparent是将border设置透明的意思 */
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}

• 梯形

div {
width: 100px;
height: 0;
border-left: 50px solid transparent;/* transparent是将border设置透明的意思 */
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}

• 圆

div {
width: 0;
height: 0;
border: 100px solid red;
border-radius: 100px;
}

回到顶部
102. 边距塌陷
边距折叠发生在同一BFC的块级元素之间，上下边距是边距较大值而不是边距之和。
会发生边距折叠的三种情况：
• 相邻元素之间
毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）。
父元素与其第一个或最后一个子元素之间
如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。
空的块级元素
如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。
回到顶部
103. 文字截断
单行文本截断 text-overflow

div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
图片自适应
img { max-width: 100%;}

104. 响应式布局
105. 允许网页宽度自适应

// viewport是网页默认的宽度和高度，网页宽度默认等于屏幕宽度，原始缩放比例为1.0，网页初始大小占屏幕面积的100% 2. 不使用绝对宽度 不指定像素宽度，指定百分比宽度。或者width:auto 3. 字体不使用绝对大小px，使用相对大小em 4. 流式布局。让各个区块的位置都是浮动的，不是固定不变的。 浮动的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的出现。 5. 选择加载CSS 自动探测屏幕宽度，然后加载相应的CSS文件

@import url(“tinyScreen.css”) screen and (max-device-width: 400px);

回到顶部
105. 隐藏页面中某个元素的方法
• display:none;
• visibility:hidden;
• opacity: 0;
• position移动到外部
• z-index涂层遮盖

106.displaydisplay:table 和 本身的table有什么区别？
display:table; 的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。
为什么不用table系元素，取而代之用div+css？

1. 用DIV+CSS编写出来的文件k数比用table写出来的要小；
2. table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示；
3. 非表格内容用table来装，不符合标签语义化要求，不利于SEO
4. table的嵌套性太多，用DIV代码会比较简洁
5. 实现三栏布局
   • 方法一：左右浮动布局
   这种布局方式，必须先写浮动部分，最后再写中间部分，否则右浮动块会掉到下一行。
   •
   o 浮动布局优点：就是比较简单，兼容性也比较好。
   o 浮动布局缺点：具是有局限性的，浮动元素是脱离文档流，会带来很多问题，比如父容器高度塌陷等。

• 方法二：绝对定位布局
•
o 绝对定位布局优点:快捷以及设置简单，而且也不容易出问题。
o 绝对定位布局缺点:容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。

• 方法三：flex布局
需要注意要将中间块放在前面，通过order来控制位置，实际高度会根据内容自适应，三栏高度统一。对父元素用display: flex之后子元素的宽度会失效，也就是无法设置子元素的宽度，可以通过改变flex值来改变宽度。
•
o Flex布局的优点：在移动端比较常见，布局灵活，兼容性也还可以，基本能满足大多数需求。
o Flex布局的缺点: IE10才开始支持

• 方法四：Grid布局
•
o Grid布局优点:创建网格布局最强大和最简单的工具。实际高度会根据内容自适应，三栏高度统一。
o Grid布局缺点：唯一的缺点就是兼容性不太好。

• 方法五：表格布局
•
o 表格布局优点：兼容性很好，在Flex布局不兼容的时候（一般情况下很少不兼容），可以尝试表格布局。当内容溢出时会自动撑开父元素。
o 表格布局缺点:
o 无法设置栏边距
o 对seo不友好
o 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。

108. CSS3有哪些新特性？
     1.CSS3边框：
     • border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;
     • box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
     • border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round;
     　　2.CSS3背景：
     • background-size： 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
     • background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
     　　3.CSS3文字效果：
     • text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
     • word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}
     　　4.CSS3 2D转换：
     　　transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
     • translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
     • rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
     • scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
     • skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度。
     • matrix() :
     matrix() 方法把所有 2D 转换方法组合在一起。
     matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
     　　5.CSS3 3D转换：
     • rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg);
     • rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg);
     　　6.CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。
     　　7.CSS3动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
     　　8.CSS3多列：
     • column-count：属性规定元素应该被分隔的列数。
     • column-gap：属性规定列之间的间隔。
     • column-rule ：属性设置列之间的宽度、样式和颜色规则。
     　　9.CSS3用户界面：
     • resize：属性规定是否可由用户调整元素尺寸。
     • box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。
     • outline-offset ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
     10.CSS3新增伪类有那些?
     p:first-of-type 选择属于其父元素的首个元素
     p:last-of-type 选择属于其父元素的最后元素
     p:only-of-type 选择属于其父元素唯一的元素
     p:only-child 选择属于其父元素的唯一子元素
     p:nth-child(2) 选择属于其父元素的第二个子元素
     :enabled :disabled 表单控件的禁用状态。
     :checked 单选框或复选框被选中。
     109、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
     该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；
     而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
     试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
     110、absolute的containing block计算方式跟正常流有什么不同？
     无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
109. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
110. 否则,则由这个祖先元素的 padding box 构成。
     如果都找不到，则为 initial containing block。
     补充：
111. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
112. absolute: 向上找最近的定位为absolute/relative的元素
113. fixed: 它的containing block一律为根元素(html/body)
     111、CSS里的visibility属性有个collapse属性值？在不同浏览器下什么区别？
     当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
114. chrome中，使用collapse值和使用hidden没有区别。
115. firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
     112、position跟display、overflow、float这些特性相互叠加后会怎么样？
     display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
     类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
     113、上下margin重合的问题
     在重合元素外包裹一层容器，并触发该容器生成一个BFC。
     例子：
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20

.aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; height: 200px; background: #fcc; } .text{ /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。 } 114、移动端的布局用过媒体查询吗？ 通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。 1. 里边

1
122、视差滚动效果？
视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

1. CSS3实现
   优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
2. jQuery实现
   通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
   优点：能兼容到各个版本的，效果可控性好
   缺点：开发起来对制作者要求高
3. 插件实现方式
   例如：parallax-scrolling，兼容性十分好
   123、怎么让Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
124、让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
position:fixed;在android下无效怎么处理？

125.使用 CSS 预处理器吗？解释下
Less sass

126、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
127、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：

1. 可以将
2. 代码全部写在一排
3. 浮动li中float：left
4. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
   128、display:inline-block 什么时候会显示间隙？
5. 有空格时候会有间隙 解决：移除空格
6. margin正值的时候 解决：margin使用负值
7. 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
   129、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
   外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
   130、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
8. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
9. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
10. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
11. webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
    131、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
    参数是scroll时候，必会出现滚动条。
    参数是auto时候，子元素内容大于父元素时出现滚动条。
    参数是visible时候，溢出的内容出现在父元素之外。
    参数是hidden时候，溢出隐藏。