h5css样式
2021-05-14 04:28
标签：ram orm 倾斜 hit ima Fix 偶数 ext eating sadadsada23 3123123123 31asfegerg123 h5css样式 标签：ram orm 倾斜 hit ima Fix 偶数 ext eating 原文地址：https://www.cnblogs.com/xiewangfei123/p/11993131.html兼容性前缀：
谷歌：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
选项卡实例：
123123
123123
123123
同级 后一个：+
同级后所有个：~
直系子级：>
所有的元素：*
选中的：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打印设备