1.overflow: scroll 时不能平滑滚动的问题怎么处理？
监听滚轮事件，然后滚动到一定距离时用 jquery 的 animate 实现平滑效果。
2.transform、animation和animation-duration的区别？
Transform: 它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。Animation: 作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值。animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
3.对 line-height 是如何理解的？
line-height指的是一行字的高度，包含了字间距，实际上是下一行基线到上一行基线的距离。如果一个标签没有定义height属性，那么其最终表现的高度是由line-height决定的。一个容器没有设置高度，那么撑开容器的高度的是line-height,而不是容器内部的文字内容。把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。line-height和height都能撑开一个高度，height会触发haslayout，而line-height不会。
4.抽离样式模块怎么写？述其思路。
可将css拆分成两部分： 公共CSS和业务CSS。
网站的配色，字体，交互提取出为公共的CSS。这部分的CSS命名不应涉及具体的业务。对于业务CSS，需要有统一的命名，使用公共的前缀。
5.在网页中的应该使用奇数还是偶数的字体？
在网页中的应该使用“偶数”字体：
偶数字号相对更容易和 web 设计的其他部分构成比例关系，使用奇数号字体时文本段落无法对齐，宋体的中文网页排布中使用最多的就是 12 和 14。
6.css hack原理及常用hack有哪些？
原理： 利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器的样式。
常见的hack有： 属性hack、选择器hack、IE条件注释。
7.link 与 @import 的区别？
link是HTML方式，@import是CSS方式；link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC；link可以通过rel="alternate stylesheet"指定候选样式；- 浏览器对
link支持早于@import，可以使用@import对老浏览器隐藏样式； @import必须在样式规则之前，可以在css文件中引用其他文件；
总的来说： link优于@import。
8.什么是 FOUC(Flash of Unstyled Content)？ 如何来避免 FOUC？
当使用@import导入CSS时，会导致某些页面在IE出现奇怪的现象： 没有样式的页面内容显示瞬间闪烁，这种现象被称为“文档样式暂时失效”，简称FOUC。
产生原因： 当样式表晚于结构性html加载时，加载到此样式表时，页面将会停止之前的渲染。等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
解决办法： 只要在<head>之间加入一个<link>或者<script>``</script>元素即可。
9.display,float,position有什么关系？
- 如果
display为none，那么position和float都不起作用，元素不显示； - 如果
position值为absolute或者fixed，元素绝对定位，float的计算值为none，display根据下面的表格进行调整； - 如果
float不是none，框是浮动的，display根据下表进行调整； - 其他情况下
display的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整display；
10.外边距折叠(collapsing margins)
毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下：
- 两个或多个毗邻的普通流中的块元素垂直方向上的
margin会折叠； - 浮动元素或
inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠； - 创建了块级格式化上下文的元素，不会和它的子元素发生
margin折叠； - 元素自身的
margin-bottom和margin-top相邻时也会折叠；
11.有哪几种隐藏元素的方法？
visibility: hidden;这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；opacity: 0;``CSS3属性，设置0可以使一个元素完全透明；position: absolute;设置一个很大的 left 负值定位，使元素定位在可见区域之外；display: none;元素会变得不可见，并且不会再占用文档的空间；transform: scale(0);将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留；<div hidden="hidden">HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态；height: 0;将元素高度设为 0 ，并消除边框；filter: blur(0);CSS3属性，括号内的数值越大，图像高斯模糊的程度越大，到达一定程度可使图像消失；
12.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
li排列受到中间空白(回车/空格)等的影响，因为空白也属于字符，会被应用样式占据空间，产生间隔。解决办法：
- 在
ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px; - 设置
float：left；
13.对浏览器内核的理解？
浏览器内核主要分为两个部分： 渲染引擎和js引擎；
- 渲染引擎： 负责取得页面的内容（
html，xml， 图像等）、整理讯息（加入css等）、以及计算网页的显示方式，然后对输出至显示器或者打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户以及其他所需要编辑、显示网络的应用程序都需要内核。 JS引擎： 解析和执行Javascript来实现网页的动态效果。
最开始渲染引擎和js引擎没有明确的区分，后来js引擎越来越独立，内核就倾向于只渲染引擎。
14.对WEB标准以及W3C的理解与认识
对于结构的要求：（规范的标签可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
- 标签要闭合
- 标签字母小写
- 标签不允许随意嵌套
对于CSS和JS来说：
- 尽量使用外链
CSS样式表和JS脚本。同时结构，表现和行为分为三块，符合规范。此外，还得提高页面渲染速度，提高用户体验。 - 尽量少用行内样式，保证结构和表现分离。标签的
id和class等的属性命名要做到见文知意，标签越少，加载越快，用户体验就会越高。同时代码方面也会更易于维护，便于改版。 - 不需要变动内容，便可一同打印版本而不需要复制内容，提高网站易用性。
15.制作一个访问量很大的网站，如何管理所有的css文件，js和图片？
从人手，分工和同步方面回答：
- 前期团队必须确认好全局样式，编码模式；
- 代码风格，编写习惯保持一致；
- 标注样式编写人，各模块都要及时标注（标注关键样式调用的地方）；
- 对自己负责的页面进行标注；
CSS和JS分文件夹存并行存放，命名都要统一；JS分文件夹存放，明明以该JS功能为准的英文翻译；- 图片采用整合的
.png格式存放，尽量整合在一起，方便将来管理；
16.视差滚动效果以及如何实现？
视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术（3D效果）。
实现方式：
CSS3实现： 优点是开发时间相对较短，性能和开发效率比较好。缺点是不能兼容到低版本的浏览器；JQuery实现：（通过控制不同层滚动速度，计算每一层的时间）优点是能兼容到各个版本，效果可控性好，缺点是开发起来对制作者的要求较高；- 插件实现方式： 例如使用
parallax-scrolling,兼容性十分好；
17.对BFC规范(块级格式化上下文：block formatting context)的理解
BFC规定了内部的Block Box如何布局。一个页面是由很多个Box组成的，元素的类型和display属性，决定了这个Box的类型。不同类型的box，会参与不同的Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不用的方式渲染，也是就是说BFC内部的元素和外部的元素不会相互影响。
定位方案：
- 内部的
box会在垂直方向上一个接一个的放置； box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠；- 每个元素
margin box的左边，与包含块border box的左边相接触； BFC的区域不会与float box重叠；BFC是页面上的一个隔离的独立容器，容器里面的元素不会影响到外面的元素；- 计算
BFC的高度时，浮动元素也会参与计算。
满足下列条件之一就可以出发BFC：
- 根元素变化，即
html； float的值不为none（默认）；overflow的值不为visible（默认）；display的值为inline-block,tabke-cell，table-caption；position的值为absolute或fixed;
18.元素竖向的百分比设定是相对于容器的高度吗？
一般来说，子元素的百分比单位都是以父元素为依据。但是margin和padding例外。元素的height是相对于容器的高度，但是元素的margin和padding是相对于容器的宽度。
19.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
（1）、问题：png24位的图片在ie浏览器上出现背景。解决： 做成png8；
（2）、问题：浏览器默认的margin和padding不同。 解决： 添加一个全局的*{ margin： 0; padding： 0;}；
（3）、问题：IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性，而Firefox下,只能使用getAttribute()获取自定义属性。 解决： 统一通过getAttribute()获取自定义属性；
（4）、问题： IE下,event对象有x,y属性,但是没有pageX,pageY属性，而Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。 解决： 使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。
20.在网页中的应该使用奇数还是偶数的字体？
一般情况下，在网页中，应该使用 偶数 字体。原因：
- 偶数字号相对更容易和
web设计的其他部分构成比例关系； - 使用基数字号时文本段落无法对齐；
- 宋体的中文网页排布中使用最多的是12号和14号。
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
