【自学笔记】前端面试题之CSS（部分HTML）

以下摘抄自 掘金

http://gold.xitu.io/entry/5781b8db0a2b58005765e628/promote?utm_source=baidu&utm_medium=keyword&utm_content=frontend_interview&utm_campaign=q3_search

因为这些题目没有答案，就自己搜了搜总结了一下，有错还请指出

• CSS优化、提高性能的方法有哪些？
  1.发布前压缩CSS，减少数据传输量。
2.合并属性，如margine-left:5px;margine-top:10px 这个就可以合并成一条的。
3.合理设计CSS 布局，注意复用样式，减少渲染上花的时间。class和ID的选择，少用*这种全局匹配，合理设置基本样式（如设置table{}）提高复用。
4.减少低效代码的使用，如滤镜，express表达式，!import引入。
5.其它技术，如CSS SPRITE等。

• 浏览器是怎样解析CSS选择器的？
  从右往左解析，从左往右解析大部分解析会浪费到匹配失败上，而从右往左解析则在第一步就会淘汰很多叶子节点

  详见 https://segmentfault.com/q/1010000000713509

• 在网页中的应该使用奇数还是偶数的字体？为什么呢？
  一、UI设计师的原因
多数设计师用的设计软件（如：ps）大多数都是偶数，所以前端工程师一般都是用偶数字体
二、浏览器的原因
其一是为了迁就ie6，万恶的ie6会把定义为13px的字渲染成14px，你可以写个页面试试
还有一个原因是，偶数宽的汉字，比如12px宽的汉字，去掉1像素的间距，填充了像素的实际宽是11px，这样汉字的中竖线左右是平分的，以“中”这个字为例，在12像素时，竖线在中间，左右各5像素，显得均衡。
其二像谷歌一些比较流行的浏览器一般会有个默认的最小字体，而且对奇数字体渲染的不太好看
三、实际应用
偶数字号相对更容易和web设计的其他部分构成比例关系。比如：当我用了14px的正文字号，我可能会在一些地方用14×0.5=7px的margin，在另一些地方用14×1.5=21px 的标题字号。
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供12、14、16px这三个大小的点阵，而13、15、17px时用的是小一号的点阵（即每个字占的空间大了1px，但点阵没变），于是略显稀疏。

• margin和padding分别适合什么场景使用？
  ◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
◆浏览器兼容性问题
在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。

• 元素竖向的百分比设定是相对于容器的高度吗？
  height的百分比是相对与高度的，但是对于margin-top、margin-bottom、padding-top、padding-bottom这些竖直方向的内外边距属性的百分比取值，
参考的其实是容器的宽度而不是高低。

• 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
  响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
基本原理: 媒体查询 @media
兼容IE可以使用JS辅助一下来解决

• 全屏滚动的原理是什么？用到了CSS的那些属性？
  图片轮播原理，只不过图片宽高100%、超出隐藏、调整比例适应屏幕大小,width,height,transitionTimingFunction,transitionDuration,transform,overflow

• 视差滚动效果，如何给每页做不同的动画？
  【定义】
所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个CSS就满足了
background-attachment: fixed || scroll || local
默认是scroll，内容跟着背景走，而视差滚动页面里用fixed，背景相对页面固定而不跟内容滚动。

• ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
  单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全

• 如何修改chrome记住密码后自动填充表单的黄色背景 ?？
  input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

• 你对line-height是如何理解的？

http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
直接贴地址了，确实有点复杂，认真耐心看

• 设置元素浮动后，该元素的display值是多少？
  自动变成display:block

• 怎么让Chrome支持小于12px 的文字？

曾经：html{-webkit-text-size-adjust:none;}

现在：
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8); display:inline-block}

• display:inline-block 什么时候会显示间隙？
  移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

• overflow: scroll时不能平滑滚动的问题怎么处理？

http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/ 还是贴。。。

• style标签写在body后与body前有什么区别？
  可以写到任何位置，有些css js的引用放body后边是为了先显示页面给用户，防止中间某个js css响应慢，用户会一直看着空白页面，它就有可能关掉不看了

• png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

http://blog.csdn.net/playboyanta123/article/details/44655749 他能解释得比我清楚
简单说就是，png可以储存透明，完爆gif的地方在于失真小，没锯齿；劣势是不支持动画；png采用无损压缩，在多数情况下都可以保留图片里所有像素。PNG无损压缩算法，简单地说，就是把图片里出现的每一个颜色都记录下来。通过记录这些颜色相对应的值记录一张图片。jpg适用于摄影图片，以及色彩丰富的图片。它采用压缩算法，会对图片上每8px*8px的像素进行处理，通过强制渐变的方法来减小文件尺寸，因此无论选择的储存质量多高，还是会多多少少失真一些，但对于摄影之类的图片来说，jpg格式就会比png小很多了。

小图标，需要透明的用PNG。
照片，比较大的背景图用JPG。
gif，除非动图，其他容易失真。
WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%美中不足的是，WebP格式图像的编码时间“比JPEG格式图像长8倍。