1 .justify-content: center 纵向方向居中
2. text-align: center 垂直方向居中
align-item: center 水平居中
2.1 display:table;多行或者单行垂直居中
3.vertical-align:top 顶部对齐 在需要对齐的元素中添加
4.display:inline-block 行内并排 两个并排的元素都需要加该样式 span也需要加该属性 才占位
5.font-size 删除行内的空白样式 在父元素加 子元素需要加字体大小 否则继承父的属性
6. white-space:nowrap;overflow:hidden;text-overflow:ellipsis 超出部分以...显示
7.clearfix:
display:inline-block
&:after//after 后面不管有没有内容必须加这句content:"." IE8以上用的是after 以下用的是zoom 是伪元素 在页面中是选不中的 是占据位置的 被元素包裹的 但是可以添加css
display:block
content:"."
height:0
line-height:0
clear:both
visibility:hidden
8.display:flex; flex:1; 在vue中哟一个postcss工具会将代码分解 不需要写多个代码处理兼容性
8.1 flex:0 0 80% 表示宽度80px 意思为 等分 缩放情况 占位空间 在安卓手机上需要加上width:80px;否则会有兼容问题
8.2 display:table-cell 一个格子
8.3 在flex布局里面 vertical-align:middle 垂直居中
9.backdrop-filter:blur(10px) 在IOS系统中背景模糊
10.overflow:hidden 与overflow:auto不同 前者无滚动条 后者有滚动条
11.border-1px 实现 在style中写border-1px(rgba(11,25,24,0.1)) 在加上class命名border-1px即可
12.图标的适配
12.1 base64
把图片转为图片64的编码 ,有2 8 进制 被第二种替换了 几乎不用了
12.2 iconfont 支持IE4以上 兼容好 一般为单色 多色的为svg制作的
12.2.1 网址iconfont.cn
12.2.2 使用 在网站下载到本地 解压后 复制样式@font-face 和.iconfont 定义class名称 标签内更改为图标的名字 后可以定义css修改颜色
13 transorm的使用
13.1 transorm-style:preserve-3d转换3d环境
13.2 transform:translateZ(1px/-1px) 立体翻动效果 正面和反面
13.3 transform:rotateY(180deg) 反转图片180度
13.4动画过程中先做位移translateY/X/Z在做其他的 否则会出现问题
14 background
14.1 background:nrl() center center / cover no-repeat如果图片只是显示局部 需要加上 / cover 则全部显示
15