理解CSS | 青训营笔记

qhangz
83 阅读6分钟

理解CSS

基础知识

层叠

  • 层叠三大规则（优先级递减）
    1. 样式表的来源
    2. 选择器的优先级
    3. 源码位置

image.png

image.png

image.png

image.png

继承

可以使用inherit关键词显示指定一个属性值从其父元素继承

CSS值和单位

image.png

  1. 长度单位

  • 绝对长度：

    • px（像素）：最常见的单位，通常用于屏幕显示。一个像素对应于屏幕上的一个点。
    • cm（厘米）、mm（毫米）、in（英寸）、pt（磅，1/72 英寸）、pc（点，1/6 英寸）：这些单位主要用于打印媒体，它们基于物理尺寸。

  • 相对长度：

    • em：相对于当前元素的字体大小。例如，如果当前字体大小是 16px，那么 2em 等于 32px。
    • rem：相对于根元素（通常是 ）的字体大小。与 em 类似，但始终基于根元素的字体大小。
    • vw（视窗宽度）、vh（视窗高度）：相对于视口（浏览器可见区域）的宽度和高度。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
    • vmin、vmax：分别等于视口宽度和高度中的较小值和较大值。

  1. 角度单位

    • deg（度）：角度单位，一圈有 360 度。
    • rad（弧度）：角度单位，一圈有 2π 弧度。
    • grad（梯度）：角度单位，一圈有 400 梯度。
    • turn：角度单位，一圈等于 1 turn。

  2. 时间单位

    • s（秒）：时间单位，用于表示秒。
    • ms（毫秒）：时间单位，用于表示毫秒，1ms 等于 0.001s。

  3. 分辨率单位

    • dpi（每英寸点数）：表示每英寸内有多少个点（像素）。
    • dpcm（每厘米点数）：表示每厘米内有多少个点（像素）。
    • dppx（每像素点数）：表示每像素内有多少个点（像素），1dppx 等于 96dpi。

布局和定位

概述

  1. Flex弹性盒子布局：一维空间布局
  2. Grid网格布局：二维空间布局
  3. Multicol多列布局：文本、内容的多列展示

Grid 是一种二维布局系统，它可以将一个网页分成多个网格，方便对其进行排列和定位。Grid 可以通过设置网格的行和列，以及指定每个网格所占据的空间比例来实现布局。Grid 还支持自动调整网格位置和大小的功能，使得网页在不同屏幕尺寸和设备上都能够适应。

Flex 也是一种常见的 CSS 布局技术，它主要用于实现 web 页面的单向布局，即在一个主轴上排列元素。Flex 布局可以让开发者更加灵活地控制网页中各元素的位置和大小，并且可以很好地适应不同屏幕尺寸和设备。

Multi-column layout 则是一种专门用于多栏文本排版的 CSS 技术。它可以帮助开发者轻松地将长篇文章或其他大块文本分成多个列，以提高阅读体验和页面的可读性。Multi-column layout 支持指定列数、列宽、列间距等参数，并且可以自动调整内容的排列方式以适应不同屏幕尺寸和设备。

image.png

层叠上下文（The Stacking Context）

层叠上下文（Stacking Context）是 CSS 中用于描述元素的绘制顺序和相关属性的一种机制。在一个 HTML 文档中，可以将所有元素都看作是一个三维空间中的盒子。而层叠上下文则可以理解为这些盒子在垂直方向上的分层，每一层由一个或多个元素组成，它们共享一些相似的绘制属性。

当一个元素触发了层叠上下文时，该元素及其后代元素将按照特定的规则被分配到一个新的层叠上下文中。这个新的上下文会影响到这些元素的渲染顺序、透明度、z-index 等属性。一般来说，具有较高层叠水平值（z-index）的元素会出现在较低的层叠上下文之上。

image.png

变形、过渡、动画

  1. transform变形

    • 2D相关属性：
      • translate（移动）、rotate（旋转）、scale（缩放）、matrix（变形矩阵）
      • right top、center等表示形变时依据的原点
    • 3D相关属性
    • image.png

  2. transition过渡
    通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态。
    其中timing-function一般有三种用法：线性（linear）、贝塞尔曲线（cubic-bezier（）或ease-in等）、阶跃（step）

  3. animation动画

@keyframes关键帧用来定义动画过程中出现的关键样式

image.png

响应式设计

媒体查询

  • css语法
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}
  • 实例
    @media screen and (max-width: 300px) {  
    body {  
        background-color:lightblue;  
    }  
}
  • 可以针对不同的媒体使用不同样式文件 :
<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

设备像素、参考像素和移动设备视口

  1. 设备像素
    • 显示器上绘制的最小单位
    • dpi：每英寸多少点
    • ppi：每英寸多少像素数
  2. css像素（参考像素）
    • 存在目的：为了保证阅读体验一致
  3. DPR设备像素比
    • DPR = 设备像素/css像素

移动端的viewport

image.png

image.png

相对长度使用

一、px

px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的。

二、em

em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：

  1. em的值并不是固定的

  2. em会继承父级元素的字体大小

三、rem

rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位 优点：只需要设置根目录的大小就可以把整个页面的成比例的调好

rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem

如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

em与rem的区别：

rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小

四、vw、vh

vw、vh、vmax、vmin这四个单位都是基于视口

vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100

假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

假如浏览器的高度为500px，那么1vh就等于5px（500px/100）

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

五、其他单位：

%（百分比）

一般来说就是相对于父元素

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

六、vm

css3新单位，相对于视口的宽度或高度中较小的那个

其中最小的那个被均分为100单位的vm

比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px

缺点：兼容性差

avatar
文章
阅读
粉丝