max-content: 内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求

min-content: 装下单个最大内容的最小宽度

fit-content: 在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求。

关键字让元素有了确定的尺寸，作用是弹窗的居中对齐可以这样写

width: fit-content;
height: fit-content;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

绝对定位元素fit-content居中布局最佳实践实例页面

文字居中和左对齐自动布局实例页面

stretch: 让元素的尺寸自动填满可用的空间，可以实现一层在有margin的情况下元素居中

width: stretch;
margin: 0 15px;

stretch关键字与button按钮的margin自适应实例页面

margin-block-start, margin-block-end (en-US), margin-inline-start (en-US)，和 margin-inline-end (en-US) 与其简称 margin-block 和 margin-inline (en-US) : 定义一个元素的逻辑块开始和结束边距，和margin还是有一点点差别的.css逻辑性需要配合writing-mode/direction/text-orientation使用才有意义

margin-right和margin-inline-end效果对比实例页面

position:sticky 同一个页面，写在不同的元素上面的表现形式不一样，粘性定位规则下面的不同表现。他并不是position:relative和fixed的结合，只是我们平时用js模拟的时候会这样写

通讯录字母顶部粘性定位实现实例页面

text-align-last:justify: 实现最后一行两端对其

如果父元素和子元素同时设置了text-decoration:效果的时候，文字的装饰线效果是累加的

text-decoration-skip: 控制装饰线和文字之间的重叠关系

在所有支持css过渡和动画的css属性中，opacity属性是性能最高的，opacity不是1会创建一个层叠上下文。但是他是没有继承性的，父子同时设置半透明的时候，半透明的效果是叠加的，最后子元素的表现结果是两者的乘机

border-radius属性，水平半径和垂直半径不是通过空格进行区分，而是斜杆

box-shadow: 光源默认在页面的左上角，生成的阴影会位于文字下面背景上面，可实现box-shadow实现的新手引导效果示意实例页面 多阴影特性与图形绘制实例页面

对于绝对定位元素，如果可以尽量避免transform属性进行位置偏移，应该用margin属性进行替换，这样就可以把transform预留出来，页面中无论什么元素应用了transform，该元素的尺寸和位置都不会有任何变化，只是视觉效果发生了变化，不会推开旁边的元素，动画性能有限使用绝对定位/opacity/transform。

如果父元素设置了transform变换，固定定位效果会失效，样式类似于绝对定位，filter也会让子元素的固定定位失效。transform属性值不为none，可以作为绝对定位元素的包含块