兼容性前缀： 谷歌：webkit 火狐：moz ie：ms 欧鹏：o选择器： 属性选择器： * = 包含 {href * = ‘www‘} ^ = 以什么开头 $ = 以什么结尾 伪类选择器： 第一个：first-of-type 最后一个：last-of-type 第几个：nth-of-type（） 选中前n个：nth-of-type（-n） 选中后5个：nth-of-type（n + 5） 第4个到第8个：:nth-of-type（-n + 8）:nth-of-type（n + 4） 奇数个：nth-of-type（2n + 1）odd 偶数：nth-of-type（2n）even
子级： child:first-child :last-child :nth-child
空的元素：empty 除了：not() 可用的：:not(:disabled) / :enabled 禁用的：:disabled 获得焦点：:focus 当前激活元素：:target选项卡实例：<a href="#p1">123123</a><a href="#p2">123123</a><a href="#p3">123123</a><p id="p1">sadadsada23</p><p id="p2">3123123123</p><p id="p3">31asfegerg123</p> 同级 后一个：+ 同级后所有个：~ 直系子级：> 所有的元素：* 选中的：checked 第一个字母：first-letter 第一个词：first-word 第一行：first-line
文本： 描边：text-stroke 文字阴影：text-shadow x轴偏移量 y轴偏移量 模糊范围 颜色 盒子阴影：box-shadow x轴偏移量 y轴偏移量 模糊范围 模糊半径 颜色 阴影位置 盒子倒影：box-reflect：above上 、 below下 、 left左 、 right右 偏移量 滤镜：filter：blur() 径向渐变：radial-gradient(circle圆形 / ellipse椭圆 、 半径 、颜色 、 范围) 线性渐变：linear-gradient(方向 颜色 范围) 重复渐变：repeating-
外部字体：@font-face{font-family:; src：url{‘‘}} 单行文本截断：text-overflow：ellipsis(溢出变成3个点) clip(溢出裁减掉) 还有另外两个值：overflow：hidden white-space: nowrap; 多行文本截断：display: -webkit-box; text-overflow：ellipsis: -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow：hidden; 强制换行：word-wrap：break-word；
颜色：rgba
边框多色：border-colors 边框图：border-image： 图片路径 url() 、 裁剪大小 、 平铺方式 repeat(重复) round(拉伸) 圆角：border-radius ： 左上角：border-top-left-radius 右上角：border-top-right-radius 左下角：border-bottom-left-radius 右下角：border-bottom-right-radius 背景基点：background-origin：border-box 从边框开始 / content-box 从内容区域开始(默认值) / padding-box 从内边距开始 背景裁剪：background-clip：border-box 从边框开始 / content-box 从内容区域开始(默认值) / padding-box 从内边距开始 背景大小：background-size：宽度 / 高度 contain按宽平铺/cover按高平铺（重点） 背景固定方式:background-attachment：fixed不随着滚动条滚动而滚动/scroll随着滚动条滚动（重点） 背景：background ： 多个背景用逗号隔开
变形：transform：位移translate、旋转rotate、缩放scale、倾斜、skew过渡：transition： 过渡属性transition-property all所有的 每一组用逗号隔开 过渡时间transition-duration 过渡延迟transition-delay 过渡运动方式：transition-timing-function 1.ease加速 2.ease-in加速 3.ease-in-out先加速后减速 4.linear匀速 5.ease-out减速 6.cubic-bezier贝塞尔曲线动画：animation 动画名称：animation-name 动画时间：animation-duration 动画次数：animation-iteration-count infinite无限 动画方向：animation-direction normal 正向 reverse 反向 alternate 来回（一次正一次反） 动画状态：animation-play-state running运动 paused暂停 动画的运动方式：animation-timing-function： 1.ease加速 2.ease-in加速 3.ease-in-out先加速后减速 4.linear匀速 5.ease-out减速 6.cubic-bezier贝塞尔曲线 动画时间外状态：animation-fill-mode forwards 动画结束时停在最后一帧 backwards 动画结束时返回到第一帧 both 动画立即执行第一帧，结束时停在最后一帧 none 结束完之后无 写动画：@keyframes
多列布局：columns 间隙：column-gap 列数：column-count 列宽：column-width 边框：column-rule 边框样式：column-rule-style 边框粗细：column-rule-width 边框颜色：column-rule-color 跨列：column-span
弹性盒子：display:flex; 父盒子： 方向：flex-direction row/row-reverse/column/column-reverse 横向对齐方式：justify-content flex-start左对齐 / flex-end右对齐 / center居中对齐 /space-between两端对齐 / space-around等间距对齐 纵向对齐方式：align-items flex-start上对齐 / flex-end下对齐 / center居中对齐 / stretch等高 / baseline基线对齐 纵向行对齐方式：align-content flex-start左对齐 / flex-end右对齐 / center居中对齐 /space-between两端对齐 / space-around等间距对齐 换行：flex-wrap wrap换行 / nowrap不换行 缩写（方向和换行的缩写）：flex-flow 子盒子： 扩展空间：flex-grow（对剩余空间进行划分） 压缩空间：flex-shrink 1份宽度 = (子元素总宽-容器宽)/总份数（每个元素占一份，flex-shrink：3 + 2） 压缩后的空间 = 子元素宽 - 1份宽度 * 份数 宽度：flex-basis 缩写：flex 先写扩展空间、再写压缩空间、最后写宽度
顺序：order 值越小越靠前，越大越靠后 可以是负数，不可以为小数 单独样式：align-self
媒体查询： @media （min-width）and（max-width）{} screen屏幕 all所有的 prient打印设备
原文地址：https://www.cnblogs.com/xiewangfei123/p/11993131.html
时间： 2024-10-25 00:03:38