css

1.清除浮动

上下排列
- clear属性：表示清除浮动的，left、right、both
嵌套排列
- 固定宽高：不推荐，不能把高度固定死，不适合做自适应
- 父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
- overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响
- display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素
- 设置空标签：不推荐，会多添加一个标签
- after伪类：推荐，是空标签的加强版(clear属性只会操作块标签，对内联标签不起作用)

2.浏览器前缀

css3 兼容不同的浏览器，针对旧的浏览器，系浏览器基本不需要

3.transition过渡

transition-property：规定过渡的属性
- transition-duration：规定完成过渡效果需要多少秒或毫秒
- transition-delay：定义过渡效果何时开始
- transition-timing-function：规定速度效果的速度曲线
- linear匀速、ease、ease-in、ease-out、ease-in-out、cubic-bezier

3.transform变形

translate：位移
scale：缩放(值是一个比例值，正常大小就是1，会以当前元素中心点进行缩放
rotate：旋转(单位是角度deg）
skew：斜切(单位也是角度，正值向左倾斜，负值向右倾斜)
注意事项
1. 变形操作不会影响到其他元素
2. 变形操作只能添加给块元素，但是不能添加给内联元素
3. 复合写法，可以同时添加多个变形操作。
  - 执行是有顺序的，先执行后面操作，在执行前面的操作
  - translate会受到route、scale、skew的影响
  - transform-origin：基点的位置
4. scale 值为-1 是，会实现翻转效果

4.animation动画

animation-name：设置动画的名字(自定义)
animation-duration：动画的持续时间
animation-delay：动画的延迟时间
animation-iteration-count：动画的重复次数，默认为1，infinite无限次数
animation-timing-function：动画的运动形式
注：
1. 运动结束后，默认会停留在起始位置
2. from -> 0% , to -> 100%
animation-fii-mode：规定动画播放之前或之后，其动画效果是否可见。
- none(默认值)：在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟之后生效
- backwards：在延迟的情况下，让0%在延迟之前生效
- forwards：在运动结束之后，停到结束位置
- both：backwards和forwards同时生效
animation-direction：属性定义是否应该轮流反向播放动画
- alternate：一次正向(0%_{100%),一次反向(100%}0%)
- reverse：永远都是反向，从100%~0%
- normal(默认值)：永远都是正向，从0%~100%

5.3d操作

transform：
- rotateX()：正值向上翻转
- rotateY()：正值向右翻转
- translateZ()：正值向前，负值向后
- scaleZ()：立体元素的厚度
3d相关属性
- perspective：景深离屏幕多远的距离去观察元素，值越大幅度越小，给变化元素的父元素设定
- perspective-origin：景深-基点位置，观察元素的角度
- transform-origin：x,y,z z轴只能写数值
- transform-style：3D空间
  - flat(默认值 2d)
  - perserve-3d (3d,产生一个三维空间)
  - backface-visibility：背面隐藏 hidden、visible(默认值)
3d写法
- translate3d()：三个值 x y z
- scale3d()：三个值 x y z
- rotate3d() 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

6.CSS3背景扩展(背景图)

background-size：背景图的尺寸大小
- contain：包含
- cover：覆盖
background-origin：背景图的填充位置
- padding-box 默认
- border-box
- content-box
background-clip：背景图的裁切方式
- padding-box
- border-box 默认
- content-box

7.CSS3渐变

linear-gradient：线性渐变是值，需要添加到background-image属性上
- point||angle 注：渐变的0度是在页面的下边，正值会顺时针旋转
- color
- percentage
radial-gradient：径向渐变
- point
- color
- percentage

8.字体图标

font-face是CSS3中的一个模块，它主要是把自己定义的web字体嵌入到网页中
好处：
1. 可以非常方便的改变大小和颜色
2. 放大后不会失真
3. 减少请求次数和提高加载速度
4. 简化网页布局
5. 减少设计师和前端工程师的工作量
6. 可使用计算机没有提供的字体
使用：@font-face语法
- 像.woff等文件都是做兼容平台处理的，mac、linux等

9.text-shadow

文字的阴影 x y blur color
注：阴影的默认颜色是跟文字颜色相同的
注：通过，的方式进行分割，设置多阴影

10.box-shadow

盒子阴影 x y blur spread color inset 多阴影
注：盒子阴影的默认颜色是黑色
注：默认外阴影，如果设置outset不作用，可选的值只有inset

11. mask

遮罩 url repeat x y / w h 多罩层
注：mask目前还没有标准化，需要浏览器前缀

    -webkit-mask: url('./src/assets/img/common/placeholder.png') no-repeat 100px 100px ;
    }
    .mask:hover{
        -webkit-mask: url('./src/assets/img/common/placeholder.png') no-repeat center center /200px 200px;
    }

12.box-reflect

方向
- above below right left
距离
遮罩|渐变
注：渐变只能支持透明度的渐变，不能支持颜色的渐变
注：可用scale（-1）做兼容

13. blur模糊

filter:blur()

14.calc计算

calc(100%-100px)

15.分栏布局

column-count：分栏的个数
column-width：分栏的宽度
column-gap：分栏的间距
column-rule：分栏的边线
column-span：合并分栏
注：column-count和column-width不要一起设置

16.伪元素：

伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何虚拟dom,但可以包含内容。另外，开发者还可以为伪元素定制样式。
::selection
::first-line/first-letter
::before/after
···

17.CSS Hack分类

CSS属性前缀法
选择器前缀法
IE条件注释法
- IE10以上不支持注释法

18.IE低版本bug

常见兼容问题
1. 透明度
2. 双边距
3. 最小高度
4. 图片边框

19.布局扩展

等高布局
- 利用margin-bottom负值与padding-bottom配合实现
三列布局，左右固定，中间自适应
- BFC方式
- 定位
- 浮动（双飞翼布局、圣杯布局）
- flex弹性

20.Flex弹性盒布局

21.grid布局

grid-template-columns:1fr 1fr 1fr 分成3份
也可以写成 repeat(3,1fr)

22.Scss和Less

语法：

注释
- 单行注释，不会被编译
- 多行注释，css注释方式，会被编译
变量，插值，作用域
- Less
  1. 定义变量 @ 定义：@number:123px 使用：width:@number
  2. 插值定义：@key:margin 使用：@{key}:auto
  3. 作用域就近原则
- Scss
  1. 定义变量 $ 定义：$number:123px 使用：width:$number
  2. 插值定义：$key:margin 使用：#{$key}:auto
  3. 作用域作用域有顺序的先定义再使用

选择器嵌套，伪类嵌套，属性嵌套(Sass)

选择器、伪类嵌套

ul{
    list-style:none;
    li{
        float:left;
        div{
            margin:10px;
            p{margin:20px}
        }
        &:hover{
            color:red
        }   
    }
}

属性嵌套(Sass)

ul{
    list-style:none;
    li{
        color:red;
        font:{
            size:10px;
            weight:bold;
            family:宋体
        }
    }
}

运算，单位，转义，颜色
- 加减乘除可以直接使用
- 单位：Less单位由使用变量进行运算的另一个值决定;Scss单位必须相同
- 转义：Less：~"20px / 1.5"不计算；Scss：(20px/1.5)计算
函数
- Scss和Less都有自己的默认函数，具体看官方文档
- Scss自定义函数
```
@function sum($a,$b){
    @return $a + $b
}
.box{
    font-size:sum(4px,5px)
}
```

混入，命名空间(Less)，继承

Less混入

.show{
    display:block
}
.hide(@color){
    color:@color
}
.box{
    width:100px;
    .show
    .hide(blue)
}
//()转化css可以不显示内容，()可以传参

Scss混入

@mixin show {
    display:none
}
@mixin hide($color){
    color:$color
}
.box{
    width:100px;
    @include show;
    @include hide(blue)
}

Less命名空间

#nm(){
    .show{display:inline-block}
}
.box{
    #nm.show
}

