transform属性的细节
盒模型尺寸不会变化：页面中的元素无论应用什么transform属性值，该元素的盒模型尺寸和位置都不会有任何变化 行内元素无效，无法应用transform变换，且不支持所有变换特性 不同顺序不同效果
CSS渐变
深入了解linear-gradient()线性渐变 linear-gradient()默认是自上而下 可以传入角度值，表示方向，如45deg radial-gradient()径向渐变 radial-gradient(50px 50%，)设置半径大小，50px 50%是一个参数，这种情况是只指定水平半径，如果需要指定垂直半径，去掉百分比值 设置渐变中心点的位置，通过at设置，具体如下radial-gradient(100px at 0 0, white, deepskyblue);
CSS动画
一个CSS动画效果想要出现，必须包含动画名称、动画时间、动画属性和@keyframes关键帧规则。 animation属性包括：animation-name、animation- duration、animation-timing-function、animation-delay、animation-iteration- count等 @keyframes关键帧相关细节 起止关键帧可以不设置。 关键帧列表可以合并，如果关键帧对应的CSS样式是一样的，则可以合并在一起书写 关键帧中的样式可以不连续 关键帧中使用!important无效
列布局
列布局columns columns属性是column-width和column-count属性的缩写 同时定义宽度和数目，顺序任意 columns：2 auto或者columns：auto 2 也可以单独指定列数和宽度，不写单位就是列数 column-gap表示美一栏之间的空白间隙的大小，可以是长度值，也可以是百分比值
column-fill的作用是当内容分栏的时候平衡没一栏的内容
深入弹性布局
flex子项都是块级水平元素 flex子项浮动失效：在flex的容器中，设置float：right和float：left都是无效的，控制flex的子项左右对齐有专门的属性 flex子项的margin值不会合并 flex子项是格式化的尺寸
flex子项默认是水平排列，这个特性由flex-direction属性决定的。而且就算flex的子项的宽度之和超过flex容器，flex子项也不会换行。 需要通过flex-wrap处理
对齐特性： justify表示水平方向的样式设置 align表示垂直方向的样式设置 items表示全体元素的设置 content表示整体布局的样式设置 self表示元素自身的样式设置，其一定是应用在子元素上
flex的细节： 当flex属性是1个值或2个值的时候，另外的值并不一定默认值 flex可以使用双管道符
flex:0/1/none/auto应该在什么时候使用
flex：initial等同于设置flex：0 1 auto，可以理解为flex属性的默认值 flex：initial适用于按钮、标题、小图标等小部件的排版布局，这些小部件不会很宽 flex：0和flex：none的区别 flex：0等同于设置flex：0 1 0% flex：none等同于设置flex：0 0 auto flex：0适合元素内容的主体是替换元素 当flex子项的宽度就是内容的宽度，且内容永远不会换行时适合flex：none flex：1和flex：auto的区别，auto会优先扩展自己的尺寸 适合flex：1的场景：希望元素充分利用剩余空间，同时不会侵占其他元素应有的宽度
移动端适配
视区相对单位指的是相对于浏览器视区尺寸（viewport）的单位 具体包括下面4个 vw：视区宽度百分值 vh：视区高度百分值 vmin：vw或vh，取小的值 vmax：vw或vh，取大的值 100vw表示一个视区的宽度，在手机的浏览器中，视区宽度就等于手机像素宽度 移动端适配 可以使用calc()与vw与px进行运算
image-set()函数的性质与element()函数的性质一样 image-set()函数可以根据不同的设备的屏幕密度或者分辨率来显示不同的背景图 写法如下
background-image: image-set(url(1.jpg) 1x, url(1-
2x.jpg) 2x, url(1-print.jpg) 600dpi);
}
需要使用image-set()函数的两种情况： 1、不同屏幕密度下显示的是完全不同的图，而不是只有尺寸不一样的图 2、用户体验和流量收益足够明显的场景
