《CSS知识总结》

《CSS知识总结》

技术杂谈小彩虹2021-07-18 11:41:37140A+A-

CSS布局

  • float布局

使用float布局,不需要做响应式,因为手机上没有IE,float布局是专为IE的。
(*IE 6/7有margin变双倍的bug
解决办法:第一种:将错就错,针对IE 6/7把margin减半; 第二种:加一个display: inline-block。)

  • flex布局 弹性布局
  • Grid布局 适合不规则布局

CSS定位

定位与布局的区别:定位是立体垂直于屏幕的,布局是屏幕平面上的。
position属性

  • position: static(静态)默认值,元素待在文档流里;写与不写没有区别,通常不写;
  • position: relative相对定位,升起来,但不脱离文档流;

使用场景如下:

1.用于做位移(不常用)
2.用于给 absolute 元素做定位基准

配合 z-index 使用

z-index: auto 默认值,不创建新层叠上下文
z-index: 0/1/2
z-index: -1/-2

默认每一个 z-index 为 auto ,auto 计算出来的值是 0 。

  • position: absolute绝对定位,定位基准是祖先里的非static,最近的定位元素,也可以配合z-index

使用场景如下:

1.脱离原来的位置,另起一层,比如对话框的关闭按钮;
2.鼠标悬停,显示提示内容

  • position: fixed 固定定位,定位基准是viewport视口);fiexd和absolute相同点:写了absolute或者fixed,一定要补top和left*。移动端不要用这个属性,bug很多!

使用场景如下

1.广告
2.回到顶部按钮

  • position: sticky 粘滞定位 (很多浏览器不兼容)

使用场景:

导航栏

CSS动画

浏览器渲染原理

渲染步骤

  1. 根据 HTML 构建 HTML 树(DOM)
  2. 根据 CSS 构建 CSS 树(CSSOM)
  3. 将两棵树合并成一颗渲染树(render tree)
  4. Layout 布局(文档流、盒模型、计算大小和位置)
  5. Paint 绘制(把边框颜色、文字颜色、阴影等画出来)
  6. Compose 合成(根据层叠关系展示画面)

了解浏览器渲染的过程原理之后,我们还需要了解如何更新样式,总共有如下三种方式:

  • JS/CSS > 样式 > 布局 > 绘制 > 合成(三步全走,如div.remove())
  • JS/CSS > 样式 > 绘制 > 合成(跳过layout,如改变背景颜色)
  • JS/CSS > 样式 > 合成(改变transform,只需composite)

CSS Triggers 这个网站,可以查看每个属性出发哪一种流程。

transform 四个常用功能

1. translate (移动)

  • transform: translateX(length-percentage)横向移动;

  • transform: translateY(length-percentage)纵向移动;

  • transform: translate(length-percentage, length-percentage)

  • transform: translateZ垂直于视点移动;

  • transform: translate3d(x,y,z)

(百分数可以为负) translate(-50%,-50%)可做绝对定位元素的居中 (不支持IE)

2. scale (缩放)

写法:

  • transform: scaleX(number)

  • transform: scaleY(number)

  • transform: scale(number, number); (通常不用,因为容易出现模糊)

3. rotate (旋转) 一般用于360度旋转制作loading

写法:

  • transform: rotate (angle | zero) 默认以垂直于屏幕的轴(Z)进行旋转
  • transform: rotateZ(angle | zero)
  • transform: rotateX (angle | zero)
  • transform: rotateY (angle | zero)
  • transform: rotate3d(复杂,基本用不到)

4.skew (歪斜)

写法:

  • transform: skewX(angle | zero)
  • transform: skewY(angle | zero)
  • transform: skew(angle | zero, angle | zero)

transform多重效果

通过将以上属性组合使用,实现一些复杂效果

eg: transform: scale(0.5) translate(-100%,-100%) (两个属性中间空格隔开)

transform: none;取消所有。

transition 过渡

  • 语法:transition: 属性名 时长 过渡方式 延迟

示例 transition: left 200ms liner 3s(可以用逗号分隔两个不同属性)

  • 过渡方式有: linear(线性匀速) |ease(缓慢)|ease-in(淡入)|ease-out(淡出)|ease-in-out(淡入且淡出)... 其他不常用的查MDN

注: 不是所有属性都能过渡,找不到过渡规律的都无法过渡。

  • 比如 display: none=>display: block 无法过渡

  • 如果想让一个元素从看得见到看不见:

不用display: block=>none (直接消失不见且不占位置)

而用visibility: visible =>hidden(消失但还是占位置)

  • 过渡必须要有起始,除了起始之外,还可以有中间点。

如果有中间点,可以通过下列两种方法解决

1. 使用两次 transform

.a === transform ===> .b

.b === transform ===> .c

示例:image.png

2. 使用 animation

声明关键帧

添加动画

示例:image.png

animation

@keyframes(声明关键帧)完整语法

有两种写法:

  • 第一种:用百分数 0%=>100% (用得更广泛)
@keyframes xxx{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(100%);
    }
}

  • 第二种:from => to
@keyframes xxx{
    0%{
        transform: none;
    }
    66.66%{
        transform: translateX(200px);
    }
    100%{
        transform: translateX(200px) translateY(100px);
    }
}

缩写语法: animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名

  • 时长:1s 或 1000ms
  • 过渡方式:跟 transition 取值一样
  • 次数:3 或者 2.4 或者 infinite
  • 方向:reverse | alternate | alternate-reverse
  • 填充模式:none | forwards | backwards | both
  • 是否暂停:paused | running

以上所有属性都有对应的单独属性

  • 如果要动画停在最后一帧:
animation:动画名 持续时间 forwards;

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们