文章目录
1. 主流浏览器的内核分别是什么？2. 每个HTML文件开头都有``，它的作用是什么？3. div+css的布局较table布局有什么优点？3.1. div+css布局的好处：3.2. table布局的好处
4. img的alt属性与title属性有何异同4.1 区别一：4.2 区别二：
5. strong标签与em标签的异同6. 渐进增强和优雅降级之间的不同6.1渐进增强（progressive enhancement）6.2优雅降级( graceful degradation)
7. CSS3 新增伪类举例：8. 网页标准和标准制定机构的意义9. 简述一下 src与 href 的区别10. 网页制作会用的图片格式有哪些11. 微格式，前端中怎么考虑微格式12. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。13. 你如何理解 HTML 结构的语义化？14. 以前端角度出发，有哪些注意事项有利于SEO?15. 对DOM设置CSS样式的方式有哪些？16. css选择器有哪些，选择器的权重的优先级17. css中，对DOM元素设置不显示的方式18. 超链接访问过后，link样式就不出现的问题是什么，如何解决19. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？20. 什么是外边距重叠？重叠的结果是什么？21. rgba()和opacity的区别22. css 中可以让文字在垂直和水平方向移动位置？23. 如何水平垂直居中一个元素24. 如何垂直居中一个img?25. px 和 em 的区别。26. Sass、LESS 是什么？大家为什么要使用他们？27. CSS 中 link 和@import 的区别是：28. 简介盒子模型：29. 为什么要初始化样式？30. 面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？31. html 常见兼容性问题？32. 对 WEB 标准以及 W3C 的理解与认识33. 常见行内元素有哪些?块级元素有哪些?34. 前端页面的基本构成，分别是?作用是?35. 列出 display 的值，并说明他们的作用36. 列出position的值，注意他们的定位参照原点37. i标签与em标签和b标签与strong标签的区别38. 浏览器标准模式和怪异模式?38.1. 定义：38.2. 区别：
39. 从浏览器地址栏输入url到显示页面的步骤40. 写出常用的css传统布局42. title与h1的区别、b与strong的区别、i与em的区别？42.1. title与h1的区别：42.2. b与strong的区别：
41. 简单描述一下什么是flex布局及常用属性说明42.3. i与em的区别：
43. 面试题：CSS哪些属性可以继承？44. 面试题：用CSS画一个三角形45. 面试题：清除浮动有哪些方式？45.1. 清除浮动的技巧45.2. Overflow方法45.3. 空div标签45.4. :after伪元素方法
46. 面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？47. 面试题：css sprite是什么,有什么优缺点47.1. CSS Sprites的优点47.2. CSS Sprites的缺点
48. 面试题：line-height和height有什么区别？
1. 主流浏览器的内核分别是什么？
IE：trident内核 [‘traidnt ]Firefox：gecko 内核?[?ɡek??]Safari：webkit 内核Chrome,Opera：Blink内核(基于webkit)
2. 每个HTML文件开头都有，它的作用是什么？
声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面）严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容不存在或格式不正确会导致文档以混杂模式呈现
3. div+css的布局较table布局有什么优点？
3.1. div+css布局的好处：
符合W3C标准，结构、样式和行为分离，代码结构清晰明了，带来足够好的可维护性。布局精准，网站版面布局修改简单。加快了页面的加载速度（最重要的）。用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
3.2. table布局的好处
容易上手。可以形成复杂的变化，简单快速。表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
4. img的alt属性与title属性有何异同
4.1 区别一：
title ： 鼠标移入到图片显示的值 alt ： 图片无法加载时显示的值
4.2 区别二：
在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。
5. strong标签与em标签的异同
strong:粗体强调标签，强调，表示内容的重要性 em:斜体强调标签，更强烈强调，表示内容的强调点
6. 渐进增强和优雅降级之间的不同
6.1渐进增强（progressive enhancement）
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、 交互等改进和追加功能达到更好的用户体验。
渐进增强的观点关注内容本身
6.2优雅降级( graceful degradation)
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
优雅降级的观点更关注主流浏览器，一些特定的浏览器，除修复较大的错误外，其他的差异将会被直接忽略
7. CSS3 新增伪类举例：
p:first-of-type 选择属于其父元素的首个 元素的每个 元素。p:last-of-type 选择属于其父元素的最后 元素的每个 元素。p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。p:only-child 选择属于其父元素的唯一子元素的每个 元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。:enabled、:disabled 控制表单控件的禁用状态。:checked，单选框或复选框被选中。
8. 网页标准和标准制定机构的意义
网页标准的制定，使得web发展的更健康，提高网站的易用性。开发者遵循统一的标准，降低了开发难度和开发成本SEO优化网页也会更加方便，不会因为滥用代码出现各种bug和安全问题。
9. 简述一下 src与 href 的区别
src 用于替换当前元素href 用于在当前文档和引用资源之间确立联系。Src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。例如：js脚本，img图片，frame等。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，这也是为什么将js 脚本放在底部而不是头部。href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
10. 网页制作会用的图片格式有哪些
Png，jpeg，gif，svg，webp，webp，base64
png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。gif:一般是做动图的。webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。
11. 微格式，前端中怎么考虑微格式
微格式（Microformats）是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式 作用： 在捉取Web内容时，能够更为准确地识别内容块的语义； 对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。 应用例子： 当用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示我“是否保存到通讯录”，于是我很经松地保存了我所需要的信息
12. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，滚动到相应位置才加载图片。图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
13. 你如何理解 HTML 结构的语义化？
在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:裸奔时也好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），更好的方式来渲染网页；便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
14. 以前端角度出发，有哪些注意事项有利于SEO?
维护网站，提高内容质量，保持更新 网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。 控制首页链接数量,要适中 导航优化： a:尽量采用文字方式 b:搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性 c:应该加上面包屑导航 控制页面的大小:减少http请求，提高网站的加载速度 适量的关键词和网页描述 itle标题，强调重点即可， meta keywords标签：关键词，列重要关键字即可 meta description标签：网页描述，要高度概括 (body中的标签：尽量让代码语义化 a标签：页内链接，要加 “title” 属性加以说明 mg应使用 “alt” 属性加以说明 strong、em标签 : 需要强调时使用 巧妙利用CSS布局 谨慎使用 display：none 保留文字效果
15. 对DOM设置CSS样式的方式有哪些？
外部样式表，引入一个外部 css 文件内部样式表，将 css 代码放在 标签内部，
16. css选择器有哪些，选择器的权重的优先级
选择器类型
ID #idclass .class标签 p通用 *属性 [type=“text”]伪类 a: hover伪元素 li: nth - child子选择器（ul < li） 、相邻选择器（h1 + p）、后代选择器（li a）
权重计算规则 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。 !important 比 内联优先级高
第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为0010。第四等：代表标签和伪元素选择器，如div p，权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。相同权重，优先级就近原则，样式定义最近者为准,载入样式以最后载入的定位为准;
17. css中，对DOM元素设置不显示的方式
display:none；隐藏，并且不占位 ，宽高各种属性值，都‘丢失’visibility：hidden;隐藏，占位，仅是视觉上‘看不见’width:0;height:0; 通过设置元素的大小使元素不显示overflow:hidden;通过设置元素的大小使元素不显示
18. 超链接访问过后，link样式就不出现的问题是什么，如何解决
问题是：a标签的四种状态，排序出问题了。 正确排序：L-V-H-A love hate原则，即l（link）ov（visited）e h（hover）a（active）te。 a:link 普通的、未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方 a:active 链接被点击的时刻
19. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
块级元素(block)特性： 总是独占一行；默认宽度是父元素100%，高度被内容撑开； 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性： 宽度(width)、高度(height)、内外边距的上下都不可设置，内外边距的左右可设置，其大小就是里面文字或图片的大小。 行内块(inline-block) 元素 拥有内在尺寸，可设置高宽,但不会自动换行 常用行内块元素： 、 、 、 、
20. 什么是外边距重叠？重叠的结果是什么？
外边距重叠就是 margin-collapse。 折叠外边距 :在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 解决外边距重叠的问题： 开启元素的BFC属性，在元素的前面加一个空的table
21. rgba()和opacity的区别
Opacity
样式名，可以进行单独设置，后面跟的样式值是0-1之间作用于整个元素，以及元素内的所有内容的透明度(元素会继承其属性) rgba()样式值，写在固定样式后面的，例如背景色，字体颜色等作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)
22. css 中可以让文字在垂直和水平方向移动位置？
? 垂直方向：line-height 设置跟高度一致 ? 水平方向：text-align center
23. 如何水平垂直居中一个元素
方法一：
.child{
height: 100px;
position: absolute;//父元素相对定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
方法二：
.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
方法三：
child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
方法四：
father{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
方式五
father{
width: 500px;
height: 500px;
border: 1px solid red;
/* 将元素转成表格单元格显示 */
display: table-cell;
vertical-align: middle;
text-align: center;
}
子元素需设置
{
display: inline-block;
vertical-align: middle;//消除行内块元素三像素问题
}
24. 如何垂直居中一个img?
方法一：的容器
.img-container{
width: 500px;
height: 500px;
border: 1px solid red;
/* 将元素转成表格单元格显示 */
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法二：
.img-container{
display: flex;
justify-content: center;
align-items: center;
}
25. px 和 em 的区别。
px 和 em 都是长度单位， px 的值是固定的，指定是多少就是多少，计算比较容易。 em 得值不是固定的，并且 em 相对于当前字体大小改变，若自身没有字体大小，则继承祖先元素的字体大小。 浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。
26. Sass、LESS 是什么？大家为什么要使用他们？
? CSS 预处理器。是 CSS 上的一种抽象层。是一种特殊的语法/语言编译成 CSS。 优势：
结构清晰，便于扩展。减少了重复代码的编写，增加了变量等的功能可以方便的屏蔽浏览器私有语法差异。可以轻松实现多重继承。完全兼容CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。
27. CSS 中 link 和@import 的区别是：
Link 属于 html 标签，而@import 是 CSS 中提供的在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别，link 是 html 标签，不存在浏览器兼容性问题Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）
28. 简介盒子模型：
? 标准的 W3C 盒子模型模型 ，css为了更好的布局，将页面中所有的元素形状都统一为矩形。 盒模型包括四个方面：内容、内边距、边框、外边距（不计入盒子实际大小）
29. 为什么要初始化样式？
? 由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同 浏览器之间的显示差异，一般引入重制样式表，常用的有resize.css,normal.css等
30. 面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？
? BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒内元素的布局不会影响盒子外面的元素。可以解决两个相邻的盒子垂直外边距重叠的问题 ? 如何开启BFC？
1. float的值不是none。
2. position的值不是static或者relative。
3. display的值是inline-block、table-cell、flex
4. overflow的值不是visible
31. html 常见兼容性问题？
? 浏览器默认的margin和padding不同 ? **解决方案：**加一个全局的 *{margin:0;padding:0;} 来统一
32. 对 WEB 标准以及 W3C 的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率。 使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问。 更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
33. 常见行内元素有哪些?块级元素有哪些?
? CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认 的 display 值 块级元素(默认值是‘block’) ： div p h1-h6 ul ol header main footer 行内元素(默认值是‘inline’) : a em span strong del strong
34. 前端页面的基本构成，分别是?作用是?
? 结构层 Html ? 表现层 CSS ? 行为层 js
35. 列出 display 的值，并说明他们的作用
? display： ? none：取消样式 ? block：块级元素 ? inline：行内元素 ? inline-block：行内块元素 ? normal：默认样式 ? flex：弹性布局
36. 列出position的值，注意他们的定位参照原点
absolute 生成绝对定位的元素，相对于离最近的包含块元素进行定位。 fixed 生成固定定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 static 元素出现在正常的流中 Sticky 开启粘滞定位
37. i标签与em标签和b标签与strong标签的区别
b标签和strong标签都可以对文本进行加粗i标签和em标签同样也可以对文本进行倾斜但是strong和em有强调的作用，有利于SEO（搜索引擎优化），所以日常工作中建议用strong和em标签。
38. 浏览器标准模式和怪异模式?
38.1. 定义：
标准模式页面按照HTML,CSS的定义渲染，怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式。
38.2. 区别：
两者盒子模型 渲染模式等的不同
39. 从浏览器地址栏输入url到显示页面的步骤
浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；载入解析到的资源文件，渲染页面，完成。
40. 写出常用的css传统布局
表格布局浮动布局，浮动布局主要采用float和clear两个属性来构建。定位布局，position属性来实现元素的绝对定位和相对定位。流体布局（百分比布局）弹性布局
42. title与h1的区别、b与strong的区别、i与em的区别？
42.1. title与h1的区别：
定义： title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么 h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么 区别： title他是显示在网页标题上、h1是显示在网页内容上 title比h1添加的重要 (title > h1 ) ==》对于seo的了解 场景： 网站的logo都是用h1标签包裹的
42.2. b与strong的区别：
定义： b：实体标签，用来给文字加粗的。 strong：逻辑标签，用来加强字符语气的。 区别： b标签只有加粗的样式，没有实际含义。 strong表示标签内字符比较重要，用以强调的。 题外话：为了符合css3的规范，b尽量少用该用strong就行了。
41. 简单描述一下什么是flex布局及常用属性说明
lex-direction：排列方向 flex-direction: row | row-reverse | column | column-reverse flex-wrap如果一条轴线排不下，如何换行 flex-wrap: nowrap | wrap | wrap-reverse flex-flow属性（上述两个组合） flex-flow: flex-direction, flex-wrap flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap justify-content属性（在主轴上的对齐方式）横向 justify-content: flex-start | flex-end | center | space-between | space-around align-items属性（在交叉轴上如何对齐）纵向 align-items: flex-start | flex-end | center | baseline | stretch flex-grow属性（放大比例，默认为0，即如果存在剩余空间，也不放大） flex-grow: 默认为0 flex-shrink属性（缩小比例，默认为1，即如果空间不足，则缩小） flex-shrink: 默认为1 flex-basis属性（在分配多余空间之前，项目占据的主轴空间） flex-basis: | auto flex属性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 flex: auto; （1 1 auto） flex: none; （0 0 auto）
42.3. i与em的区别：
定义： i:实体标签，用来做文字倾斜的。 em：是逻辑标签，用来强调文字内容的 区别： i只是一个倾斜标签，没有实际含义。 em表示标签内字符重要，用以强调的。 场景： i更多的用在字体图标，em术语上（医药，生物）。
43. 面试题：CSS哪些属性可以继承？
? 可继承： font-size font-family color; ? 不可继承 ：border padding margin width height ;
44. 面试题：用CSS画一个三角形
Width：0；
Height：0；
Border：50px solid yellowgreen；
border-color：transparent transparent transparent yellowgreen
45. 面试题：清除浮动有哪些方式？
45.1. 清除浮动的技巧
当我们明确的知道浮动元素位置时，我们可以简单的使用clear:both。但明确的知道浮动元素位置这种情况太过理想，我们还需要在我们的工具箱中有更多的清除浮动工具。
常用有：
Overflow伪元素:after空div标签
45.2. Overflow方法
溢出overflow方法依赖父元素上设置溢出css属性。如果此属性在父元素上设置为 auto 或 hidden，父级将扩展以包含浮动，有效的为后续的元素清除浮动。这种方法也许表现的有更好的语义，因为它可能不需要额外的元素。但是，如果您发现自己添加了一个新的 div 来应用它，它与空 div 方法一样没有语义，而且适应性较差。还要记住的是，overflow属性是不是专为清除浮动，要小心，不要隐藏内容或触发不必要的滚动条。
45.3. 空div标签
顾名思义，就是一个空的div标签，div标签当中不放任何东西
。有时候你可能会见到一个标签货一些其它块级元素。不过div标签是最常见的，因为它本身不具有浏览器默认样式，没有任何特殊的语义和功能，不像p标签。不过使用这种方法会受到一些推崇HTML标签语义化开发人员的藐视，因为它的存在对页面没有任何的意义，纯粹是多余的，当然，从严格意义上讲，他们的看法是对的，不过它可以正确的完成目的并且不会影响到其它标签。
完整的描述应该是——在浮动父元素结束标签之前插入清除浮动的块级元素。假设空块级元素为
。我们还需要为其设置清楚浮动的CSS属性.emptyClear{
clear:both;
}
在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。
45.4. :after伪元素方法
最简单方便的方法是使用巧妙的 CSS 伪选择器 (:after) 来清除浮动。不用在父标签设置overflow属性，而是对父元素添加一个classclearfix类，然后在CSS当中声明它就好了。
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
这将会在内容中添加一个小的.从视图中隐藏，从而清除浮父元素之后。 这还不是全部，因为需要使用额外的代码来适应旧浏览器。
46. 面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？
更多使用偶数字体，一则设计师给的大部分是偶数字体，二则偶数字体容易进行文本对齐，三则浏览器渲染，比较容易渲染
47. 面试题：css sprite是什么,有什么优缺点
通常被意译为“CSS图像拼合”或“CSS贴图定位”，或者称之为”雪碧图“
47.1. CSS Sprites的优点
利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这也是CSS Sprites最大的优点；CSS Sprites能减少图片的字节，曾经多次比较过，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
47.2. CSS Sprites的缺点
在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂； CSSSprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用RIA开发了一个CSS Sprites样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！ CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。
48. 面试题：line-height和height有什么区别？
Line-height是设置行高，每一行的行高 height是设置元素高度，整个的高度
相关阅读
您阅读本篇文章共花了：
发表评论