CSS知识总结

前端小菜鸡123
246 阅读7分钟

从CSS 基础、CSS 布局、CSS 定位、CSS 动画四方面归纳总结，以达到巩固知识点、加深印象的目的。

一、CSS 基础

资料查询和工具

资料查询方式

  • MDN、张鑫旭blog、CCS tricks

查看浏览器是否兼容网站

练习素材：

  • PSD：在 Freepik 搜索 PSD web；365PSD 里面的 UI 套件
  • 效果图：dribbble.com
  • 商业网站

常用草图工具

  • balsamiq、Figma、墨刀、Adobe XD

浏览器渲染时，属性触发样式查询

CSS 动画优化学习网站

文档流

  • inline 元素流动方向从左到右，宽度为内部元素的和、高度由 line-height 决定，不可以使用 width 和height。
  • block 元素从上到下，宽度默认计算、高度由内部文档流元素决定，可以使用 width 和height。
  • inline-block 元素也是从左到右，但可以自动换行，可以使用 width 和height。
  • float | position: absolute/fixed 元素可以脱离文档流

overflow 溢出

  • 内容宽度和高度大于容器时会产出溢出，可使用 overflow 设置滚动条，可分为 overflow-X 和 overflow-Y。
  • auto 是灵活设置滚动条，根据内容是否溢出来决定是否显示滚动条。
  • scroll 是永远显示滚动条
  • hidden 是直接隐藏溢出部分内容
  • visible 是显示溢出部分内容

1636620592(1).png

两种盒模型

  • content-box 内容盒，content-box width = 内容宽度。
  • border-box 边框盒，border-box width = 内容宽度 + padding + border。

1636621680(1).png

margin 合并

  • 父子 margin 和兄弟 margin 会合并
  • 阻止父子 margin 合并的方式： border | padding | overflow: hidden | display: flex
  • 阻止兄弟 margin 合并的方式： display: inline-block

1636623938(1).png

长度单位和颜色

长度单位

  • px 像素；em 相对于自身 font-size 的倍数；百分数；整数；rem；vw；vr

颜色

  • 十六进制 #FF6600 或者 #F60；RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)；hsl 颜色 hsl（360，100%，100%）

“彩虹”示例：js.jirengu.com/xehevugojo/…

二、CSS 布局

布局分类

  • 固定宽度布局，一般为 960 / 1000 / 1024 px。
  • 不固定宽度布局，通过文档流的原理实现。
  • 响应式布局，PC 端为固定宽度布局，移动端为不固定宽度布局。

float 布局

区分

  • 标签、元素、属性（属性名和属性值）、样式

作用

  • 从网页的文档流中移除，并指定一个元素沿容器左侧或者右侧放置，且允许文本和内联元素环绕。

步骤

  • 在父元素上加.clearfix
  • 在子元素上加 float:left 和 width

注意事项

  • 最后一个元素不设width
  • float 是为 IE 准备的，而手机上没有IE，所以不需要做响应式。
  • IE6/7 存在双倍 margin bug，可以通过把 margin 减半或者添加一个样式 display: inline-block 解决问题。
  • 加上头尾，即可满足所有PC页面需求，但手机页面不会用 float。

float 布局示例：js.jirengu.com/yikuyafeze/…

flex 布局

  • 作用：Flexible Box 模型，给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
  • 理解主轴、交叉轴、起始线、终止线的概念，主轴由 flex-direction 定义。
  • 起手式：让一个元素变成 flex 容器

1.png

  • flex-direction，属性初始值为 raw。

2.png

  • flex-wrap，属性初始值为 nowrap。

3.png

  • flex-flow，flex-direction 和 flex-wrap 的缩写。
  • flex-grow，作用是控制主轴方向可用空间的分配比例。
  • flex-shrink，根据比例控制 flex 元素的收缩程度。
  • flex-basis，默认值是auto，定义了该元素的空间大小，flex 容器中除该元素所占空间外的富余空间即可用空间。
  • flex，缩写形式。第一个数值是 flex-grow，第二个数值是 flex-shrink，第三个数值是 flex-basis。
  • align-items，作用是使元素在交叉轴方向对齐。这个属性的初始值为 stretch，这就是为什么 flex 元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器，最高的元素定义了容器的高度。

7.png

  • justify-content，用来使元素在主轴方向上对齐。

4.png

  • align-content，使多行元素在交叉轴方向对齐。

5.png

  • align-self

6.png

  • order: 控制元素的顺序

flex 布局示例：js.jirengu.com/vexofuwaso/…

