理解CSS|青训营笔记

match_M
122 阅读7分钟

CSS发展史&&CSS知识总览

6133d18b3e765e0a9f6b7c83962664e.png

7f0f4048e0fa20fa3c1414be1c55878.png

1.基本样式

层叠规则

d8b86b7b5780878bbe100c97fa5a7c6.png

  • 用户代理（User Agent，通常指浏览器）：为HTML元素提供了一组默认的样式。
  • 用户样式表（User Stylesheets）：用户样式表是由用户自定义的样式表，可以用于覆盖用户代理样式和作者样式表中的某些样式。
  • 作者样式表（Author Stylesheets）：作者样式表是由网页开发者创建的样式表，用于定义网页的布局、外观和交互。【内联样式、嵌入式样式、外部样式表】

内联式：tyle="" 嵌入式：

f32cb8470a0bbff0518629655e7b01e.png

属性选择器：根据元素的属性和属性值选择元素。例如，[data-attribute]选择具有data-attribute属性的所有元素，[data-attribute="value"]选择具有data-attribute属性且其值为value的所有元素。

css权重：

7ae32f15b4c094ec3ea68f0343b1402.png

合理使用：

fb99887812569fe2bca103ec8514cb4.png

继承：

ccbfcb1d56601aaa754f9c49c96c5d5.png

值和单位：

f4667123bc93bc5a57b4e3b6f612f18.png

绝对长度中：in（英寸）、pt（磅，1/72 英寸）、pc（点，1/6 英寸）：这些单位主要用于打印媒体，它们基于物理尺寸。

相对长度中：vw（视窗宽度）、vh（视窗高度）：相对于视口（浏览器可见区域）的宽度和高度。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。

  1. 角度单位

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

  2. 分辨率单位

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

  3. 颜色

    • 预定义颜色：使用 CSS 中预定义的颜色名称。例如：color: red;

    • 十六进制颜色：使用 3 或 6 个十六进制数字表示颜色。例如：color: #ff0000; 或 color: #f00;

    • RGB 颜色：使用三个介于 0 和 255 之间的整数表示颜色。例如：color: rgb(255, 0, 0);

    • RGBA 颜色：与 RGB 类似，但还包括一个表示透明度的值（0 到 1 之间的小数）。例如：color: rgba(255, 0, 0, 0.5);

    • HSL 颜色：使用色相（0 到 360 之间的整数）、饱和度（百分比）和亮度（百分比）表示颜色。例如：color: hsl(0, 100%, 50%);

    • HSLA 颜色：与 HSL 类似，但还包括一个表示透明度的值（0 到 1 之间的小数）。例如：color: hsla(0, 100%, 50%, 0.5);

  4. 函数生成：

    • URL：使用 url() 函数表示一个资源的 URL。例如：background-image: url("image.jpg");
    • calc()：使用 calc() 函数进行数学计算。例如：width: calc(100% - 20px);
    • linear-gradient()：使用 linear-gradient() 函数创建线性渐变。例如：background-image: linear-gradient(to right, red, blue);
    • radial-gradient()：使用 radial-gradient() 函数创建径向渐变。例如：background-image: radial-gradient(circle, red, blue);
    • transform 函数：例如：rotate()、scale()、translate() 和 skew() 等，用于在不同轴上

盒模型：

9fa02d837e618c9a07d725dc126d4eb.png

683eba89c691b25f347768632ba5f21.png

aspect-ratio实现固定比例矩形：

<div class="rectangle"></div> 
<style> 
    .rectangle {  
        /* 设置矩形的宽度 */  
        width: 200px; ​  
        /* 使用 aspect-ratio 属性设置矩形的宽高比为 4:3 */  
        aspect-ratio: 4 / 3; ​  
        /* 设置矩形的背景颜色和边框 */  
        background-color: lightblue; 
        border: 2px solid black; 
    } ​ 
</style>

实现渐变边框：

  • background-clip: text; 是CSS中的一个属性，用于指定背景图片或颜色的裁剪方式，裁剪的区域是文本的轮廓。将背景图片或颜色限制在文本的轮廓内，而不是整个元素的范围内。这个属性通常用于创建一些特殊的文本效果，比如文字渐变、文字填充等。

  • background-origin属性指定了背景图片相对于元素框的定位区域。它可以有三个值：border-box、padding-box和content-box。background-origin 属性用于设置背景图像的定位区域（即背景图像的起始位置）。该属性可以使用以下三个值之一来进行设置：

    • padding-box: 背景图像的起始位置从内边距边界开始，即背景图像的左上角与元素的内边距左上角重合。
    • border-box: 背景图像的起始位置从边框边界开始，即背景图像的左上角与元素的边框左上角重合。
    • content-box: 背景图像的起始位置从内容区域开始，即背景图像的左上角与元素的内容区域左上角重合。

负外边距：

42bea51b8f4a285b58efa7df7f1532b.png

2.布局

2c27fceca4282bf25f14187d84be5b3.png

外边距塌陷现象：

1371d15ec124a2571ee028a704faed7.png

三种情况：

  • 两兄弟元素之间：上下外边距合并成外边距设置较大的那个
  • 父子元素：以外边距较大的作为外边距【父：margin-top: 20px;子：margin-top: 30px；只显示为30的外边距】
    • 子虽然在父里面，但是子和父是同一个bfc
  • 空块级元素:【没有宽高，margin-top: 20px; margin-bottom: 30px；只剩30px的外边距显示】

