一篇普通的周记

最新推荐文章于 2024-10-12 11:41:28 发布

李白白.

最新推荐文章于 2024-10-12 11:41:28 发布

阅读量70

点赞数

文章标签：性能优化

本文链接：https://blog.csdn.net/qq_3047318787/article/details/134906653

版权

关于RGB

RGB 值在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：

rgb(red, green, blue) 每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。

要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。

要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。

关于伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。 “:after” 伪元素可以在元素的内容之后插入新内容。

::before或::after都必须和content属性结合使用，content不能没有，内容至少为空；伪元素的display默认为inline，可以自己改.

关于2D，3D

CSS3的变形是一些效果的集合，如平移，旋转，缩放倾斜效果，每个效果都可以称之为变形（transform）语法：transform: none|transform-functions; none 定义不进行转换。 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。 translateZ(z) 定义 3D 转换，只是用 Z 轴的值。 scale(x,y) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图

transition过度属性 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始

关于liner,ease等的区别

linear => cubic-bezier(0, 0, 1, 1)

动画自始至终以同一速度再变化。

2、ease => cubic-bezier(0.25, 0.1, 0.25, 1.0)

动画缓慢开始，「突然」加速，再缓慢结束；

3、ease-in => cubic-bezier(0.42, 0.0, 1.0, 1.0)

动画缓慢开始，然后逐渐加速直到结束。

4、ease-out => cubic-bezier(0.0, 0.0, 0.58, 1.0)

动画突然开始，然后逐渐减速直到结束。也就是说它的开始速度很快。

5、ease-in-out => cubic-bezier(0.42, 0.0, 0.58, 1.0)

这个是 ease-in 和 ease-out 的结合，前半段是 ease-in 的表现，后半段是 ease-out 的表现。动画缓慢开始，加速，缓慢结束。

关于单位

\1. 绝对单位（Absolute Units）：绝对单位是与物理尺寸相关的单位，其值在不同设备和环境下保持固定。常见的绝对单位有：

- 像素（Pixel，px）：像素是最常用的绝对单位，表示屏幕上的一个点。像素是固定的，不会根据屏幕大小而变化。在CSS中，像素通常用于指定元素的尺寸、间距、边框等属性。

- 英寸（Inch，in）：英寸是一个物理单位，表示1英寸等于2.54厘米。在CSS中，可以使用英寸作为尺寸单位来指定元素的大小。

- 厘米（Centimeter，cm）：厘米是一个物理单位，表示1厘米等于0.3937英寸。在CSS中，可以使用厘米作为尺寸单位来指定元素的大小。

- 毫米（Millimeter，mm）：毫米是一个物理单位，表示1毫米等于0.03937英寸。在CSS中，可以使用毫米作为尺寸单位来指定元素的大小。

- 点（Point，pt）：点是一个物理单位，表示1点等于1/72英寸。在CSS中，可以使用点作为尺寸单位来指定元素的大小。

\2. 相对单位（Relative Units）：相对单位是相对于其他尺寸或者环境的单位，其值会根据上下文的变化而变化。相对单位可以实现响应式布局和适应不同屏幕尺寸的需求。常见的相对单位有：

- 百分比（Percentage，%）：百分比是相对于父元素的度量单位。在CSS中，可以使用百分比来指定元素的大小、边距、填充等属性。例如，width: 50%; 表示元素的宽度为父元素宽度的50%。

- 视窗单位（Viewport Units）：视窗单位是相对于浏览器视口的度量单位。视窗单位可以根据浏览器窗口的大小来调整元素的大小。常见的视窗单位有：

- 视窗宽度（Viewport Width，vw）：视窗宽度单位表示相对于浏览器窗口宽度的百分比。例如，width: 50vw; 表示元素的宽度为浏览器窗口宽度的50%。

- 视窗高度（Viewport Height，vh）：视窗高度单位表示相对于浏览器窗口高度的百分比。例如，height: 50vh; 表示元素的高度为浏览器窗口高度的50%。

- 视窗最小宽度（Viewport Minimum Width，vmin）：视窗最小宽度单位表示相对于浏览器窗口宽度和高度中较小值的百分比。例如，width: 50vmin; 表示元素的宽度为浏览器窗口宽度和高度中较小值的50%。

- 视窗最大宽度（Viewport Maximum Width，vmax）：视窗最大宽度单位表示相对于浏览器窗口宽度和高度中较大值的百分比。例如，width: 50vmax; 表示元素的宽度为浏览器窗口宽度和高度中较大值的50%。

- 字体相对单位（Font Relative Units）：字体相对单位是相对于字体尺寸的单位。常见的字体相对单位有：

- em：em单位是相对于元素的字体大小的倍数。例如，font-size: 1.2em; 表示字体大小为父元素字体大小的1.2倍。

- rem：rem单位是相对于根元素（即html元素）的字体大小的倍数。例如，font-size: 1.5rem; 表示字体大小为根元素字体大小的1.5倍。

- ch：ch单位是相对于"0"字符的宽度的倍数。例如，width: 10ch; 表示元素的宽度为"0"字符的宽度的10倍。

- 相对长度单位（Relative Length Units）：相对长度单位是相对于元素自身的某个属性值的单位。常见的相对长度单位有：

- rem：rem单位是相对于根元素（即html元素）的字体大小的倍数。在CSS中，可以使用rem单位来指定元素的尺寸、间距、边框等属性。rem单位通常用于实现整个页面的相对尺寸。

