css3手机开发

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