《CSS知识总结》

知有
363 阅读4分钟

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;
avatar
文章
阅读
粉丝