grid 布局

  • 让一个元素成为 grid 容器

1636680483(1).png

  • 控制行和列，同时给每行每列命名。

1636680623(1).png

1636680739(1).png

三、CSS 定位

定位属性 position

五个属性值

  • static 是默认值，待在文档流里。
  • relative 相对定位，升起来，但不脱离文档流。
  • absolute 绝对定位，定位基准是祖先里的非 static。
  • fixed 固定定位
  • sticly 粘滞定位

课堂代码及笔记：js.jirengu.com/senutocage/…

层叠上下文

  • 每个层叠上下文就是一个新的小世界（作用域）
  • 这个小世界里面的 z-index 与外界无关，处在同一小世界里的 z-index 才能比较。
  • 负 z-index 逃不出小世界

四、CSS 动画

动画的原理

  • 由许多静止的画面组成，每个静止的画面叫做帧。
  • 画面以一定的速度连续播放（如每秒 n 张），而肉眼因视觉残象产生错觉，认为是活动的画面。

浏览器渲染原理

步骤

  • 根据 HTML 构建 HTML 树（DOM）
  • 根据 CSS 构建 CSS　树（CSSOM）
  • 将两颗树合并成一颗渲染树（render tree）
  • Layout 布局（文档流、盒模型、计算大小和位置）
  • Paint 布局（把边框颜色、文字颜色、阴影等画出来）
  • Compose 合成（根据层叠关系展示画面）

三颗树

1636686588(1).png

三种更新方式

1636686747(1).png

动画优化

CSS 优化

  • 使用 will-change 或 translate

JS 优化

  • 使用 requestAnimationFrame 代替 SetTimeout 或 setlnterval

变换属性 transform

作用

通过修改CSS视觉格式化模型的坐标空间来实现元素的旋转，缩放，倾斜或平移，transform 中文意思为“改变”。

四个常用功能

  • 位移 translate
  • 缩放 scale
  • 旋转 rotate
  • 倾斜 skew

设置绝对居中

left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/* 先将盒设置为距离左边和顶部的距离都为 50% ，然后再将盒中线缩进50%。 */

过渡属性 transition

作用

  • 补充中间帧

语法

  • transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性，对应四个功能：属性名、时长、过渡方式、延迟。
  • 可以用逗号分隔两个不同的属性；可以用 all 代表所有属性。
  • 过渡方式包括：linear | ease | ease-in | ease-out | ease-in-out | cubic-bexier | step-start | step-end | steps
<div class="demo"></div>

.demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  transition: all 1s ease-in-out 3s;
}
.demo:hover{
  width: 200px;
  height: 200px;
}
  • 部分属性无法过渡，如display: none => block，一般改成　visibility: hidden => visible
.demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  transition: all 1s ease-in-out 3s;
  display: block;
}
.demo:hover{
  width: 200px;
  height: 200px;
  display: none;
}

.demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  transition: all 1s ease-in-out 3s;
  visibility: visible;
}
.demo:hover{
  width: 200px;
  height: 200px;
  visibility: hidden;
}
  • background 颜色和 opacity 透明度都可以过渡。当使用 background tgba(n,n,n,0.5) 表示透明度时，它仅表示背景色变透明，而使用 opacity 时整体都会变透明。

“跳动的心“示例（transition ）：js.jirengu.com/gukitadalo/…

两次动画设置及动画属性 animation

使用两次 transform

  <div class="wrapper">
    <div id="demo"></div>
    <button id="button">开始</button>
  </div>

#demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  transition: transform 1s linear;
}
#demo.b {
  transform: translateX(200px);
}
#demo.c {
  transform: translateX(200px) translateY(200px);
}

button.onclick = () => {
  demo.classList.add('b')
  setTimeout(() => {
    demo.classList.remove('b')
    demo.classList.add('c')
  }, 1000)
}

使用动画属性 animation

  • 缩写语法：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充方式 | 是否暂停 | 动画名；
  • 时长：1s 或者 1000ms
  • 过渡方式：跟 transition 取值一样
  • 次数：3 或者 2.4 或者 infinite
  • 方向：reverse | alternate | alternate-reverse
  • 填充方式：none | forwards | backwards | both
  • 是否暂停：paused | running
#demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
#demo.start {
  animation: 1.5s forwards xxx;
}
@keyframes xxx{
  0%{transform: none;}
  50%{transform: translateX(200px)};
  100%{transform: translateX(200px) translateY(200px)}; 
}

“跳动的心“示例（animation）：js.jirengu.com/pogafolazi/…

avatar
文章
阅读
粉丝