Less继承

.line{
    display:inline
}
.box1{
    &:extend(.line)
}
.box2{
    &:extend(.line)
}

Scss继承

%line{
    display:inline
}
.box1{
    @extend %line
}
.box2{
    @extend %line
}

合并，媒体查询

Less合并

.box{
    background+:url(./'a.png');
    background+:url('./b.png')
    transform+_:scale(2)
    transform+_:rotate(45deg)
}
//+合并用逗号隔开，+_合并用空格隔开

Scss合并

$background:{
    a:url('./a.png'),
    b:url('./b.png')
}
transform:{
    a:scale(2),
    b:rotate(45deg)
}
.box{
    background:map-values($background);//逗号隔开
    transform:zip(map-values($transform)...)//空格隔开
}

Less和Scss媒体查询

.box{
    width:100px;
    @media all and (min-width:768px){
        width:600px
    }
     @media all and (min-width:1440px){
        width:900px
    }
}

条件，循环

Less

//条件
@count:6;
.get(@cn) when (@cn > 4){
    width:100px + @cn
}
.get(@cn) when (@cn<4){
    width:10px + @cn
}
.box{
    .get(@count)//width:106px
}
//循环
@count:2;
.get(@cn)when(@cn < 3){
    .get((@cn+1))
    .box-@{cn}{
        width:100px +@cn
    }
}
.get2(@count2)

Scss

//条件
$count:5;
.box{
    @if($count > 4){
        width:100px +$count
    }
    @else{
        width:10px +$count
    }
}
//循环
@for $i from 0 through 2{
    .box-#{$i}{
        width:100px + $i
    }
}

导入
- @import './'
...

23.CSS新特性

自定义变量如：定义--color：red 使用var(--color)
shape环绕文字
- shape-outside：margin-box
- clip-path：polygon(0 0,0 100px,100px 100px) 裁切图形 polygon设置未定义多边形
  
  结合shape-outside设置polygon(0 0,0 100px,100px 100px)实现多边形环绕
- shape-margin 环绕与图形的间距
scrollbar
- html::-webkit-scrollbar{
  
  width:10px
  
  }
  
  滚动条
  
  html::-webkit-scrollbar-thumb{
  
  background:yellow
  
  }
  
  滚动容器
  
  html::-webkit-scrollbar-track{
  
  background:#aaaaaa
  
  box-shadow:inset 0 0 5px gray
  
  }
scrollsnap滚动捕捉
- scroll-snap-type：x(x轴) mandatory(强制捕捉) 给滚动容器
- scroll-snap-align: start/center/end 给子元素

posted on 2020-03-10 16:37 Eruoreic 阅读(133) 评论(0) 收藏举报

刷新页面返回顶部

css

1.清除浮动

2.浏览器前缀

3.transition过渡

3.transform变形

4.animation动画

5.3d操作

6.CSS3背景扩展(背景图)

7.CSS3渐变

8.字体图标

9.text-shadow

10.box-shadow

11. mask

12.box-reflect

13. blur模糊

14.calc计算

15.分栏布局

16.伪元素：

17.CSS Hack分类

18.IE低版本bug

19.布局扩展

20.Flex弹性盒布局

21.grid布局

22.Scss和Less

23.CSS新特性

公告