两栏布局,DPI,Attribute / property,流式布局和响应式布局，BFC,雪碧图 （ 精灵图 ），SVG，浏览器兼容问题，“::before”和“:after”中的双冒号和单冒号的区别
两栏布局
1 margin-bottom和padding-bottom
2 table-row和table-cell
3 flex布局
DPI（移动端）
Dpi:每英寸包含点的数量(dots per inch)
普通屏幕通常包含96dpi,一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi(即2dppx),打印时一般会需要更大的dpi;
1dppx=96dpi 1dpi约等于0.39dpcm 1dpcm约等于2.54dpi
1in =2.54cm=25.4mm=101.6q=72pt=6pc=96px;
支持IE9+ firefox3.5+ chrome29.0+
Attribute / property
Property 它是DOM中的属性，是javascript里边的对象
Attribute 它是HTML标签上的特性，它的值只能够是字符串
流式布局和响应式布局
| 流式布局 | 响应式布局 |
|---|---|
| 也叫fluid,当上面一行的空间不够容纳新的TextView时候才开辟下一行的空间，场景：主要用于关键词搜索或者热门标签等场景；他主要是按照页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变,使用%百分比定义宽度，高度大都是用px来固定，可以根据可视区域和父元素的实时尺寸来调整，尽可能适应各种分辨率 | 主要是实现不同屏幕分辨率的终端上浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验；首先设置meta标签，通过媒体查询来设置样式Media Queries,然后再设置多种试图宽度 |
BFC
BFC：简单说，它是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用
如何创建BFC：当一个HTML元素满足下面条件的任何一点，都可以产生BFC,常见的，float的值不为‘none’，overflow的值不为‘visible’,display的值为‘table-cell’,‘table-caption’,or‘inline-block’中的任何一个，position的值不为‘static’或‘relative’中的任何一个创建一个BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC仍然属于文档中的普通流
雪碧图 （ 精灵图 ）
是把网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量，该图片使用css background和background-position属性渲染，这也就意味着你的标签变得更复杂了，图片是在css中定义，并非在标签中，优点：减少加载网页图片时对服务器的请求次数，可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
SVG
SVG它是可伸缩矢量图形，用来定义用于网络的基于矢量的图形，图形在放大或者改变尺寸的情况，其图形质量不会有所损失。
33. 工作中遇到的浏览器兼容问题有哪些？你都知道哪些常用的HACK技巧？
浏览器兼容问题
1：不同浏览器的默认初始值不同。
解决方法：引入全局控制样式，或者使用第三方
2：块属性标签float后，又有横行的margin的情况下，在IE6显示margin比设置的大。
解决方法：在float的标签样式控制中加入display:inline,将其转化为行内属性。
3：设置小于10px高度标签，在IE6,7,无法正常显示设置高度。
解决方法：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度
4：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
解决方法：在display:block;后面加入display:inline;display:table;
5：图片默认有间距。
解决方法：使用float属性为img布局。
6：标签最低高度设置min-height不兼容。
解决方法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
常用的HACK技巧
Ie浏览器hack如下
_nowamagic:1px;-----------ie6 *nowamagic:1px;-----------ie7 nowamagic:1px\0;----------ie89 nowamagic:1px\9\0;--------ie9 :root nowamagic:1px; ----ie9
Firefox 与 Chrome 的 Hack
Firefox:@-moz-document url-prefix() /写在选择器外层时（只可写在此处）：Firefox only/
Chrome:@media screen and (-webkit-min-device-pixel-ratio:0) /写在选择器外层时（只可写在此处）：Chrome only/
“::before”和“:after”中的双冒号和单冒号的区别
如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全