请描述一下 CSS 选择器的优先级别顺序？
!import > 内嵌 > id > class > tag > *
就近原则，优先级就近原则，同权重情况下样式定义最近者为准;
双飞翼布局?
-- css --
.left,.right{ position: absolute; top: 0; width: 200px;}
.left { left: 0; }
.right {right: 0; }
.center { margin: 0 200px;}
-- html --
< div class="center" ></div>
< div class="left" ></div>
< div class="right" ></div>
"品"字形布局?
-- css --
header{ width:100%; height:40%; background: #e33;}
main{ width:100%; height: 60%; }
main:after{ content:""; display:table; clear:both; overflow:hidden }
.left, .right{ width:50%; height: 100%; float:left; background: #a23;}
.right{ background: #e11;}
-- html --
<header></header>
<main>
<div class="left"></div>
<div class="right"></div>
</main>
“圣杯”布局？
-- css --
body { min-width: 550px;}
main { padding-left: 200px; padding-right: 150px; }
.column { position: relative; float: left;}
#center { width: 100%;}
#left { width: 200px; right: 200px; margin-left: -100%;}
#right { width: 150px; margin-right: -150px;}
footer { clear: both;}
* html #left {left: 150px; /* IE6 Fix*/}
-- html --
<header></header>
<main>
<section id="center" class="column"></section >
<section id="left" class="column"></section >
<section id="right" class="column"></section >
</main>
<footer></footer>
请列举一些浏览器兼容性问题？以及提高性能方面的方案
兼容性
- 不加文档声明IE下会陷入怪异合模型解析；
- IE6 下高度小于 19px 的元素，高度会被当作 19px 处理（可利用 overflow 解决）；
- chrome 下字体大小小于 12px 时会被当作 12px 来处理 （目前只能截图处理）；
- 在 IE8 以前的 IE 中不识别 HTML5 新增的标签； （可利用 document.createElement 来创建该标签）；
- 在 IE6 下，块元素有浮动 ，左右的 margin 值会被放大成两倍（display:inline）；
- 在 IE6,7 下 li 本身没有浮动，但是内容浮动了，li 下边就会多出间隙( li 加浮动或 vertical-align:top )
优化
- 加载方面
- 慎用 @import：import 会使我们的 link 样式由原本的并发加载，变成异步加载；
- 压缩代码体积：
- 压缩代码，删除换行，多余的空格和注释；
- 合并重复代码，提高代码的通用性；
- 精简包含选择符，在使用包含选择的时候，尽量精简层级；
- 能使用复合样式时，尽量使用复合样式；
- 多利用继承，来精简样式；
- 优化请求
- 使用 css 精灵，减少图片个数和体积；
- 合理合并文件，精简外部文件个数；
- 对于不需要重复使用的图片，可适当使用 data Uri；
- 在设计统一的情况下，可使用 FontIcon 的方法，来统一整合页面上的图片；
- 渲染方面
- 涉及动画方面，尽量可以使用位移来解决，努力减少回流；
- 涉及动画方面，可以利用 3D，来进行 GPU 加速；
- 避免使用 table，为了减少回流；
- 避免 text-shadow 和 box-shadow 层级过多；
- 减少浮动和绝对定位的滥用；
- 不滥用 WEB 字体，在部分浏览器下会造成渲染阻塞；
- 其它性能方面
- 遵守盒模型规则
- 避免使用过多的长串选择器
- 不滥用浮动
- 不滥用web字体
- 不声明过多的font-size
- 标准化前缀
- 谨慎选择选择器
其实还有很多……懒得写了~~ ㄟ(▔,▔)ㄏ
用纯CSS创建一个三角形的原理是什么？
均分原理。把上、左、右三条边隐藏掉。
width:0;
height:0;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #c00;
font-size:0;
line-height:0;
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
给ul一个
font-size:0。行框的排列会受到中间空白（回车空格等等）的影响，这些空白也会被应用样式，占据空间。
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
- 在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。
- 在火狐浏览器、Opera和IE11里，使用 collapse 值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。
元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
CSS哪些属性可以继承？
- 可继承的样式：
font-size font-family color, UL LI DL DD DT;
- 不可继承的样式：
border padding margin width height ;
实现**不使用 border **画出1px高的线， 在标准模式与怪异模式下都能保持一致
height:1px;
overflow:hidden;
background:red
CSS3选择器有那些？
| 元素选择符 | 关系选择符 | 属性选择符 | 伪类选择符 | 伪对象选择符 |
|---|---|---|---|---|
| * | E F | E[att] | E:focus | E:first-letter |
| E | E>F | E[att="val"] | E:lang () | E:first-line |
| # | E+F | E[att~="val"] | E:not() | E:first-letter |
| .class | E~F | E[att^="val"] | E:root | E:before |
| --- | --- | E[att$="val"] | E:first-child | E:after |
| --- | --- | E[att*="val"] | E:last-child | E::selection |
| --- | --- | E[attI="val"] | E:on-child | ---- |
| --- | --- - | ---- | E:nth-child(n) | --- |
| --- | --- - | ---- | E:nth-last-child(n) | --- |
| --- | --- - | ---- | E:first-of-type | --- |
| --- | --- - | ---- | E:last-of-type | --- |
| --- | --- - | ---- | E:only-of-type | --- |
| --- | --- - | ---- | E:nth-of-type(n) | --- |
| --- | --- - | ---- | E:nth-last-of-type(n) | --- |
| --- | --- - | ---- | E:empty | --- |
| --- | --- - | ---- | E:checked | --- |
| --- | --- - | ---- | E:enabled | --- |
| --- | --- - | ---- | E:disabled | --- |
| --- | --- - | ---- | E:target | --- |
| --- | --- - | ---- | @page:first | --- |
| --- | --- - | ---- | @page:left | --- |
| --- | --- - | ---- | @page:right | --- |
请解释一下CSS3的Flexbox以及适用场景？
- 一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
- 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
- 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
- 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
- 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
- 在布局上有了比以前更加灵活的空间。
持续更新........................
部分摘录自 妙味课堂