解决外边距塌陷：

  • 内边距代替外边距

  • 父级使用border

  • 父级开启一个新的bfc

    • display 属性值为 block、inline-block、table、table-cell、table-caption 等；

    • position 属性值为 absolute 或 fixed；

    • float 属性值不为 none；

    • overflow 属性值不为 visible。

  • 伪元素

    • .parent::before {  content: '';  display: table; }

  • 将元素转换为 Flex 或 Grid 容器

内联式格式化上下文

  • 元素以水平方向进行布局，不会独占一行。
  • 常见的内联级元素有 <span>、<em>、<strong>、<a> 等。
  • 宽度只受内容本身的宽度影响，而无法通过设置 width 和 height 属性进行调整

f2f8853db441ee6c6c440a57c510a6a.png

2aaa7a04f6b93251575562355c44383.png

弹性盒子：

b22df3c4a2f4bd4e2496ec8bd8d3b13.png 应用示例：

a7eae724f2a3200558b5752eff65a87.png

网格布局：

abe81f67f0b85323128e6b850489b0e.png 应用示例：

59a42e16e06738a61fbc18e58db89c1.png

定位：

static、relative、absolute【脱标】、fixed【脱标】、sticky

  • fixed： 元素相对于浏览器窗口进行定位，不随页面滚动而移动。可以使用 top、right、bottom和 left 属性来调整元素的位置。

  • sticky： 当元素在视口内时，它的行为类似于 relative 定位，而当元素在视口外时，它的行为类似于 fixed 定位。可以使用 top、right、bottom 和 left 属性来调整元素的位置。

3.层叠上下文

层叠上下文是对TML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开

920f8f2c7e1a535acac84c6bf27bf21.png

ef5e5c66d19b032b398f8e565fd51d9.png

10159f2f473219f8106c30a2ffd2937.png z-index示例：

f6c3b28dbb9312a3f2d565feff1dce7.png

8a4a487ccb0956bed87d8d2cc3e0e57.png

4.变形、过渡、动画

transform:

transform 属性允许我们对元素进行 2D 或 3D 变换

b55df5337d23641f1c1a294a26a5487.png

55af7b5347af06ec2c005c8c524a007.png

  • transform
    • rotateX(angle)：绕 X 轴旋转指定的角度。
    • scale3d(sx, sy, sz)：分别沿 X、Y 和 Z 轴缩放元素。
    • translate3d(tx, ty, tz)：分别沿 X、Y 和 Z 轴移动元素。
    • perspective(p)：设置透视距离。较小的值会增强 3D 效果。
  • ransform-origin：默认值为 "50% 50% 0"，即元素的中心点。
  • perspective：定义观察者距离元素的距离，较小的值会增强 3D 效果。此通常应用于父元素上。
  • perspective-origin：定义透视投影点的位置。默认值为 "50% 50%"，即元素的中心点。

transition:

fcb37db1b5ce45f7d8835614e913308.png

动画

286d361862cd975ceb7416c5d4dee2e.png

faaf09cfaa9624e7bd1e24b6851e5fe.png

5.响应式设计

原则

868f487e4602c082d00e369a6f258a3.png

媒体查询

e608e89f54a4c7cd961567f544fdee0.png

像素

925ff848d6a0f6149cd46ac0dacd1e5.png

d6347e7053cc5838435126231cb9f31.png

28bc82281d3967929d60a90bec0d76b.png

35b006c93d9cba5b1dcf73cbe23a095.png

移动端的viewport

问题： 0bbdb98fd6a026c5908ed6beade2a99.png 解决办法：

<meta name="viewport" content="width=device-width, initial-scale=1">

  • width=device-width：将 viewport 的宽度设置为设备的物理屏幕宽度。这意味着网页的宽度将根据设备的屏幕宽度进行调整，使内容在不同尺寸的设备上自适应。

  • initial-scale=1：设置页面的初始缩放比例为 1，也就是不缩放。这可以确保在加载时，页面内容会以 100% 的大小显示。

  • minimum-scale：定义页面的最小缩放比例。

  • maximum-scale：定义页面的最大缩放比例。

  • user-scalable：指定用户是否可以手动缩放页面（设置为 yes 或 no）

相对长度的使用

em大小：非嵌套时相对于元素本身，嵌套时相对于父级元素大小

a92f83301cc049fd1786f29b68447de.png

rem大小：表示相对于根元素（即 HTML 元素）的字体大小,在创建响应式设计和组件时尤为有用。

b9be6fb90a06405bd8d9eade68f1739.png

vw：1vw 等于视口宽度的 1%。这意味着，如果浏览器窗口的宽度为 1200px，那么 1vw 就等于 12px。

59c0c2cd77f792f48ff64800f865920.png

6.CSS生态相关

预处理器

scss、less、stylus预处理器

预处理器的使用：

a6b4882bfecf848f964207bb0ab3e1d.png

542e3538decff4fee5522ae5534608c.png

de449aae669ee256b185bedea5bbbd2.png

17a65933ea6512cbe0d6d45bb3853ab.png 三种预处理器的对比：

560bd43e5e9810a263bfce44767c3de.png

后处理器

7faa2f3967ab2230793410b68bd5a96.png

0a5dc91e42351d1f4e29f4422e4520d.png

工程架构

292543cf14109aa5bad3cfa33bfa086.png

3c96e4062061b69112dfdbdad7509a6.png

dbbc21150095a52138e496c49e7a7f0.png

ce917a091ad0b74bff33e1092f85fae.png

d0fea4395a2d4166b3fd7097bf46202.png

f1a93c68bd24c69772ea739cad1e167.png

307351b7658b1fac456d20bab323445.png

avatar
文章
阅读
粉丝