视差滚动效果 ？
视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢 来创建出令人惊叹的 3D 效果。
- CSS3 实现。
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
- jQuery 实现。
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。优点：能兼容到各个版本的，效果可控性好。缺点：开发起来对制作者要求高。
- 插件实现方式。
例如：parallax-scrolling，兼容性十分好。
::before 和 :after 中双冒号和单冒号有什么区别 ？解释一下这 2 个伪元素的作用
- 单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。
- ::before 就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于 dom 之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在 CSS2.1 里新出现的。
起初，伪元素的前缀使用的是单冒号语法，但随着 Web 的进化，在 CSS3 的规范里，伪元素的语法被修改成使用双冒号，成为 ::before、 ::after 。
怎么让 Chrome 支持小于 12px 的文字 ？
p { font-size: 10px; -webkit-transform: scale(0.8); // 0.8 是缩放比例 }
让页面里的字体变清晰，变细用 CSS 怎么做 ？
-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
如果需要手动写动画，你认为最小时间间隔是多久，为什么 ？
多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为：1/60＊1000ms ＝ 16.7ms。
有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另一个填满剩下的高度 ？
- 外层 div 使用 position：relative；
- 高度要求自适应的 div 使用 position: absolute; top: 100px; bottom: 0; left: 0
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp ？
- png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式。
优点是：压缩比高，色彩好。 大多数地方都可以用。
- jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在 www 上，被用来储存和传输照片的格式。
- gif 是一种位图文件格式，以 8 位色重现真色彩的图像。可以实现动画效果。
- webp 格式是谷歌在 2010 年推出的图片格式，压缩率只有 jpg 的 2/3，大小比 png 小了 45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和 opera 支持。
style 标签写在 body 后与 body 前有什么区别？
页面加载自上而下，当然是先加载样式。
写在 body 标签后，由于浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）
阐述一下CSS Sprites
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS 的 background-image，background-repeat，background-position 的组合进行背景定位。
利用 CSS Sprites 能很好地减少网页的 http 请求，从而大大的提高页面的性能；
CSS Sprites 能减少图片的字节。
用 css 实现左侧宽度自适应，右侧固定宽度 ？
1、标准浏览器的方法
当然，以不折腾人为标准的 w3c 标准早就为我们提供了制作这种自适应宽度的标准方法。
- 把 container 设为 display: table 并指定宽度 100%；
- 然后把 main + sidebar 设为 display: table-cell;
- 然后只给 sidebar 指定一个宽度，那么 main 的宽度就变成自适应了。
代码很少，而且不会有额外标签。不过这是 IE7 及以下都无效的方法。
.
container { display: table; width: 100%; } .main { display: table-cell; } .sidebar { display: table-cell; width: 300px; }
2、固定区域浮动，自适应区域不设置宽度但设置 margin
.container { overflow: hidden; *zoom: 1; } .sidebar { float: right; width: 300px; background: #333; } .main { margin-right: 320px; background: #666; } .footer { margin-top: 20px; background: #ccc; }
其中，sidebar 让它浮动，并设置了一个宽度；而 main 没有设置宽度。
大家要注意 html 中必须使用 div 标签，不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。
当然我们不能让它填满了，填满了它就不能和 sidebar 保持同一行了。我们给它设置一个 margin。由于 sidebar 在右边，所以我们设置 main 的 margin-right 值，值比 sidebar 的宽度大一点点——以便区分它们的范围，例子中是 320。
假设 main 的默认宽度是 100%，那么它设置了 margin 后，它的宽度就变成了 100% - 320，此时 main 发现自己的宽度可以与 sidebar 挤在同一行了，于是它就上来了。
而宽度 100% 是相对于它的父标签来的，如果我们改变了它父标签的宽度，那 main 的宽度也就会变——比如我们把浏览器窗口缩小，那 container 的宽度就会变小，而 main 的宽度也就变小，但它的实际宽度 100% - 320 始终是不会变的。
这个方法看起来很完美，只要我们记得清除浮动(这里我用了最简单的方法)，那 footer 也不会错位。而且无论 main 和 sidebar 谁更长，都不会对布局造成影响。
但实际上这个方法有个很老火的限制——html 中 sidebar 必须在 main 之前！
但我需要 sidebar 在 main 之后！因为我的 main 里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。
但如果 sidebar 在 main 之后，那上面的一切都会化为泡影。
3、固定区域使用定位，自适应区域不设置宽度，但设置 margin
.
container { position: relative; } .sidebar { position: absolute; top: 0; right: 0; width: 300px; background: #333; } .main { margin-right: 320px; background: #666; }
咦，好像不对，footer 怎么还是在那儿呢？怎么没有自动往下走呢？footer 说——我不给绝对主义者让位！
其实这与 footer 无关，而是因为 container 对 sidebar 的无视造成的——你再长，我还是没感觉。
看来这种定位方式只能满足 sidebar 自己，但对它的兄弟们却毫无益处。
4、左边浮动，右边 overflow: hidden;
*{ margin:0; padding: 0; } html,body{ height: 100%;/*高度百分百显示*/ } #left { width: 300px; height: 100%; background-color: #ccc; float: left; } #right { height: 100%; overflow: hidden; background-color: #eee; }
第二种方法，我利用的是创建一个新的 BFC（块级格式化上下文）来防止文字环绕的原理来实现的。
BFC 就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。
它可以通过以下任何一种方式来创建：
- float 的值不为 none
- position 的值不为 static 或者 relative
- display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个 overflow 的值不为 visible
关于 BFC，在 w3c 里是这样描述的：在 BFC 中，每个盒子的左外边框紧挨着 包含块 的 左边框 （从右到左的格式化时，则为右边框紧挨）。
即使在浮动里也是这样的（尽管一个包含块的边框会因为浮动而萎缩），除非这个包含块的内部创建了一个新的 BFC。
这样，当我们给右侧的元素单独创建一个 BFC 时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。
问：浮动的原理和工作方式，会产生什么影响呢，要怎么处理 ？
工作方式：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
影响
- 浮动会导致父元素无法被撑开，影响与父元素同级的元素。
- 与该浮动元素同级的非浮动元素，如果是块级元素，会移动到该元素下方，而块级元素内部的行内元素会环绕浮动元素；而如果是内联元素则会环绕该浮动元素。
- 与该元素同级的浮动元素，对于同一方向的浮动元素(同级)，两个元素将会跟在碰到的浮动元素后面；而对于不同方向的浮动元素，在宽度足够时，将分别浮动向不同方向，在宽度不同是将导致一方换行(换行与 HTML 书写顺序有关，后边的将会浮动到下一行)。
- 浮动元素将被视作为块元素。
- 而浮动元素对于其父元素之外的元素，如果是非浮动元素，则相当于忽视该浮动元素，如果是浮动元素，则相当于同级的浮动元素。
- 而常用的清除浮动的方法，则如使用空标签，overflow，伪元素等。
在使用基于浮动设计的 CSS 框架时，自会提供清除的方法，个人并不习惯使用浮动进行布局。
对 CSS Grid 布局的使用
rem、em、px、vh 与 vw 的区别 ？
一、 rem 的特点
- rem 的大小是根据
html根目录下的字体大小进行计算的。 - 当我们改变根目录下的字体大小的时候，下面字体都改变。
- rem 不仅可以设置字体的大小，也可以设置元素宽、高等属性。
- rem 是 CSS3 新增的一个相对单位（root em，根em），这个单位与 em 区别在于使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字体大小。
二、px 特点
- px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。
三、em 特点
- em 的值并不是固定的；
- em 会继承父级元素的字体大小。
- em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- 任意浏览器的默认字体高都是 16px。
所有未经调整的浏览器一般都符合: 1em = 16px。那么 12px = 0.75em，10px = 0.625em。
为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明 Fontsize = 62.5%，这就使 em 值变为 16px*62.5% = 10px, 这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了。
四、vh 与 vw
视口
- 在桌面端，指的是浏览器的可视区域；
- 在移动端，它涉及 3个 视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
- 视口单位中的 “视口”，桌面端指的是浏览器的可视区域；移动端指的就是 Viewport 中的 Layout Viewport。
vh / vw 与 %
单位 ： 解释
- vw ：1vw = 视口宽度的 1%
- vh ：1vh = 视口高度的 1%
- vmin ：选取 vw 和 vh 中最小的那个
- vmax ：选取 vw 和 vh 中最大的那个
比如：浏览器视口尺寸为 370px，那么 1vw = 370px * 1% = 6.5px (浏览器会四舍五入向下取 7)
vh / vw 与 % 区别
单位 ：解释
- % ：元素的祖先元素
- vh / vw ：视口的尺寸
不过由于 vw 和 vh 是 css3 才支持的长度单位，所以在不支持 css3 的浏览器中是无效的。
什么叫优雅降级和渐进增强 ？
- 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别
- 优雅降级是从复杂的现状开始，并试图减少用户体验的供给；
- 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要；
- 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
