深入理解CSS | 青训营笔记

You1i
170 阅读8分钟

写在前面

学习CSS有什么好处？

  1. 提高网页设计的质量：CSS可以让网页的样式更加美观、清晰，提高用户体验，从而提高网页的质量。
  2. 提高网页的可维护性：使用CSS可以将网页的样式与内容分离，使得修改样式更加方便，同时也减少了代码的冗余，提高了网页的可维护性。
  3. 提高网页的可访问性：CSS可以使得网页更加易于访问，例如可以通过CSS控制网页的字体大小、颜色等，使得网页更加适合不同的用户。
  4. 提高网页的性能：使用CSS可以减少网页的加载时间，从而提高网页的性能。例如，可以通过CSS将多个图片合并成一个图片，从而减少了HTTP请求的次数。

基础知识

CSS基础知识很多，这里只涉及到：Casading规则、选择器、继承、值和单位、盒模型。

Casading(层叠)、优先级

CSS

层叠三大规则有：

  • 样式表来源
  • 选择器优先级
  • 源码位置

选择器的优先级

  • !important
  • 内联样式
  • ID选择器
  • 类选择器/属性选择器/伪类选择器
  • 元素选择器/伪元素选择器
  • 关系选择器/通配符选择器

CSS推荐书写规范：

  • 选择器尽量少用id
  • 尽量不要用！important
  • 自己的样式加载在引用库样式的后面

源码位置

  1. 对于@import的样式，根据@import的顺序决定
  2. 对于link和style标签的样式，根据在document中的顺序决定

继承

  • 大部分具有继承特性的属性跟文本相关：color、font、font-family、font-size、font-weight、font-variant、fontstyle、line-height、letter-spacing、text-align、text-indent、texttransform、white-space以及word-spacing还有少部分列表、表格的属性
  • 可以使用inherit关键字显式指定一个属性值从其父元素继承

单位和值

CSS中的值可以是数字、颜色、长度、百分比等等。下面是一些常见的CSS单位：

  • 长度单位：像素（px）、厘米（cm）、毫米（mm）、英寸（in）、点（pt）和派卡（pc）等。
  • 百分比单位：相对于父元素的百分比，例如width: 50%。
  • 颜色单位：可以使用颜色名称、十六进制值、RGB值、RGBA值等。
  • 字体单位：像素（px）、百分比（%）、em、rem等。

盒子模型

盒子模型是CSS中的一个重要概念，它描述了一个元素在页面上的布局方式。每个元素都被视为一个矩形盒子，该盒子由四个部分组成：内容区域(content)、内边距区域(padding)、边框区域(border)和外边距区域(margin)。

盒子模型

扩展：画一个三角形

注意：padding、border、margin中，只有margin可以设置负值

布局

CSS布局是指使用CSS来控制HTML元素的位置和大小。

常规流布局

常规流布局是指使用CSS中的常规流来控制HTML元素的位置和大小。常规流布局是CSS布局的一种基本形式，它使用盒模型来控制元素的大小和位置。

常规流布局

扩展：

  • 块状格式化上下文
    • 边框塌陷
  • 内联块状化上下文

弹性布局

Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向（横向/纵向）的调整更为灵活。

flex

网格布局

2017年推出的Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。

网格

定位Position

为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用top, right, bottom, left对其进行定位。

  • relative：元素相对于自己原来在文档流中的位置进行定位，但是原来文档流的空间还在。
  • absolute：元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素的进行定位。
  • fixed：元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置。
  • sticky：元素相对它的最近滚动祖先（祖先的overflow是scroll/hidden/auto）的视口(scrollport)定位。

层叠上下文

层叠上下文是指在HTML文档中，每个元素都有一个层叠上下文，它决定了元素在页面上的显示顺序和相互之间的关系。

层叠上下文

形成新的层叠上下文的条件（任一即可）：

  • 形成新层叠上下文MDN介绍position: relative或absolute;并且z-index不是auto
  • position: fixed或sticky
  • flex或grid的子元素；并且z-index不是autoopacity的值小于1
  • transform的值不为none
  • will-change的值不为通用值

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序：

image

编写z-index的建议：

  1. 使用css变量或者预处理语言的变量，管理z-index的值
  2. 将预设间隔设置10或100，方便后续的插入

变形、过渡、动画

变形、过渡和动画是CSS中用于创建交互式和动态效果的基本技术。

变形

CSS变形有两种：

  • 2D
    • transform: translate(移动)、rotate(旋转)、scale(放缩)、matrix(变形矩阵)等
    • transform-origin: right top、center等表示变形时依据的原点
  • 3D
    • transform: translate3d、rotate3d、scale3d、matrix3d等
    • transform-origin: right top、50px 30px等表示变形时依据的原点
    • transform-style: flat或preserve-3d看子元素的3d表现
    • perspective：观看点距离z=0这个平面的距离,可以在transform中用perspective()使用作用为当前元素，也可以直接使用，给后代元素一个统一值
    • perspective-origin：观看者的位置，如top、bottom等
    • backface-visibility：元素正面只有朝向观察者的时候可见

过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态。

image

其中timing-function一般有三种用法：线性(linear)、贝塞尔曲线(cubic-bezier()或ease-in等)、阶跃(step)。

动画

  • @keyframes关键帧用来定义动画过程中出现的关键样式
  • animation-*相关属性用来为元素添加动画
    • animation-name：定义好的关键帧的名字
    • animation-duration：动画时长
    • animation-timing-function：动画节奏
    • animation-delay：延时开始的时间
    • animation-iteration-count：执行次数
    • animation-direction：是否反向或交替
    • animation-fill-mode：动画执行前后的样式采用
    • animation-play-state：动画运行状态

响应式设计

响应式设计是指通过使用CSS媒体查询和其他技术，使网站能够在不同的设备和屏幕尺寸上呈现出最佳的用户体验。

响应式设计的原则：

  • 优先选用流式布局，如百分比、flex、grid等
  • 使用响应式图片，匹配尺寸，节省带宽
  • 使用媒体查询为不同的设备类型做适配
  • 给移动端设备设置简单、统一的视口
  • 使用相对长度，em、rem、vw做为长度度量

媒体查询

媒体查询是一种CSS3模块，它可以根据设备的特性来应用不同的CSS样式。媒体查询可以使用CSS的@media规则来实现，语法为@media mediatype and (condition) { CSS rules }。 媒体查询可以检测设备的屏幕尺寸、方向、分辨率、颜色、触摸等特性，并根据这些信息来应用不同的CSS样式。

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

显示

设备像素（物理像素）：显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。

dpi（dots per inch）：每英寸多少点。

ppi（pixels per inch）：每英寸多少像素数。

当用于描述显示器设备时ppi与dpi是同一个概念，说的是每英寸多少物理像素及显示器设备的点距。

CSS像素（reference pixel）其实是一个视⻆单位。规范给出的定义是，1css像素是从一臂之遥看解析度为96DPI（即1英寸96点）的设备输出时，1点（即1/96英寸）的视⻆。

设备像素比（dpr）：描述的是未缩放状态下，设备像素和CSS像素的初始比例关系

单位长度

em：在非font-size属性中使用是相对于自身的字体大小，在font-size上使用是相对于父元素的字体大小。

rem：根元素的字体大小。通过伪类:root或者html选择器选定。由于是根元素的font-size，所以不会像em那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局.

vw：视窗宽度的1%。vh：视窗高度的1%。同样，vw也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%，所以不需要js动态配置。

avatar
文章
阅读
粉丝