重学CSS

说到 CSS 的布局，肯定少不了 Flex（弹性盒子） 和 Grid（网格布局）。Flexbox 适合用在组件和小规模的布局中，而面对更复杂或整体规模的布局，Grid 则更擅长了。

一文整理业务常见、面试爱问之布局问题（Layout），包括水平居中布局、垂直水平居中布局、多列等高布局的最佳实践。

使用 @media，可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。

按钮元素是最常见最普遍的存在，不论是展示页面还是后台管理，都有按钮的位置。作为用户交互的一个必要元素，一些小巧妙的视觉效果就能让用户体验 up up up

利用 CSS3 的新特性，可以做卡片式图片、响应式图片/图库、添加滤镜、图片预览窗（Modal）等等

在 CSS3 中, 增加了一些新的特性来调整用户界面。 resize 允许你控制一个元素的可调整大小性，box-sizing 定义元素大小的计算方式，outline-offset 设置元素边缘距离。

在以下情况使用多列布局： 你想要你的文本看起来想报纸那种排版布局。 您有一组要分成列的小项目。 你不需要单独为指定的列写样式。

CSS3中的动画可以分成两个属性：@keyframes 和 animation，@keyframes 负责创建动画，animation 则指定动画的播放方式。

CSS `transitions` 提供了一种在更改 CSS 属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

transform 属性允许你旋转，缩放，倾斜或平移给定元素。通过修改 CSS 视觉格式化模型的坐标空间来实现。

文字阴影 text-shadow、溢出内容的处理 text-overflow、单词断行 word-break 和 自定义在线字体 @font-face。

CSS3中，关于背景（background）的新增属性和渐变函数（gradient），看看提供了哪些新背景元素控制和多种渐变效果的实现。

CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准，且 CSS3 已完全向后兼容，也就是说 CSS3 = CSS2 + CSS3 新增属性。

Formatting context（格式化上下文） 是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

Flex 的基本概念有： flex container （容器）、 flex item（项目）、main axis（主轴）和 cross axis（交叉轴）。

在 CSS 中，所有的元素都被一个个的 “盒子（box）” 包围着，我们广泛地使用两种“盒子” —— 块级盒子 (`block box`) 和 内联盒子 (`inline box`)。