前端面试宝典 每日一题（10）说说你对优雅降级与渐进增强的理解？

🧑🏻‍写在前面的话：
这个系列文章可能开始，有人会觉得很low， 我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析， 感兴趣的小伙伴可以持续关注，每天分享一个前端知识点，希望大家一起进步。

🧑🏻‍这篇文章中的知识点会比较基础，所以会给大家解析三个知识点，希望对发刚开始学习前端的小伙伴能够有所帮助。

1.说说你对优雅降级与渐进增强的理解？

渐进增强（progressive enhancement）

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级（graceful degradation）

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

1. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给；渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
2. 渐进增强观点认为应该关注于内容本身，这使得渐进增强成为一种更为合理的设计范例；优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。

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

1. 可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
2. 还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);
   注意-webkit-transform:scale(0.75);收缩的是整个元素的大小。
3. 使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

3.为什么需要清除浮动？以及清除浮动的方式

浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。

浮动的工作原理：
浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
浮动元素碰到包含它的边框或者其他浮动元素的边框停留。

浮动元素引起的问题？

1. 父元素的高度无法被撑开，影响与父元素同级的元素

2. 与浮动元素同级的非浮动元素会跟随其后

3. 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动的方式如下：

1. 给父级div定义height属性

2. 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式

3. 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

今天整理的大多都是一些浮动相关的知识点，后续还会不断有新的知识点输出，希望对大家学习前端有所帮助。