### 知识点transform > 允许你修改CSS可视化模型的坐标空间。通过transform，可以让元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。 举例如下： transform: scale(1.4) 放大1.4倍；字体也会拉伸；vh > 单位，相对于视口的高度，视口被均分为100单位的vh， align-items:center> **水平** 居中弹性盒的各项div元素，需配合display:flex 使用； 另有： flex-start 对齐到侧轴起点 flex-end 对齐到侧轴终点 baseline 与基准线对齐 stretch 拉伸元素以适应 inheritjustify-content:center> **垂直** 居中弹性盒的各项div元素，需配合display:flex 使用； 另有： flex-start 从行首起始位置开始排列 flex-end 从行尾位置开始排列 space-between 均匀排列每个元素,首个元素放置于起点，末尾元素放置于终点 space-around 均匀排列每个元素,每个元素周围分配相同的空间 inherit***transform-origin:100%; > 设置旋转的基点，示例中是按右侧端点顺时针（默认）旋转 transform:rotate(45deg); > 旋转的角度； transform:translateY(xxx); > 在上下维度移动； transition:属性1 duration, 属性2 duration ... > 定义这些动作的时间段 (默认的动作都是瞬时完成)； 需要配合1. 原始状态； 2.最终状态（写到对应的操作里，如hover）***:root > 伪类匹配文档树的根元素。应用到HTML，:root 即表示为元素，除了优先级更高外，相当于html标签选择器。 --xxx 自定义变量，此变量仅可用于子元素 var(--xxx) 使用定义的变量document.documentElement> 指向根元素（一般是html） object.style.setProperty( css名称 , css值 ) text-transform:uppercase > 用css转换为大写； lowercase 转换为小写； capitalize 首字母转换为大写； 2个或多个类名连写，指同一个元素； 2个或多个类名用空格隔开，指同后代元素； box-shadow:inset 0 0 10px rgba(); > 默认(无inset)是外部阴影，有inset是内部阴影； linear-gradient(to top,色值1 0%, 色值2 100%)> 渐变颜色的设置方法(方向， 色值 位置，色值 位置)； background-size:cover;> 设置背景图片大小。flex-wrap:wrap;> 指定单行显示还是多行显示（如果超出）。父元素设置flex和wrap/nowrap/wrap-reverse后，指定子元素排列方式nowrap： 不换行; wrap: 换行; wrap-reverse: 换行 + 底左部开始排列；font-size:0; 去掉inline-block元素之间的空格> 在外层元素上设置font-size：0；在内层元素上加上font-size：xxx；vertical-align: text-bottom 设置在图片上，使图片与文字底部基线对齐vertical-align: bottom 设置在图片上，使图片与文字底部对齐hr 的设置方式>
text-align: justify;text-align-lastjustify 实现两端对齐的方式
网友评论