CSS Sprite 是什么，谈谈这个技术的优缺点。
加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无计算机统一都按 byte 计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可越大。
- 利用 CSS Sprites 能很好地减少了网页的 http 请求，从而大大的提高了页面的性能，这也是 CSS Sprites 的优点，也是其被广泛传播和应用的主要原因；
- CSS Sprites 能减少图片的字节，曾经比较过多次 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的和。
- 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素名，从而提高了网页的制作效率。
- 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起方便。
诚然 CSS Sprites 是如此的强大，但是也存在一些不可忽视的缺点，如下：
- 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容背景断裂；
- CSS Sprites 在开发的时候比较麻烦，你要通过 photoshop 或其他工具测量计算每一个背景单元的精确位是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用 RIA 开发了一个 CSS Sprites 样式生成工具，虽然些使用上的不灵活，但是已经比 photoshop 测量来的方便多了，而且样式直接生成，复制，拷贝就 OK！
- CSS Sprites 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的好不要动，这样避免改动更多的 css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字加了，还要改动 css。
CSS Sprites 非常值得学习和应用，特别是页面有一堆 ico（图标）。总之很多时候大家要权衡一下再决定是不是应用 CSS Sprites。
以 CSS3 标准定义一个 webkit 内核浏览器识别的圆角（尺寸随意）
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;。
优先级算法如何计算？内联和 important 哪个优先级高 ？
- 优先级就近原则，样式定义最近者为准
- 载入样式以最后载入的定位为准
- 优先级为 !important > [ id > class > tag ]
- Important 比内联优先级高
css 的基本语句构成是 ？
回答：选择器、属性和属性值。
如果让你来制作一个访问量很高的大型网站，你会如何来管理所有 CSS 文件、JS 与图片？
回答：涉及到人手、分工、同步；
- 先期团队必须确定好全局样式（globe.css），编码模式 (utf-8) 等
- 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
- 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
- 页面进行标注（例如页面模块开始和结束）；
- CSS 跟 HTML 分文件夹并行存放，命名都得统一（例如 style.css）
- JS 分文件夹存放，命名以该 JS 功能为准
- 图片采用整合的 png8 格式文件使用，尽量整合在一起使用，方便将来的管理。
CSS 选择符有哪些 ？哪些属性可以继承 ？优先级算法如何计算 ？新增伪类有那些 ？
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，ul，li，dl，dd，dt；
不可继承的样式
border padding margin width height
事实上，宽度也不是继承的，而是如果你不指定宽度，那么它就是 100%。由于你子 DIV 并没有指定宽度，那它就是 100%，也就是与父 DIV 同宽，但这与继承无关，高度自然也没有继承一说。
优先级算法
- 优先级就近原则，同权重情况下样式定义最近者为准;
- 载入样式以最后载入的定位为准;
- 优先级为: !important > id > class > tag , important 比 内联优先级高
CSS3 新增伪类举例
- :root 选择文档的根元素，等同于 html 元素
- :empty 选择没有子元素的元素
- :target 选取当前活动的目标元素
- :not(selector) 选择除 selector 元素意外的元素
- :enabled 选择可用的表单元素
- :disabled 选择禁用的表单元素
- :checked 选择被选中的表单元素
- :after 选择器在被选元素的内容后面插入内容
- :before 选择器在被选元素的内容前面插入内容
- :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n
- :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n，从后向前数
- :nth-child(odd) 奇数
- :nth-child(even) 偶数
- :nth-child(3n+1)
- :first-child
- :last-child
- :only-child
- :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第 n
- :nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第 n，从后向前数
- :nth-of-type(odd)
- :nth-of-type(even)
- :nth-of-type(3n+1)
- :first-of-type
- :last-of-type
- :only-of-type
- ::selection 选择被用户选取的元素部分
- :first-line 选择元素中的第一行
- :first-letter 选择元素中的第一个字符
CSS3 有哪些新特性 ?
- CSS3 实现圆角（border-radius:8px）
- 阴影（box-shadow:10px）
- 对文字加特效（text-shadow）
- 线性渐变（gradient）
- 旋转、缩放、定位、倾斜
transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
- 增加了更多的 CSS 选择器
- 多背景 rgba
一个满屏 品字布局 如何设计 ？
第一种方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>满屏品字布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%;/*此设置非常关键，因为默认的body，HTML高度为0，所以后面设置的div的高度无法用百分比显示*/ } .header{ height:50%; /*此步结合html,body高度为100%，解决元素相对窗口的定位问题*/ width: 50%; background: #ccc; margin:0 auto; } .main{ width: 100%; height: 50%; background: #ddd; } .main .left,.main .right{ float: left;/*采用float方式，对元素进行左右定位*/ width:50%;/*此步解决元素相对窗口的定位问题*/ height:100%;/*此步解决元素相对窗口的定位问题*/ background: yellow; } .main .right{ background: green; } </style> </head> <body> <div class="header"></div> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
效果如下：
为什么要初始化 CSS 样式 ?
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
初始化 CSS 样式例子
html, body { padding: 0; margin: 0; } ...
collapse、overflow、float 这些特性相互叠加后会怎么样？
margin collapse 我觉得这里的意思应该是 Collapsing margins，即外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。
其中所说的 margin 毗邻，可以归结为以下两点：
- 这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
- 这些 margin 都处于普通流中。
- 两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。
- 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠.
- 创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠
请解释一下CSS3 的 Flexbox（弹性盒布局模型），以及适用场景 ？
http://www.ruanyifeng.com/blo...
任何一个容器都可以指定为 Flex 布局，行内元素也可以使用 Flex 布局。
注意：设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
flex 布局最常用的是什么场景 ？
一般实现垂直居中是一件很麻烦的事，但 flex 布局轻松解决。
.demo { display: flex; justify-content: center; align-items: center; }
用纯 CSS 创建一个三角形的原理是什么？
把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
absolute 的 containing block(容器块) 计算方式跟正常流有什么不同 ？
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
- 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin，border 外的区域) 的最小矩形；
- 否则，则由这个祖先元素的 padding box 构成。
- 如果都找不到，则为 initial containing block。
补充：
- static / relative：简单说就是它的父元素的内容框（即去掉 padding 的部分）
- absolute: 向上找最近的定位为 absolute / relative 的元素
- fixed: 它的 containing block 一律为根元素(html / body)，根元素也是 initial containing block
对 BFC 规范(块级格式化上下文：blockformatting context)的理解 ？
W3C CSS 2.1 规范中的一个概念，它是一个独立容器，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
- 一个页面是由很多个 Box 组成的，元素的类型和 display 属性，决定了这个 Box 的类型。
- 不同类型的 Box，会参与不同的 Formatting Context（决定如何渲染文档的容器），因此 Box 内的元素会以不同的方式渲染，也就是说 BFC 内部的元素和外部的元素不会互相影响。
用 position: absolute 跟用 float 有什么区别吗 ？
- 都是脱离标准流，只是 position: absolute 定位用的时候，位置可以给的更精确(想放哪就放哪)，而 float 用的更简洁，向右，左，两个方向浮动，用起来就一句代码。
- 还有就是 position: absolute 不管在哪个标签里，都可以定位到任意位置，毕竟 top，left，bottom，right 都可以给正值或负值；
- float 只是向左或向右浮动，不如 position: absolute 灵活，浮动后再想改变位置就要加各种 margin，padding 之类的通过间距的改变来改变位置，我自身觉得这样的话用起来不方便，也不太好。
- 但在菜单栏，或者一些图标的横向排列时，用起来特别方便，一个 float 就解决了，而且每个元素之间不会有任何间距(所以可以用 float 消除元素间的距离)；
svg 与 convas 的区别 ？
- svg 绘制出来的每一个图形的元素都是独立的 DOM 节点，能够方便的绑定事件或用来修改，而 canvas 输出的是一整幅画布；
- svg 输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而 canvas 输出标量画布，就像一张图片一样，放大会失真或者锯齿。
何时应当时用 padding 和 margin ？
何时应当使用 margin
- 需要在 border 外侧添加空白时。
- 空白处不需要背景（色）时。
- 上下相连的两个盒子之间的空白，需要相互抵消时。
如 15px + 20px 的 margin，将得到 20px 的空白。
何时应当时用 padding
- 需要在 border 内测添加空白时。
- 空白处需要背景（色）时。
- 上下相连的两个盒子之间的空白，希望等于两者之和时。
如 15px + 20px 的 padding，将得到 35px 的空白。
个人认为：margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的间隔，让内容（文字）与（包裹）元素之间有一段 呼吸距离。
文字在超出长度时，如何实现用省略号代替 ? 超长长度的文字在省略显示后，如何在鼠标悬停时，以悬浮框的形式显示出全部信息 ?
注意：设置 width，overflow: hidden, white-space: nowrap (规定段落中的文本不进行换行), text-overflow: ellipsis，四个属性缺一不可。这种写法在所有的浏览器中都能正常显示。
CSS 里的 visibility 属性有个 collapse 属性值 ？在不同浏览器下有什么区别 ？
Collapse
- 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用。
- 如果此值被用在其他的元素上，会呈现为 hidden。
- 当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。
- chrome中，使用 collapse 值和使用 hidden 没有区别。
- firefox，opera 和 IE，使用 collapse 值和使用 display：none 没有什么区别。
position 跟 display、overflow、float 这些特性相互叠加后会怎么样 ？
- display 属性规定元素应该生成的框的类型；
- position 属性规定元素的定位类型；
- float 属性是一种布局方式，定义元素在哪个方向浮动。
- 类似于优先级机制：position：absolute / fixed 优先级最高，有他们在时，float 不起作用，display 值需要调整。float 或者 absolute 定位的元素，只能是块元素或表格。
对 BFC 规范(块级格式化上下文：block formatting context) 的理解 ？
BFC 规定了内部的 Block Box 如何布局。
定位方案：
- 内部的 Box 会在垂直方向上一个接一个放置。
- Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
- 每个元素的 margin box 的左边，与包含块 border box 的左边相接触。
- BFC 的区域不会与 float box 重叠。
- BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算 BFC 的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发 BFC：
- 1、根元素，即 html
- 2、float 的值不为 none（默认）
- 3、overflow 的值不为 visible（默认）
- 4、display 的值为 inline-block、table-cell、table-caption
- 5、position 的值为 absolute 或 fixed
浏览器是怎样解析 CSS 选择器的 ？
- CSS 选择器的解析是从右向左解析的。
- 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
- 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
- 两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
- 而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。
- 在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
元素竖向的百分比设定是相对于容器的高度吗 ？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的。
全屏滚动的原理是什么 ？用到了 CSS 的哪些属性 ？
原理
- 有点类似于轮播，整体的元素一直排列下去，假设有 5 个需要展示的全屏页面，那么高度是 500%，只是展示 100%，剩下的可以通过 transform 进行 y 轴定位，也可以通过
margin-top 实现。 - overflow：hidden；transition：all 1000ms ease；
什么是响应式设计 ？响应式设计的基本原理是什么 ？如何兼容低版本的 IE ？
- 响应式网站设计( Responsive Web design ) 是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
- 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
- 页面头部必须有 meta 声明的 viewport。
<meta name="viewport" content="” width="device-width" initial-scale="1" maximum-scale="1" user-scalable="no"/>
