有用的 CSS，你学会了吗？

,content + padding + border + margin,,,box-sizing: 'border-box' | 'content-box';IE默认​​border-box​​​，其他浏览器默认​​content-box​​。此属性用以改变盒模型宽高的计量方式,outline位于边框边缘的外围，可起到突出元素的作用。,不属于盒模型的一部分，不占空间（这样不会导致浏览器渲染时出现reflow或是repaint）,颜色​​outline-color​​​、线条样式​​outline-style​​​、线条宽度​​outline-width​​,​​outline​​有可能是非矩形的（火狐浏览器下）,,效果：,,具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不受外部元素影响。,常见的利用BFC解决问题：,浮动属性本来是为了实现网页中文本环绕图片的效果而引入的一种布局模型。因为其有用的特性而常常用于页面布局（自适应布局）。,clear: both,BFC (这里可以有多种方式，不再一一列举),利用float自适应布局：,两栏,三栏,Flexible Box"弹性布局"，用来为盒状模型提供最大的灵活性。不过设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。,flex容器的属性：,flex容器内项目属性：,利用flex布局：,将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。,,容器属性：,一些关键字和函数：,repeat(n, length)函数：重复；,auto-fill关键字：自动填充；,fr关键字：片段（可理解为份数）；,minmax()函数：长度范围；,auto关键字；,项目属性： ,,span关键字：跨越,举个例子：,,,三栏布局有时候需要一些特性，比如：,可以参考下面两种常见的布局实现方式。,圣杯和双飞翼的区别： 双飞翼给中间块套了一个容器，通过设置该容器内部的中间块margin属性从而使中间块两侧的内容不被左右块遮挡。,粘连布局如下图所示，当main区域内容较少时，停留在底部。当内容较多时，紧跟在main后面。,,示例：min-height + margin-top,如下示例（background-origin和background-clip的区别）,,语法：background-image: <渐变函数(direction, color-stop1, color-stop2, ...)>,direction: to right | to left | to bottom right | ...,size: closest-side | arthest-side | closest-corner | farthest-corner（从小到大排列）,@font-face：描述自定义的字体规则，使用方式,定义规则的属性：,使用方式：,tips：transform使用后，会导致fixed定位失效,2D转换函数：,tips：多个函数需要同时使用的时候顺序（先旋转会改变坐标轴方向，位移放在最前面）,转换属性：,元素从一种样式逐渐改变为另一种的效果，是定义一个过程而不是一个状态。,示例：,元素从一种样式逐渐变化为另一种样式的效果，是定义一个过程而不是一个状态，比transition要更加灵活的多，且在使用animation时，transform会失效,@keyframes如何定义animation是怎么变化:,定义@keyframes的方式1 (from-to: 两个状态间转换):,定义@keyframes的方式2 (百分比：多个状态间转换):,使用自定义的动画：,animation vs transition：,Less是CSS的预处理语言，扩展了CSS，增加了诸如变量、混合（mixin）、函数等功能，使得CSS更易制作和维护。,普通用法： 宽高成比例 aspect-ratio: 16/9;,进阶：,映射,基础用法：,进阶：,~"(min-width: 768px)",相比于混合的区别在于，可以不用生成更多代码，举个例子,less会根据扩展名不同对导入的文件做不同处理：,import 参数：,eg：,导入js插件，添加一些功能和属性：,定义插件：,使用自定义：,作用：,没有css modules的情况下，样式是全局的（当类名相同时，样式相互干扰）：,添加 css modules后，各个组件仅仅会引用自己import的样式，下面开始介绍如何配置css modules,基本效果（类名生成相应的hash）,,发现每次引入都需要使用import style from 'xxx';   className={style.title}这样。总是需要多写一个我们不太需要的style，下面介绍另一种方式：,babel-plugin-react-css-modules实现编译时CSS模块解析将styleName转换为className。与react-css-modules相比，babel-plugin-react-css-modules具有更小的性能开销(0-10%vs+50%）和更小的大小占用空间（小于2kb vs 17kb react-css-modules+lodash依赖）,️ localIdentName和generateScopedName配置的名字要保持一致。(这里有个坑，从css-loader6.2.0使用了新的hash算法，所以导致两者的生成的hash不一致，可以利用generic-names来生成一致的名字),基本使用：,PostCSS 将 CSS 转换为 JavaScript 可以操作的数据结构。这些数据可以由插件理解和转换，然后处理成各种需要的格式。,接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。,将插件使用到 postcss 配置中？,