- em：em单位是相对于元素的字体大小的倍数。在CSS中，可以使用em单位来指定元素的尺寸、间距、边框等属性。em单位可以根据元素自身的字体大小来调整元素的尺寸。

这些单位的选择取决于具体的需求和设计要求。绝对单位适用于需要精确控制尺寸的情况，而相对单位则适用于需要实现响应式布局和适应不同屏幕尺寸的情况。在选择单位时，需要考虑到不同设备和屏幕的差异，以确保页面在不同设备上的一致性和适应性。

总结一下，CSS的单位可以根据其特性和用途进行分类，包括绝对单位（像素、英寸、厘米、毫米、点）和相对单位（百分比、视窗单位、字体相对单位）。相对单位还可以细分为相对长度单位。选择合适的单位可以实现精确的控制和适应不同屏幕尺寸的需求。

关于光标

cursor : 网页浏览时用户鼠标指针的样式或图形形状。

属性值： default：默认光标（通常是一个箭头） auto：默认，浏览器设置的光标 crosshair：光标为十字线 pointer：光标为一只手 move：光标为某对象可移动 text：光标指示文本 wait：光标指示程序正在忙（通常是一只表或者一个沙漏）

补： cursor: not-allowed;

一些知识点

list-style-type: none; 是 CSS 的一条规则，用于移除 HTML 列表项前面的标记（例如圆点、数字等）。

例如，在 HTML 中，<ul> 或 <ol> 标签定义了一个列表。默认情况下，浏览器会为列表中的每个项目添加标记（例如 <ul> 中的圆点，<ol> 中的数字）。

使用 list-style-type: none; 可以移除这些默认的标记，使得列表看起来更简洁。

margin:0;padding:0 是 CSS 中的一种常用的样式设置，用于将元素的边距（margin）和内填充（padding）设置为零。

margin: 0; 是设置元素的外边距为零。在 CSS 中，margin 是用来控制元素与其周围元素的距离。当设置为 0 时，元素会紧贴其周围的元素，没有任何间距。
padding: 0; 是设置元素的的内填充为零。padding 是用来控制元素内部与其边框的距离。当设置为 0 时，元素的内容将紧贴其边框，没有任何间距。

float: none;width: auto 是 CSS 中的一种样式设置，用于取消元素的浮动效果并将其宽度设置为自动。

float: none; 是设置元素的浮动效果为无。在 CSS 中，float 属性用于让元素向左或向右浮动，通常用于排版。设置为 none 则表示取消元素的浮动效果，让元素回到默认的布局行为。
width: auto; 是设置元素的宽度为自动。在 CSS 中，width 属性用于设置元素的宽度。设置为 auto 表示元素的宽度将根据其内容、内边距（padding）、边框（border）等自动计算，而不是固定为一个特定的值。

overflow: auto; 是 CSS 中的一种属性设置，用于控制当内容溢出一个元素的框时如何处理溢出的内容。

overflow 属性有四个主要的值：

visible：这是默认值。如果内容被剪裁，它仍然会显示在元素的框外。
hidden：如果内容被剪裁，它不会显示在元素的框外。这是最简单的防止内容溢出的方法。
scroll：如果内容被剪裁，它仍然会显示在元素的框外，但浏览器会显示滚动条以便查看全部内容。
auto：浏览器将根据内容决定是否添加滚动条。如果内容超出了元素的框，浏览器将显示滚动条。

font-weight: bold; 是 CSS 中的一个属性设置，用于定义文本的粗细。

font-weight 属性用于设置字体的粗细。该属性的值可以是 normal，bold，bolder，lighter，或者是从 100 到 900 的数字。

normal: 这是默认的字体粗细。
bold: 这会使字体变粗。
bolder: 这会使字体比其父元素的字体更粗。
lighter: 这会使字体比其父元素的字体更细。
100 到 900: 这些数字代表了不同的粗细等级。100 最细，900 最粗。

<header>头部。标签通常被用来包含网站的标题、标语、导航栏等内容。

<article>内容。标签用来表示一个独立的内容单元，通常包含一些文章、新闻故事或其他可以自我包含的内容。

<aside> 侧边。标签用于表示与周围内容稍微有关的内容，通常这些内容与页面的主要内容部分相关。它通常被用来放置与主要内容相关的辅助信息，如侧边栏、广告等

.flex-container > * { padding: 10px; flex: 1 100%; }

flex: 1 100%; 这是Flexbox布局的属性，它表示子元素将等比例地占据可用空间。具体来说，flex: 1 是指每个子元素都有相同的弹性（flex），而 100% 是指每个子元素都尽可能地占据整个可用空间。

flex: 1 auto; auto：这是 flex-shrink 的值，表示这个子项的最小尺寸。auto 表示这个子项将尽可能地缩小以适应其内容的大小，但不会缩小到小于其最小尺寸。

@media all and (min-width: 800px) {}

@media：这是一个 CSS 规则，用于定义媒体查询。这意味着我们正在定义一个规则，该规则只在满足特定媒体条件的情况下应用。
all：这是媒体类型。all 表示这个媒体查询应用于所有设备。
and：这是一个连接词，表示接下来的条件必须与前面的条件同时满足。
(min-width: 800px)：这是一个媒体特性，检查设备的视口宽度是否至少为 800 像素。如果设备的视口宽度大于或等于800像素，那么这个媒体查询的条件就满足。