CSS3以后的内容
width
fit-content的两大优点： 1、保护了原始的display计算值 2、让元素的尺寸有了确定的值
逻辑属性
inline/block与start/end元素
inline是水平方向排列，margin-inline-start就是水平方向的开始 block是垂直方向排列，margin-block-start就是垂直方向的开始 使用这种方式设置布局，不会被修改文档流的方向影响
position属性的增强
sticky黏性定位的误区： 黏性定位是相对定位和绝对定位的结合体。 黏性定位与固定定位无关，而是相对定位的延伸 黏性定位的注意事项： 如果黏性定位的某个祖先元素的overflow属性值不是visible，那么滚动时不会有粘性定位的效果。 如果黏性定位元素的父元素的高度和黏性定位元素的高度相同，则垂直滚动的时候，黏性定位效果是不会出现的。
字符处理
keep-all属性值可以保护中文词组不断开 使用 line-break: anywhere可以使中文标点成为换行点 text-decoration进行了升级，可以设置color、style和thickness 写法如下text-decoration-line、text-decoration- style、text-decoration-color和text-decoration-thickness
background
background-size可以限制SVG图标在元素的范围内 cover和contain： cover和contain是两个关键字属性值，两者都不会改变背景图的原始比例，非常适合背景图像高宽不确定的场景background-size background-size的属性值auto的计算规则： 1、如果图像水平和垂直方向同时具有内在尺寸，则按照图像原始大小进行渲染。 2、如果图像没有内在尺寸，也没有内在比例，则按照背景定位区域的大小进行渲染，等同于设置属性值为100% 3、如果图像没有内在尺寸，但具有内在比例，则渲染效果等同于设置属性值为contain background-size的注意事项： 1、background-size属性值无论是数值还是百分比值，都不能是负值 2、background-size可以缩写直接在background属性中设置的，但只能写在background-position属性值的后面
background-clip属性与背景显示区域限制： 默认值border-box，表示背景图或者背景色显示的区域是整个border-box background-clip：text可以让背景按照字符形状进行裁剪，再隐藏文字，就可以看到文字形状的背景，可以实现文字渐变的效果
opacity属性
opacity透明基础：属性值的范围是0-1，初始值是1.0 opacity属性细节：opacity属性是性能最高的，很多动画效果都可以使用opacity属性进行性能优化 opacity属性的叠加计算规则： 由于opacity属性没有继承性，因此父子元素同时设置透明属性时，效果是叠加，相乘叠加，比如0.5*0.5得到0.25的结果
深入border-radius属性
border-radius属性也可以通过1-4个值表示方位，类似padding和margin 本意是：边界半径，圆角效果就是来自以这个半径绘制的圆或以半轴绘制的椭圆 border-radius可以通过设置多个不同的值可实现不规则显示效果
2D变换
常用2D变换包括位移、旋转、缩放和斜切 1、translate位移，以自身坐标为基准，进行水平方向或者垂直方向的位移 translate函数可以传两个值，其中可省略一个值，也可以直接写translateX或者translateY translate位移注意事项：位移的方向和文档流的方向没有关系，绝对定位属性应避免使用transform属性进行位置偏移 2、rotate旋转，可以使用以下单位：deg表示角度、grad表示百分度、rad表示弧度、turn表示圈数 3、scale缩放，缩放也支持X轴和Y轴的两个方向。 scale缩放注意事项：缩放不支持百分比，只支持数值。缩放支持负值 4、skew斜切，斜切支持X轴和Y轴的两个方向，斜切单位也是角度
