如何让DOM元素不显示在浏览器的可视范围内？
最基本的：
设置display属性为none，或者设置visiblity为hidden
技巧性：
设置高度为0， 设置透明度为0，设置z-index位置在-1000
一个满屏品字布局如何设计?
第一种真正的品字：
- 三块高宽是确定的；
- 上面那块用margin: 0 auto;居中；
- 下面两块用float或者inline-block不换行；
- 用margin调整位置使他们居中。
第二种全屏的品字布局:
上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。
兼容
常见的兼容性问题？
- 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
- IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
- 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
{ background-color: #f1ee18;/*所有识别*/ . background-color: #00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }
- 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
- IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
- Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
- 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
浏览器兼容性有哪些
1. 浏览器默认的 margin 和 padding 不同
解决：加一个全局 *{ margin: 0; padding: 0; }来统一
2. 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示
解决：使用-webkit-transform:scale(.75);收缩的是整个span盒子大小，这时候，必须将span准换成块元素。
3.超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了
解决：改变css 属性的排列顺序L-V-H-A
CSS 预处理器
Less sass
Sass、Less是什么？为什么要使用？
他们是CSS预处理器。他是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。
例如Less是一种动态样式语言。将CSS赋予了动态语言的特性，如变量，继承，运算，函数。Less即可以在客户端上运行（支持IE6+,Webkit,Firefox），也可以在服务端运行（借助Node.js）。
Sass变量必须是$开始，而Less变量必须使用@符号开始。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无异议的机械劳动。
可以轻松实现多重继承。
完全兼容CSS代码，可以方便地应用到老项目中。Less只是在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译。
CSS 3的新增特性？
ie9开始支持
1.选择器增加；
2.样式增加：常用
比如：圆角。阴影，渐变背景，半透明，图片边框等；
3.新增的背景样式：
背景图片的显示范围，和起点，缩放。
4.引入了flex弹性 盒模型； 常用
5.阴影效果；文本及盒子阴影。 常用
6.颜色与透明；
新增了HSL/HSLA/RGBA几种颜色模式；
7.web字体和web图标 常用
@font-face{ font-family: myFont; src: url('') } div{ font-family: myFont }
8.和容器的变形； 常用
transform: translate(50px,100px);平移
transform: rotate(30deg);旋转
transform: scale(2,4);缩放
transform: skew(30deg,20deg);翻转
9.过度动画和交互； 常用
transition过度和animation动画
10.word-wrap（对长的不可分割单词换行）word-wrap：break-word
11.媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
CSS 创建一个三角形
把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
CSS 初始化样式是为什么？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
CSS 优化 提高性能的方法有哪些？
答案一：
- 避免过度约束
- 避免后代选择符
- 避免链式选择符
- 使用紧凑的语法
- 避免不必要的命名空间
- 避免不必要的重复
- 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
- 避免！important，可以选择其他选择器
- 尽可能的精简规则，你可以合并不同类里的重复规则
答案二：
加载性能：
① CSS 压缩：将写好的CSS 进行打包压缩，可以减少很多的体积。
② CSS单一样式：当需要下边距和左边距的时候，很多时候选择：margin: top 0 bottom 0;
但margin-top: top;margin-bottom: bottom;执行的效率更高。
选择器性能：
① 关键选择器。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）
CSS 选择器是怎样被浏览器解析的？
CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
CSS Sprites
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。
CSS Hack是什么?ie6,7,8的hack分别是什么？
针对不同的浏览器写不同的CSS Code的过程，就是CSS Hack。实例如下：
#test{ width: 300px; height: 300px; background-color: blue; background-color: red\9; /* all ie */ background-color: yellow\0; /* ie8 */ +background-color: pink; /* ie7 */ _background-color: orange; /* ie6 */ :root #test{ background: purple\9; /* ie9 */ } @media all and {min-width: 0px} #test{background-color: black\0;} /* opera */ @media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /* chrome and safari */ }
@media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。
CSS 引入方式？
外部样式表。引入一个外部CSS文件；
内部样式表。将CSS代码放在标签内部；
内联样式，将CSS样式直接定义在HTML元素内部；
移动端的布局用过媒体查询吗？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
- 里边
- CSS :
@media only screen and (max-device-width:480px) {/css样式/}
在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
全屏滚动的原理是什么？用到了CSS的哪些属性？
- 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
- overflow：hidden；transition：all 1000ms ease；
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
视差滚动效果？
视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
- CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器 - jQuery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高 - 插件实现方式
例如：parallax-scrolling，兼容性十分好
line-height的理解？
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。
让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
li与li之间不可见空白间隔引起原因？解决办法？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：
- 可以将
- 代码全部写在一排
- 浮动li中float：left
- 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
width: auto 和 width: 100% 的区别
width: 100% 会使元素box的宽度等于父元素的contentbox的宽度
width: auto 会时元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间
有一个高度自适应的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现象（即样式失效导致的页面闪烁问题）
使用 base64 编码的优缺点
base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，
在页面上显示时可用该字符串来代替图片的url属性
使用base64的优点：
① 减少一个图片的 HTTP 请求
使用base64的缺点：
① 根据base64的编码原理，编码后的大小会比源文件大小大1/3，如果把大图片编码到html/css中，
不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。
② 使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML 或CSS，
这相比于直接缓存图片的效果要差很多。
③ ie8以前的浏览器不支持
一般一些网站的小图标可以使用base64图片引入
超链接访问过后hover样式就不出现的问题时什么？如何解决？
被点击访问过的超链接样式不再具有hover和active了，解决方式是改变CSS属性的排列顺序：L-V-H-A（linked, visited, hover, active）。
rgba()和opacity的透明效果有什么区别？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或起背景色。设置rgba透明的元素的子元素不会继承透明效果。
px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em, 10px = 0.625em。
描述一个“reset”的css文件并如何使用它。知道normalize.css吗？你了解他们的不同之处吗?
重置样式非常多，凡是一个前端开发人员肯定会有一个常用的重置css文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的的默认样式，如果你不处理，在不同浏览器下回存在必要的风险，或者更有戏剧性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供一套合理的默认样式值。既能够让众多浏览器达到一致和合理，但不扰乱其他的东西（如粗体的标题）。
content有什么用？有什么应用？
CSS的content属性专门应用在before/after伪元素上，用来插入生成内容。
最常见的应用是利用伪类清除浮动：
CSS Code复制内容到剪贴板
//一种常见利用伪类清除浮动的代码 .clearfix:after { content:"."; //这里利用到了content属性 display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }
after伪元素通过content在元素的后面生成一个点的块级元素，再利用clear: both清除浮动。
