Skip to content

Commit

Permalink
添加其它.md，完善css.md和综合.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@fengzheqi
fengzheqi committed Mar 7, 2016
1 parent b872f2f commit 15d41fd
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 63 deletions.
136 changes: 79 additions & 57 deletions 2.css.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,85 +12,107 @@
10. **CSS在性能优化方面的实践（比方说选择器的效率等）**
11. **CSS打包压缩的方法**
12. **使用CSS预处理的优缺点（比方说Sass和Compass等）**
13. *** { box-sizing: border-box; }这条CSS规则是干嘛的，有什么优点**
13. **{ box-sizing: border-box; }这条CSS规则是干嘛的，有什么优点**
14. **CSS浮动的原理及清除浮动的方法及优缺点**
15. **CSS垂直居中的方法**
16. **base64的原理及优缺点**
17. **CSS reset和normalize的区别**
18. **link和@import的区别**
19. **左右上下margin合并重合的问题**
20. **rem字体大小设置**
21. **CSS3新增的特性**
22. **列出你所知道可以改变页面布局的属性**
23. **多人协作时，怎么避免样式被覆盖**

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1. **圣杯布局**
答案：[圣杯布局](http://chen106106.iteye.com/blog/1631865) [参考资料](http://alistapart.com/article/holygrail)
答案：[圣杯布局](http://chen106106.iteye.com/blog/1631865) [参考资料](http://alistapart.com/article/holygrail)

2. CSS合并方法
2. **CSS合并方法**
答案：避免使用@import引入多个css文件，可以使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等。

答案：避免使用@import引入多个css文件，可以使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等。
3. **盒子模型**
答案：参考HTML中第11题。

3. 盒子模型
4. **CSS定位**
答案：[Position各属性值详解](http://www.cnblogs.com/fsjohnhuang/p/3967350.html)　　
[CSS中的绝对定位与相对定位](http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html),注意的是定位的参照：relative参照于自己该出现的位置，而absolute参照于祖先元素中与自己最近的已定位元素(relative或者absolute)直到body元素。

答案：参考HTML中第11题。
5. **CSS动画原理**
答案：[CSS 动画指南： 原理和实战 ](http://www.uml.org.cn/html/201110311.asp)
[英文原版](https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/#more-105335)

4. CSS定位
6. **CSS3动画（简单动画的实现，如旋转等）**

答案：[Position各属性值详解](http://www.cnblogs.com/fsjohnhuang/p/3967350.html)和[CSS中的绝对定位与相对定位](http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html),注意的是定位的参照：relative参照于自己该出现的位置，而absolute参照于祖先元素中与自己最近的已定位元素(relative或者absolute)直到body元素。
7. **CSS不同选择器的权重(CSS层叠的规则)**
答案：首先，找出所有应用到该标签的所有规则。然后按照下面的规则进行应用：1、！important规则最重要，大于其它规则；2、行内样式规则，加1000；3、对于选择器中给定的各个ID属性值，加100；4、对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10；5、对于选择其中给定的各个元素标签选择器，加1；6、通配符和结合符给予特殊性没有任何贡献；7、如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则。记住，CSS中选择器的优先级是先判断高位的数字，如果相等，才会继续判断低位的数字，如果高位分出大小了，就不考虑低位了。

5. CSS动画原理
8. **flexbox布局及相关设置**
答案：[Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
[Flex 布局教程：实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)

答案：http://blog.csdn.net/dojotoolkit/article/details/6859754
9. **块级元素和行内元素的异同**
答案：1.块级元素分行，行内元素不分行；
2.块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素，不能包含块级元素；
3.行内元素设置width、height、margin的上下、padding的上下无效；
4.行内元素可以通过设置display：block，渲染为块级元素。

6. CSS3动画（简单动画的实现，如旋转等）
10. **CSS在性能优化方面的实践（比方说选择器的效率等）**
答案：可参考[CSS性能优化策略](http://fengzheqi.com/2016/03/06/CSS%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5/)

7. CSS不同选择器的权重(CSS层叠的规则)
11. **CSS打包压缩的方法**
答案：利用打包工具grunt/gulp。

答案：首先，找出所有应用到该标签的所有规则。然后按照下面的规则进行应用：1、！important规则最重要，大于其它规则；2、行内样式规则，加1000；3、对于选择器中给定的各个ID属性值，加100；4、对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10；5、对于选择其中给定的各个元素标签选择器，加1；6、通配符和结合符给予特殊性没有任何贡献；7、如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则。

8. flexbox布局及相关设置

答案：

9. 块级元素和行内元素的异同

答案：参照HTML中的第10题。

10. CSS在性能优化方面的实践（比方说选择器的效率等）

11. CSS打包压缩的方法

12. 使用CSS预处理的优缺点（比方说Sass和Compass等）

答案：Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。让你用一种编程语言的思维来写CSS样式。但是带来的缺点是需要增加设计工作以及学习熟悉成本。

13. { box-sizing: border-box; }这条CSS规则是干嘛的，有什么优点
12. **使用CSS预处理的优缺点（比方说Sass和Compass等）**
答案：Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。让你用一种编程语言的思维来写CSS样式。但是带来的缺点是需要增加设计工作以及学习熟悉成本。

13. **{ box-sizing: border-box; }这条CSS规则是干嘛的，有什么优点**
答案：[让CSS布局更加直观：box-sizing](http://www.cnblogs.com/front-Thinking/p/4394901.html)

14. CSS浮动的原理及清除浮动的方法及优缺点

答案：而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。[css-float浮动的深入研究、详解及拓展](http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/)和[那些年我们一起清除过的浮动](http://www.iyunlu.com/view/css-xhtml/55.html)及[css清除浮动各种方法](http://www.cnblogs.com/mizzle/archive/2011/07/14/2105961.html)

15. CSS水平垂直居中的方法

答案：[CSS垂直居中总结](http://www.cnblogs.com/dojo-lzz/p/4419596.html)和[CSS水平垂直居中总结](http://www.cnblogs.com/dojo-lzz/p/4419596.html)

16. base64的原理及优缺点

答案：[从原理上搞定编码-- Base64编码](http://www.cnblogs.com/chengxiaohui/articles/3951129.html)和[关于base64编码的原理及实现](http://www.cnblogs.com/hongru/archive/2012/01/14/2321397.html)，优点是大大缩小了大小（33%），可以加密，减少了http请求，图片更新没有上传和清缓存了；缺点是需要消耗CPU进行编解码、增大了CSS、浏览器支持方面吧。具体可参考：[小tip: base64:URL背景图片与web页面性能优化](http://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-%E5%9B%BE%E7%89%87-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/)

17. CSS reset和normalize的区别

答案：reset是将浏览器所有的默认样式进行重置、覆盖，normalize是保留原来浏览器的样式并且尽量在不同浏览器里保持一致。

18. link和@import的区别

答案：本质上他们都是为了引入外部css样式的，但是有区别如下：①link属于XHTML标签，而@import完全是CSS提供的一种方式。②加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。③兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。④使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。可以参考知乎上的问题[Normalize.css 与传统的 CSS Reset 有哪些区别？](http://www.zhihu.com/question/20094066)

19. 左右上下margin合并重合的问题

14. **CSS浮动的原理及清除浮动的方法及优缺点**
答案：而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
[css-float浮动的深入研究、详解及拓展](http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/)
[那些年我们一起清除过的浮动](http://www.iyunlu.com/view/css-xhtml/55.html)
[css清除浮动各种方法](http://www.cnblogs.com/mizzle/archive/2011/07/14/2105961.html)

15. **CSS水平垂直居中的方法**
答案：[CSS垂直居中总结](http://www.cnblogs.com/dojo-lzz/p/4419596.html)

16. **base64的原理及优缺点**
答案：优缺点如下，原理参考文章
**优点**可以加密，减少了http请求，图片更新没有上传和清缓存了；
**缺点**是需要消耗CPU进行编解码、增大了CSS、浏览器兼容方面吧。
[从原理上搞定编码-- Base64编码](http://www.cnblogs.com/chengxiaohui/articles/3951129.html)
[关于base64编码的原理及实现](http://www.cnblogs.com/hongru/archive/2012/01/14/2321397.html)
[小tip: base64:URL背景图片与web页面性能优化](http://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-%E5%9B%BE%E7%89%87-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/)

17. **CSS reset和normalize的区别**
答案：reset是将浏览器所有的默认样式进行重置、覆盖，normalize是保留原来浏览器的样式并且尽量在不同浏览器里保持一致。
可以参考知乎上的问题[Normalize.css 与传统的 CSS Reset 有哪些区别？](http://www.zhihu.com/question/20094066)

18. **link和@import的区别**
答案：本质上他们都是为了引入外部css样式的，但是有区别如下：
1.link属于XHTML标签，而@import完全是CSS提供的一种方式。
2.加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4.使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

19. **左右上下margin合并重合的问题**
答案：上下margin重合，并选取最大的作为间距。左右margin不合并，间距等于相加。
也可以参考：
[CSS 外边距(margin)重叠及防止方法](http://www.hujuntao.com/web/css/css-margin-overlap.html)
[W3C 8.3.1 Collapsing margins](https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#collapsing-margins)

20. rem字体大小设置
20. **rem字体大小设置**
答案： rem其实就是相对根元素<html>的相对值，具体可参考：
[CSS3的REM设置字体大小](http://www.w3cplus.com/css3/define-font-size-with-css3-rem)

答案：[CSS3的REM设置字体大小](http://www.w3cplus.com/css3/define-font-size-with-css3-rem)
21. **CSS3新增的特性**
答案：[深入了解 CSS3 新特性](http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/index.html)

21. CSS3新增的特性
22. **列出你所知道可以改变页面布局的属性**
答案：position、display、float、width、height、margin、padding、top、left、right、bottom，欢迎继续补充。

答案：[深入了解 CSS3 新特性](http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/index.html)
23. **多人协作时，怎么避免样式被覆盖**
答案：团队之间制定良好的CSS规范，可以参考：[web前端代码规范--CSS篇](http://fengzheqi.com/2016/03/06/web%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83--CSS%E7%AF%87/)
6 changes: 0 additions & 6 deletions 4.综合.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,9 +176,3 @@

46. 浏览器缓存策略
答案： http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html

## 附赠一篇老外总结的面试问题和JS的一些常见怪癖

1. [Interview Questions](http://www.thatjsdude.com/interview/)

2. [JavaScript-Garden](http://bonsaiden.github.io/JavaScript-Garden/)
7 changes: 7 additions & 0 deletions 5.其他.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# 前端面试题（其他篇）

## 附赠一篇老外总结的面试问题和JS的一些常见怪癖

1. [Interview Questions](http://www.thatjsdude.com/interview/)

2. [JavaScript-Garden](http://bonsaiden.github.io/JavaScript-Garden/)

0 comments on commit 15d41fd

Please sign in to comment.