CSS学习笔记

Cascading Style Sheets（折叠样式表）

0. 基础知识

1. 优先级

CSS越是靠下的，优先级越高， 但要注意，对于可继承的属性，选择范围更大的选择器的影响力也可能会更高，甚至!important也无法覆盖，所以使用全局选择器一定要慎重, 如list的list-style-type

* {
    list-style-type: none; 
}

	ol {
        margin-left: 20px;
        padding-left: 20px !important;
        list-style-type: decimal !important; /* 这个会被none覆盖 */
        /* position: relative; */
    }

2. 长度单位

px: 像素

em: 父容器字体大小的倍数

rem: 跟元素字体大小的倍数

vw: 根据当前浏览器窗口的大小，保持相应的百分比宽度 (%单位也可缩放，但以父元素为参考)

vh: 根据当前浏览器窗口的大小，保持相应的百分比高度 (%单位也可缩放，但以父元素为参考)

设置文字大小为相对于根元素（html）字体大小的 1.5 倍

最后一个element也最好加;

1. 添加CSS的三种方式

外部样式表（External CSS）	内部样式表（Internal CSS）	内联样式（Inline CSS）
CSS保存在.css文件中	不使用外部CSS文件	仅影响一个元素
在HTML里使用<link>引用	将CSS放在HTML <style>里	在HTML元素的 style 属性中添加
最常用	也可使用	不推荐，不便后期维护

1.1 外部样式表（External CSS）:

1. 在 title上面，用 link:css明确引用的css, href指向对应的css文件

<link rel="stylesheet" href="./css/style.css">

2. 用 <div clsss> 定义一个box

   <div class="box1">
   

3. 把需要应用css的tag包含在box内

4. 在CSS中通过CSS Selector对指定元素更改Style

   body {
       background-color: #4895b4;
       color: #555555;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 18px;
       font-weight: bold;
   
       /* 这一行和上面3行功能相同，但是因为是从上往下运行的，所以下面这一行会覆盖上面一行的设置。 */
       font: normal 16px Arial, Helvetica, sans-serif;
       line-height: 1.5em;
   }
   
   .box1 {
       color: royalblue;
       background-color: rgb(209, 148, 68);
   }
   
   .box1 h1 {
       font-family: 'Times New Roman', Times, serif;
       font-weight: 900;
       font-style: italic;
       text-decoration: underline;
       text-transform: lowercase;
       letter-spacing: 1em;
       word-spacing: 2em;
   }
   
   .container {
       width: 80%;
       margin: auto;
   }
   

1.2 内联样式表（Internal CSS）：

<style>
    h1 {
        color: royalblue;
    }
</style>

示例图：

1.3 内联样式（Inline CSS）：

<h1 style="color: royalblue">Hello World</h1>
<p style="font-weight: bold; color: yellow;">This is a bold and yellow text.</p>

示例图：

2. CSS Selector选择器¹ ⭐️/ Pseudo 伪类/伪元素

选择器顺序：

1. link

2. visited

3. hover

4. active

<p class=paragraph id="paral">Lorem</p>

1. Type Selector

直接用 tag 名字即可

p {
    color : red;
}

2. Class Selector

可以赋予多个同类class CSS style

Class 前面加.

.paragraph {
    color : red;
}

3. ID Selector

id在html文件里是unique的

ID 前面加 #

#para1 {
    color : red;
}

4. Descendant Selector 后代选择器

Selects all elements that are descendants of a specified element.

选择某个元素内的所有后代元素（不限于直接子元素）。

/*所有具有class`container`属性的标签下的p/h2都会应用的效果*/
.container p { 
  margin: 10px;
}
.article h2 {
  color: green;
}

5. Child Selector 子元素选择器 (>)

Selects all elements that are direct children of a specified element.

仅选择某个元素的直接子元素。

div > p {
    color: red;
}

这个规则会把所有直接位于<div>内的<p>元素的文字颜色设置为红色。

6. Adjacent Sibling Selector 相邻兄弟选择器 (+)

Selects an element that is the next sibling of a specified element.

选择紧接在指定元素之后的相邻兄弟元素。

h1 + p {
    color: blue;
}

这个规则会把紧接在<h1>之后的第一个<p>元素的文字颜色设置为蓝色。

7. General Sibling Selector 通用兄弟选择器 (~)**

Selects all elements that are siblings of a specified element.

选择指定元素之后的所有兄弟元素（不一定是紧邻的）。

h2 ~ p {
  color: darkgrey;
}

这个规则会把位于<h2>之后的所有兄弟<p>元素的文字颜色设置为darkgrey。

8. Attribute Selector

Selects elements based on the presence or value of an attribute.input[type="text"] {
  border: 1px solid #ccc;
}
a[href] {
    color: orange;
}

a[target="_blank"] {
  color: blue;
}

a[href^="https"] {
    color: purple;
}

a[href*="example"] {
    color: brown;
}

9. Pseudo-class Selector - 伪类²

依附于已存在的元素，用单冒号作为标识，描述元素在某特性或状态下的样式Selects elements based on their state or position.

Pseudo-classes (:): These are used to define a special state of an element. They are prefixed with a single colon (:).

常用选择器	选择效果
:hover	悬停
:active	激活（鼠标按住不放）
:focus	获取焦点（鼠标当前位置）
:checked	勾选（表单）
:link	未访问的链接
:visited	已访问的链接
:first-child	第一个子元素
:last-child	最后一个子元素
nth-child()	指定索引的子元素
not()	不匹配给定选择器

伪类支持链式写法，如

CSS

li:hover:last-child {
 cursor: pointer;
 color: blue;
}

li:hover:last-child::after {
 content: '你干嘛~哎呦~';
 margin-left: 20px;
}

HTML：

<h3>喜欢做的事情</h3>
<ul>
 <li>唱</li>
 <li>跳</li>
 <li>rap</li>
 <li>篮球</li>
</ul>

最终结果：

a:hover {
  color: red;
}
li:first-child {
  font-weight: bold;
}

1. :hover:

Applies styles when the mouse pointer is over the element.

a:hover {
    color: red;
}

2. :focus:

Applies styles when the element is focused, such as when an input field is selected.

input:focus {
    border-color: blue;
}

3. :nth-child(n):

n表示行数，从1开始，可带入计算，也可直接输入odd或者even

Matches elements based on their position in a group of siblings.

li:nth-child(2n) {
    background-color: lightgray;
}

4. :first-child:

Matches the first element among a group of sibling elements.

p:first-child {
    font-weight: bold;
}

5. :last-child:

Matches the last element among a group of sibling elements.

p:last-child {
    font-style: italic;
}

6. :not(selector):

Matches elements that do not match the given selector.

括号里的可以是某个元素、类、也可以是其他指定元素

div:not(.exclude) {
    background-color: yellow;
}

10. Pseudo-element Selector - 伪元素²

用双冒号作为标识, 一半用于创建虚拟元素并定义其样式

Selects and styles parts of an element.

Pseudo-elements (::): These are used to style specific parts of an element. They are prefixed with a double colon (::). The double colon distinguishes pseudo-elements from pseudo-classes, though some pseudo-elements can be written with a single colon for backward compatibility.

常用选择器	选择效果
::before	在元素内容前插入一个虚拟元素
::after	在元素内容后插入一个虚拟元素
::selection	选择用户选中文本
::first-line	选择元素的第一行文本
::first-letter	选择元素的第一个字母或第一个字符
::plkaceholder	选择表单元素的占位符文本
::marker	选择列表项的标记部分
::backdrop	选择对话框背景元素
::cue	选择音频和视频元素的字幕和注释

p::first-line {
  font-weight: bold;
}
/* 
This CSS rule makes the first line of any paragraph (p) bold. The rest of the paragraph remains unaffected by this style.
*/

div::before {
  content: "Note: ";
  color: red;
}
/*
This CSS rule inserts the text "Note: " before the content of any div element. The inserted text is styled with a red color. 
*/

伪元素不支持链式写法

1. ::before:

Inserts content before the content of an element.

p::before {
    content: "Note: ";
    font-weight: bold;
}

2. ::after:

Inserts content after the content of an element.

p::after {
    content: " End.";
    font-style: italic;
}

3. ::first-line:

Applies styles to the first line of a block-level element.

p::first-line {
    font-weight: bold;
}

4. ::first-letter:

Applies styles to the first letter of a block-level element.

p::first-letter {
    font-size: 200%;
    color: red;
}

5. ::selection:

Applies styles to the portion of an element that is selected by the user.

::selection {
    background: lightblue;
}

For more, check ¹

11. Examples

1. Combining Different Selectors

/* Selects all h2 elements inside elements with class .event-info */
.event-info h2 {
  color: orange;
}

/* Selects the first child td of elements with class .event-table */
.event-table td:first-child {
  font-weight: bold;
}

/* Selects all li elements that are direct children of ul with class .menu */
.menu > li {
  padding: 5px;
}

/* Selects input elements with type attribute set to password that are descendants of form with id #login */
#login input[type="password"] {
  border: 2px solid red;
}

/* Selects all a elements that are siblings of h2 */
h2 ~ a {
  text-decoration: none;
}

/* Selects the last child of all div elements */
div:last-child {
  margin-bottom: 20px;
}

2. Example of Combining Different Selectors

/* Selects all p elements inside div with class .content and makes text blue */
.content p {
  color: blue;
}

/* Selects all h3 elements with class .title that are direct children of section */
section > h3.title {
  font-size: 18px;
}

/* Selects the first child of ul elements and styles them */
ul li:first-child {
  font-style: italic;
}

/* Selects input elements of type checkbox inside forms with class .preferences */
.preferences form input[type="checkbox"] {
  margin-right: 5px;
}

3. Example ofPseudo-classes & Pseudo-elements

Combining pseudo-classes and pseudo-elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pseudo-classes and Pseudo-elements</title>
    <style>
        p:first-child {
            color: blue;
        }

        p::before {
            content: "Start: ";
            font-weight: bold;
        }

        p:hover::after {
            content: " (hovered)";
            color: green;
        }
    </style>
</head>
<body>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
</body>
</html>

In this example:

• The first paragraph will have blue text.
• All paragraphs will have "Start: " before their content.
• When any paragraph is hovered, “(hovered)” will be added after the paragraph’s content, in green.

These pseudo-classes and pseudo-elements are essential for adding interactive and dynamic styles to your web pages without using JavaScript.

3. Color³ - 颜色

Color Type	Example
Key Word - 关键词(预设颜色)	black,silver,white, transparent
RGB	rgb(255,0,0)
RGBA	rgb(255,0,0,0.5)
Hexadecimal - 十六进制值	#ff0000
HSL（Hue, Saturation, Lightness）4	hsl(0,100%,50%)
HSLA	hsl(0,100%,50%,0.5)

A 代表透明度，0 即为完全透明，1 为完全不透明

Hex（十六进制值）表示颜色时，在VS Code把鼠标悬浮在值上方，就会出现颜色选择器

1. 十六进制颜色值（Hex）

用#加上6位或3位十六进制数表示颜色。

• 六位表示法：#RRGGBB
• 三位表示法：#RGB

黑色: #000

白色: #FFF

红色: #F00

绿色: #0F0

蓝色: #00F

黄色: #FF0

品红色: #F0F

青色: #0FF

浅灰色: #f4f4f4

深灰色: #DDD/#CCC/#2f2f2f

2. RGB 颜色值

使用rgb()函数，指定红、绿、蓝三种颜色的值，范围从0到255。

示例：

color: rgb(255, 0, 0); /* 红色 */
color: rgb(0, 255, 0); /* 绿色 */
color: rgb(0, 0, 255); /* 蓝色 */

3. RGBA

使用rgba()函数，除了RGB值，还可以指定透明度（alpha），范围从0（完全透明）到1（完全不透明）。

示例：

css复制代码color: rgba(255, 0, 0, 0.5); /* 半透明的红色 */
color: rgba(0, 255, 0, 0.7); /* 半透明的绿色 */

.### 4. HSL 颜色值

使用hsl()函数，指定色相（Hue）、饱和度（Saturation）和亮度（Lightness）。色相范围为0到360度，饱和度和亮度为百分比。

示例：

css复制代码color: hsl(0, 100%, 50%);  /* 红色 */
color: hsl(120, 100%, 50%);/* 绿色 */
color: hsl(240, 100%, 50%);/* 蓝色 */

5. HSLA 颜色值

使用hsla()函数，除了HSL值，还可以指定透明度（alpha）。

示例：

css复制代码color: hsla(0, 100%, 50%, 0.5);  /* 半透明的红色 */
color: hsla(120, 100%, 50%, 0.7);/* 半透明的绿色 */

6. [CSS不支持]CMYK颜色模型

具体含义如下：

• C (青色)：表示颜色中的青色分量。
• M (品红色)：表示颜色中的品红色分量。
• Y (黄色)：表示颜色中的黄色分量。
• K (黑色)：表示颜色中的黑色分量，也称为色彩的主要或关键部分。

示例：

青色 (Cyan):

• CMYK: (100%, 0%, 0%, 0%)
• 近似 RGB: (0, 255, 255)

品红色 (Magenta):

• CMYK: (0%, 100%, 0%, 0%)
• 近似 RGB: (255, 0, 255)

黄色 (Yellow):

• CMYK: (0%, 0%, 100%, 0%)
• 近似 RGB: (255, 255, 0)

黑色 (Key/Black):

• CMYK: (0%, 0%, 0%, 100%)
• 近似 RGB: (0, 0, 0)

4. Button⁵

HTML

<button>This is a Button</button>

CSS

button {
    background-color: skyblue;
    color: #fff;
    padding: 10px 15px;
    border-radius: 10px;
}

/* 鼠标悬浮效果 */
button:hover {  
    background-color: aqua;
}

/* 鼠标点击效果 */
button:active {     
    background-color: aquamarine;
}

JavaScript

// Event
const button = document.querySelector("button");

button.addEventListener("click", function() {
	alert("Button Clicked!");
});

5. Box Model/盒子模型

只有border可以设置颜色来形成实体边框

边框快捷输入	语法
设置上下左右为同一边距	padding: 10px;
依次为上下边距和左右边距	padding: 10px 20px;
依次为上，左右，下边距	padding: 10px 30px;
依次为上、右、下、作边距	padding: 10px 20px 15px 15px;

外边距塌陷（重叠/合并）：两个盒子靠在一起的时候，只会有一个外边距，即取最大的那个外边距作为两个盒子之间的外边距

5.1 Margin(外边距)

Syntax: [ <length> | <percentage> | auto ]{1,4}

margin在不指定的情况下，默认遵循 ↑→↓←的顺时针顺序

p {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
}

p {
    /* 有4个值的时候，依次分别为 上边距，右边距，下边距，左边距 */
    margin: 5px 10px 5px 10px;
}

p {
    /* 有2个值的时候，依次分别为 上下边距，左右边距 */
    margin: 5px 10px;
}

p {
    /* 有3个值的时候，依次分别为 上边距，左右边距，下边距 */
    margin: 5px 10px 5px;
}

如果margin没有填写，则浏览器默认会自动填充margin

Margin	Code
水平居中	margin: auto;

5.2 Border(边框)

border: <宽度> <样式> <颜色>
border: medium none current_color

border也可分别设置4个边框，如 border-top, border-left, border-right,border-bottom

每个边框也可设置单独的样式，如:

• border-top-style

• border-width

• border-style: 如果发现border-width不生效，可以把这个设为 solid

• border-radius: 可设置数值或百分比，常用于设置半圆边缘（50%）

  ​ 如果设置后发现是椭圆，那就是长和宽不对等

默认值的medium约为3px

常见样式：

• solid 实线边框
• dotted 点线边框
• dashed 虚线边框
• double 双线边框
• groove 凹槽边框，看起来像是雕刻进去的
• ridge 脊状边框，看起来像是从页面中凸出来的
• inset 内嵌边框，看起来像是嵌入到页面中的
• outset 外嵌边框，看起来像是从页面中凸出来的
• none 无边框
• hidden 隐藏边框，与 none 类似，通常用于表格布局

5.3 Paddings(内边距)

Syntax: [ <length> | <percentage> ]{1,4}

​ 浏览器默认会自动填充paddings

6. Position 定位

Code	Function	Explanation
static	静态定位	默认， 不需要定位
relative	相对定位	根据元素当前定位进行偏移，元素仍处于文档流中，占据原来的空间，不影响其他元素的位置
absolute	绝对定位	绝对定位是根据父级元素的定位进行偏移。 如果没有，就一直向上找具有定位属性的父元素，若都没有则参考<html>元素的最左上方为锚点做偏移 所以有—子绝(绝对定向)父相(相对定位)。 绝对定位必须指定位置
fixed	固定定位	固定在当前浏览器视图的指定位置，如侧边栏，浮动弹窗
sticky	粘性定位	在浏览器窗口到达指定阈值时，会显示出fixed特性，其他情况保持原有位置。固定时 原有位置为空白，受父元素容器影响。如顶部导航栏

可通过z-index属性来控制层叠顺序(absolute, fixed)

如：

HTML:

<div class="position-box">
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
</div>
</div>
<button id="fixed">Button</button>

CSS:

.position-box {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    position: relative; 
    /* 如果没有这个relative，那么h1和h2的position就会以整个页面为锚点进行偏移 */
}

.position-box h1 {
    position: absolute;
    top: 50px;
}

.position-box h2 {
    position: absolute;
    left:30px
}

#fixed {
    position:fixed;
    right: 0;
    bottom: 100px;
}

Transform:

transform: translate(-50%, -50%) 是 CSS 中的一个变换属性，用于移动元素的位置。这个属性特别常用来将元素在其容器内居中对齐。

解释

• transform: 是 CSS 的变换属性，用于应用 2D 或 3D 变换（如旋转、缩放、平移）到元素。
• translate(-50%, -50%): 是一种平移变换。translate 接受两个参数：第一个参数表示沿 X 轴的平移，第二个参数表示沿 Y 轴的平移。-50% 表示将元素沿指定轴移动其自身宽度或高度的 50%。

如何使用

这种方法通常与 position: absolute 或 position: fixed 一起使用，以实现元素在容器内的精确定位和居中对齐。

示例：使用 transform: translate(-50%, -50%) 居中对齐元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering with Transform</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="centered-element">Centered</div>
    </div>
</body>
</html>

/* 容器样式 */
.container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #f0f0f0;
}

/* 居中元素样式 */
.centered-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
}

解释

1. 容器:

   • position: relative; 确保子元素可以相对于容器进行定位。
   • width: 100%; 和 height: 100vh; 设置容器占据整个视口高度。

2. 居中元素:

   • position: absolute; 使元素相对于最近的已定位祖先（即 .container）进行定位。
   • top: 50%; 和 left: 50%; 将元素的左上角移动到容器的中心点。
   • transform: translate(-50%, -50%); 将元素从其左上角移动到容器的中心，使其完全居中。

可视化解释

• top: 50%; 和 left: 50%;: 将元素的左上角定位到容器的中心。
• transform: translate(-50%, -50%);: 将元素沿 X 轴和 Y 轴各向左和向上移动 50% 的自身宽度和高度，从而使元素的中心与容器的中心对齐。

这种方法对于水平和垂直居中对齐是非常有效和常用的。

7. Display布局⁶

布局应运用在父元素上。

display: block; /* 块级样式 */
display: inline; /* 内联元素 */
display: inline-block; /* 内联块级元素 */
display: none; /* 隐藏元素 */
display: flex; /* 灵活布局 */
display: grid; /* 网格布局 */

块级元素

自动另起一行

常见块级元素：

• div
• h1

内联元素

会和同一行中相邻的内联元素在同一行显示。

常见内联元素

• span
• a

内联块级元素：

与内联元素相似，但可以设置宽度、高度以及垂直方向的边框和填充

⭐️ 弹性布局：

需要一个副容器，并且将此容器设置为flex布局。

示例

.container {
  display: flex;
  flex-direction: column; /* 将主轴方向设置为垂直， 默认为水平 */
  justify-content: center; /* 主轴方向上的对齐方式 */
  align-items: center; /* 交叉轴方向上的对齐方式 */
  height: 200px; /* 容器高度仅为示例 */
}

1. 对齐方式

1. flex-direction - 设置主轴方向

flex-direction:row

可选值：

• row； 默认为水平（row）
• column（垂直）
• row-reverse
• column-reverse

2. flex-wrap - 超出轴线长度自动换行

flex:nowrap

可选值：

• wrap (换行)
• nowrap (默认，不换行)
• wrap-reverse (行序反向)

3. justify-content - 子元素在主轴方向上的对齐方式

justify-content:flex-start

可选值：

• flex-start （默认，主轴前对齐）

• flex-end （后对齐）

• center

• space-between (等距 首尾)

  

• space-around (等距 两边)

• space-evenly (等距 容器)

​

4. align-content - 多行元素在交叉轴方向的对齐方式

align-content:flex-start

可选值：

• flex-start （默认，主轴前对齐）

• flex-end （后对齐）

• center

• space-between (等距 首尾)

• space-around

• stretch

  

5. align-items - 修改垂直居中的对齐样式

align-item:flex-start

可选值：

• flex-start （默认，交叉轴前后对齐）

• flex-end （交叉轴后对齐）

• center

• baseline （文字基线/项目首行文字对齐）

• stretch（拉伸）

2. 项目属性

1. flex - 各元素占的比例

flex是flex-grow, flex-shrink, flex-basis的简写形式, 默认为 0 1 auto

简写和分开写有时效果会不一致，建议使用简写

PS. 简写时，大多数浏览器的flex-basis默认值是0

flex-grow: 按容器剩余空间的比例放大元素填充容器, 默认为0

flex-shrink: 按被挤压空间的比例缩小元素，默认为1

flex-basis: 元素初始大小，默认为auto，根据主轴长度分配

flex:1 2 1 /* 中间的元素是其他2个元素的2倍大 */

举例：

flex: 1 1 calc(25% - 20px)

意味着：

• 每个项目的初始宽度是 25% 减去20px间距的宽度。
• 项目可以平等地增长或缩小，以适应父容器的空间变化。

这个设置使得图片能够在容器中合理分布，并且在窗口尺寸改变时保持布局的一致性。

2. order - 根据其数值定义元素的排序

3. 允许项目自身有单独的交叉轴对齐方式

默认为auto

5. box-sizing: border-box;

The box-sizing: border-box; property changes the way an element’s width and height are calculated.

Normally, by default (with box-sizing: content-box), the width and height of an element only include the content, and padding or borders are added on top of that.

However, with box-sizing: border-box;, the padding and border are included inside the width and height you specify for the element.

Key Differences:

• Default (box-sizing: content-box):

  • Width = Content width.
  • Padding and border are added outside the specified width or height.

  Example:

  css复制代码width: 200px;
  padding: 20px;
  border: 10px solid black;
  

  The total width of the element would be calculated as:

  • Content width = 200px
  • Padding = 20px on both sides (20px + 20px = 40px)
  • Border = 10px on both sides (10px + 10px = 20px)
  • Total width = 200px + 40px + 20px = 260px

• With box-sizing: border-box;:

  • Width = Total width (including content, padding, and border).
  • The element’s content width is automatically adjusted to fit within the specified total width.

  Example:

  css复制代码width: 200px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: border-box;
  

  In this case, the total width remains 200px, and the content area is reduced to fit inside the total width:

  • Content width = 200px - 20px (padding) - 20px (border) = 160px
  • Total width = 200px

Benefits of box-sizing: border-box;:

1. Simplifies Layouts: It keeps the element’s total width and height fixed, making layouts easier to manage, especially when dealing with padding or borders.
2. Avoids Unexpected Overflows: It prevents issues where the padding or border causes elements to overflow or take up more space than expected.
3. Responsive Design: When designing fluid layouts, border-box makes sizing more predictable, keeping elements consistent.

In your case, it helps ensure that when you add padding or borders to your .course-container li elements, they won’t exceed the set width (23%), keeping the layout uniform and the gaps between elements even.

Flex布局示例

<style>
    * {
        margin: 0;
        padding: 0;
        text-decoration: none !important;
        list-style-type: none !important;
        list-style: none !important;
        font-family: Arial, "Microsoft Yahei", sans-serif;
    }

    .course-container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-content: flex-start;
        gap: 0px;
        padding: 0px;
    }


    .course-container li {
        max-width: 23%;
        flex: 1 1 23%;
        margin: 5px;
        box-sizing: border-box;
    }

    .course-container img {
        border-radius: 5px;
    }

    h1 {
        font-size: 26px;
        color: #779d53;
        padding-left: 10px;
    }

    p {
        padding-left: 10px;
    }
</style>

<body>
    <p><img alt="" src="http://image.dianow.cn/editor/192822/20230821/16a3289a-4036-4bb4-be6f-4ad0d9c6a408.jpg"
            style="width: 1200px; height: 200px;" /></p>

    <p>&nbsp;</p>

    <h1>积分专区课程</h1>

    <p>本专区所有课程均可使用积分100%抵扣购买</p>

    <p>&nbsp;</p>

    <ul class="course-container">
        <li><a href="http://kc.dianow.cn/s/pc/#/course/detail/1589618/1529544/info" target="_blank"><img
                    src="http://image.dianow.cn/editor/192822/20230726/262d4383-613e-442b-a740-4638f6ad4edd.jpg"></a>
        </li>
        <li><a href="http://kc.dianow.cn/s/pc/#/course/detail/1589618/1529544/info" target="_blank"><img
                    src="http://image.dianow.cn/editor/192822/20230726/262d4383-613e-442b-a740-4638f6ad4edd.jpg"></a>
        </li>
        <li><a href="http://kc.dianow.cn/s/pc/#/course/detail/1589618/1529544/info" target="_blank"><img
                    src="http://image.dianow.cn/editor/192822/20230726/262d4383-613e-442b-a740-4638f6ad4edd.jpg"></a>
        </li>
        <li><a href="http://kc.dianow.cn/s/pc/#/course/detail/1589618/1529544/info" target="_blank"><img
                    src="http://image.dianow.cn/editor/192822/20230726/262d4383-613e-442b-a740-4638f6ad4edd.jpg"></a>
        </li>
        <li><a href="http://kc.dianow.cn/s/pc/#/course/detail/1589618/1529544/info" target="_blank"><img
                    src="http://image.dianow.cn/editor/192822/20230726/262d4383-613e-442b-a740-4638f6ad4edd.jpg"></a>
    </ul>

</body>

网格布局

.grid {
display:grid;
    grid-template-rows
}

Params:

代码	功能	例	参数
grid-template-rows	分别设置每一行高度	grid-template-rows: 100px 200px 300px	column, row
grid-template-columns	分别指定列的高度比例	grid-template-columns: 1fr 2fr第一列占据的空间是第二列的一半	1fr 2fr…
grid-auto-rows	设置每一行高度	grid-auto-rows：100px
grid-auto-columns	设置每一列的比例	grid-auto-columns:1fr
grid-gap	每行和列的间距	grid-gap:12px

8. Block

多个block需要并排

.block {
    float: left;
    width: 33.3%;
    border: 1px solid skyblue;
    box-sizing: border-box;
    /* border加了1px，因此占比33.3%加1px的box就没法都放在一行, 多的block会被挤下去，用 box-sizing: border box 可以把border算进box本身，而不是额外占用空间，从而解决了这个问题 */
}

9. Box-Shadow/Text-Shadow/Drop-Shadow 阴影

Box-Shadow: 主要应用于矩形的边框，不会考虑元素的透明部分。

Text-Shadow: 主要应用于文本

Drop-Shadow: 主要应用于文本或图像等非盒子模型以及各类不规则元素，应用于父元素上,对区域里的像素点做阴影。

/* box-shadow: <inset> <水平偏移> <垂直偏移> <模糊> <扩散> <颜色> */
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
box-shadow: 100px 50px 10px 20px #89d26d;

1. Box-Shadow

参数详解：

参数	解释
inset	[Text-Shadow无此属性] 内部阴影(box和阴影互换)
水平偏移	左上为顶点，从左往右
垂直偏移	左上为顶点，从上到下
模糊	0px为不模糊
扩散	[Text-Shadow无此属性] 0为默认长度
颜色	rgb, rgba, 十六进制颜色（#）

示例1：凸出/凹下:

CSS:

body {
    background-color: #dfe5ed;
}

.box-shadow1 {
    background-color: #dfe5ed;
    position: absolute;
    margin-left: 20vw;
    margin-top: 30vh;
    width: 200px;
    height: 200px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.3),
        -8px -8px 8px rgba(255, 255, 255, 0.7);
}

.box-shadow2 {
    background-color: #dfe5ed;
    position: absolute;
    margin-left: 60vw;
    margin-top: 30vh;
    width: 200px;
    height: 200px;
    box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.3),
        inset -8px -8px 8px rgba(255, 255, 255, 0.7);
}

HTML:

<div class="box-shadow1"></div>
<div class="box-shadow2"></div>

示例2：鼠标划过悬浮

CSS

body {
    background-color: #dfe5ed;
}

.box {
    background-color: #dfe5ed;
    position: absolute;
    margin-left: 20vw;
    margin-top: 30vh;
    width: 200px;
    height: 200px;
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}

.box:hover {
    transform: translateY(-8px) scale(1.01, 1.01);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

HTML

<div class="box"></div>

2. Text-Shadow

参数详解：

参数	解释
水平偏移	左上为顶点，从左往右
垂直偏移	左上为顶点，从上到下
模糊	0px为不模糊
颜色	rgb, rgba, 十六进制颜色（#）

示例：文字模糊

.shadow-text {
    text-shadow: 0 0 6px #000;
    color: transparent;
}

3. Drop-Shadow

• 应用于父元素上,对区域里的像素点做阴影。
• 需要搭配filter:使用

filter: drop-shadow(offset-x offset-y blur-radius color);

可选值：

• offset-x: 阴影在水平方向上的偏移距离。可以为负
• offset-y: 阴影在垂直方向上的偏移距离。可以为负
• blur-radius: （可选）阴影的模糊半径。默认为 0，数值越大，阴影越模糊。
• color: （可选）阴影颜色。

示例：

        svg {
            width: 200px;
            height: 200px;
            filter: drop-shadow(20px 20px 15px rgba(0, 0, 0, 0.5));
        }

HTML:

<svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="cyan" />
</svg>

10. Text⁷

文本属性

• font-family 字体
• font-size 字体大小
• color 字体颜色
• letter-spacing 字符间距
• writing-mode 文本方向
• text-orientation 配合writing-mode, 可以让文本保持竖直或倾斜
• text-decoration 文本样式 (line-through 删除线, overline 上划线， none去除超链接的蓝色下划线 )

段落属性：

• line-height 行间距
• text-indent 首行缩进(一般可用2em)
• white-space 拆行/换行
• overflow 超出部分处理
• text-overflow 文本超出部分处理
• text-align 文本对齐

1. Font Family

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;

/* 这一行和上面3行功能相同，但是因为是从上往下运行的，所以下面这一行会覆盖上面一行的设置。 */
    font: normal 16px Arial, Helvetica, sans-serif;
}

字体有多个的情况下，越靠前越优先使用，若无该字体，则用后面的字体

一般可配置三个字体，第一个为英文字体，第二个为中文字体，第三个为保底字体

如

font-family: Arial, "Microsoft Yahei", sans-serif

sans-serif	serif	monospace
无衬线体（棱角平直）	衬线体（棱角勾线处理）	等宽字体

**Font Usage/CSS code generator / **: ⁸

Download Free Font: ⁹

2. 加载web字体

@font-face {
    font-family: "webfont";
    src: url("webfont.woff");
}

font-family: "webfont", Arial, "Microsoft Yahei", sans-serif

示例：文本超出部分省略

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 显示省略号 */

效果：

11. Transform¹⁰ - 移动/旋转/缩放/形状变换

div {
    transform: matrix(1, 2, 3, 4, 5, 6);
    transform: rotate(0.5turn);
    transform: translate(12px, 50%);
    transform: translateX(12px)translateY(50%);
    transform: scale(2, 0.5);
    transform: scalex(2)scaleY(0.5);
    transform: skew(30deg, 30deg);
    transform: skewx(30deg)skewY(30deg);
}

代码	功能	例	参数
transform-origin	设置原点	transform-origin: top left设置左上角为transform原点	默认为元素中心
transform: translate	平移	transform: translate(-50%, -50%);将元素沿 X 轴和 Y 轴各向左和向上移动 50% 的自身宽度和高度，从而使元素的中心与容器的中心对齐。	水平平移位移量，垂直平移位移量（用百分比则参考自身的宽和高）
transform: rotate	旋转	transform: rotate(30deg)	以元素中心为原点，正数表示顺时针
transform: scale	缩放	transform: scale(0.6)	以元素中心为原点， 单参数：宽和高都缩放一定比例 双参数：宽，高缩放指定比例
transform: skew	倾斜	transform: skew(30deg)	默认以元素中心为原点， 单参数：水平方向倾斜一定角度 双参数：水平，垂直缩放指定比例
transform: matrix	形状变换	transform: matrix(a,b,c,d,e,f)	a和d：控制元素的缩放 b和c：控制元素的倾斜或斜切 e和f：控制元素的平移

12. Transition¹⁰

transition: property duration timing-function delay;

property - 需要过渡的属性

duration - 过渡的时长

timing-function - 缓动函数

Transition中的timing-function 是用于函数开始和结束之间的过渡效果

1. 贝塞尔缓动函数

cubic-bezier(<x1>, <y1>, <x2>, <y2>)

代码	表现	实际函数
ease	缓慢开始，陡然加速，再逐渐减速至结束	cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in	缓慢开始，再逐渐加速至结束，最终突然停止	cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out	突然开始，再逐渐减速至结束	cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out	缓慢开始，然后加速，再减速至结束	cubic-bezier(0.42, 0.0, 0.58, 1.0)

动画演示

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: left;
            margin-top: 50px;
        }

        .square {
            background-color: #4fdad6;
            width: 50px;
            height: 50px;
            border-radius: 0.3rem;
            animation: expand 5.5s infinite;
        }

        .ease {
            animation-timing-function: ease;
        }

        .ease-in {
            animation-timing-function: ease-in;
        }

        .ease-out {
            animation-timing-function: ease-out;
        }

        .ease-in-out {
            animation-timing-function: ease-in-out;
        }

        @keyframes expand {

            0%,
            27.27% {
                width: 50px;
            }

            54.55% {
                width: 600px;
            }

            72.73% {
                width: 600px;
            }

            90.91%,
            100% {
                width: 50px;
            }

        }
    </style>
    <title>Animated Squares</title>
</head>

<body>
    <div class="container">
        <div>ease</div>
        <div class="square ease"></div>
        <div>ease-in</div>
        <div class="square ease-in"></div>
        <div>ease-out</div>
        <div class="square ease-out"></div>
        <div>ease-in-out</div>
        <div class="square ease-in-out"></div>
    </div>
</body>

</html>

2. 线性缓动函数

linear(<point-list>)

代码	表现	实际函数
linear	从开始到结束都是固定的速度	linear(0,1)
linear(0,0.25,1)	开始较慢的速度匀速变化，后面速度突然变快	linear(0,0.25,1)

动画演示

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 50px;
            margin-left: 20px;
        }

        .square {
            background-color: #4fdad6;
            width: 50px;
            height: 50px;
            border-radius: 0.3rem;
            animation: expand 5.5s infinite;
        }

        .linear {
            animation-timing-function: linear;
        }

        .customize {
            animation-timing-function: cubic-bezier(0, 0.25, 1, 1);
        }

        @keyframes expand {

            0%,
            27.27% {
                width: 50px;
            }

            54.55% {
                width: 600px;
            }

            72.73% {
                width: 600px;
            }

            90.91%,
            100% {
                width: 50px;
            }
        }
    </style>
    <title>Animated Squares</title>
</head>

<body>
    <div class="container">
        <div>linear</div>
        <div class="square linear"></div>
        <div>customize</div>
        <div class="square customize"></div>
    </div>
</body>

</html>

3. 阶跃缓动函数

steps(<number-of-steps>,<direction>)

代码	表现	实际函数
.step-2	根据传入的步骤和策略，分步完成过渡	transition:width 2s steps(2,end);
.step-5	根据传入的步骤和策略，分步完成过渡	transition:width 2s steps(5,end);

动画演示

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 50px;
            margin-left: 20px;
        }

        .square {
            background-color: #4fdad6;
            width: 50px;
            height: 50px;
            border-radius: 0.3rem;
        }

        .step-2 {
            animation: expand-2 4.5s infinite steps(2, end);
        }

        .step-5 {
            animation: expand-5 4.5s infinite steps(5, end);
        }

        @keyframes expand-2 {

            0%,
            66.67% {
                width: 50px;
            }

            88.89%,
            100% {
                width: 600px;
            }
        }

        @keyframes expand-5 {

            0%,
            66.67% {
                width: 50px;
            }

            88.89%,
            100% {
                width: 600px;
            }
        }
    </style>
    <title>Animated Squares</title>
</head>

<body>
    <div class="container">
        <div>step-2</div>
        <div class="square step-2"></div>
        <div>step-5</div>
        <div class="square step-5"></div>
    </div>
</body>

</html>

delay - 开始延迟时间

10. Animation¹⁰

animation:<duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state> <keyframes-name>...

animation里的这些选项均用-而非:连接

• timing-function: Animation中的timing-function 是用于关键帧之间的过渡效果， 且默认对整个动画序列生效。

  如果需要给每个关键帧单独设置缓动函数，可以在关键帧的样式中单独设置animation中的timing-function属性，这就会变成影响当前帧到下一个也设置该属性的关键帧之间的过渡效果

  

• iteration-count 可用整数和小数，或者infinite

• direction: normal, reverse, alternate, alternate-reverse

  normal 和reverse都会在播放结束后恢复起始状态，再播放（0% -> 100%, 0% -> 100%）

  alternate会在正序播放结束后倒放。然后往返运动（0% -> 100% -> 0%）

  具体作用请参考下图和代码示例

  示例1：

  

  示例2：

  默认direction

  <!-- direction: none -->
  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
          .container {
              display: flex;
              flex-direction: column;
              gap: 20px;
              margin-top: 100px;
              margin-left: 100px;
          }
  
          .round {
              background-color: #4fdad6;
              width: 200px;
              height: 200px;
              border-radius: 50%;
          }
  
          .loading {
              animation: bounce 1s infinite;
          }
  
          @keyframes bounce {
  
              0%,
              100% {
                  transform: translateY(-25%);
                  animation-timing-function:
                      cubic-bezier(0.8, 0, 1, 1);
              }
  
              50% {
                  transform: translateY(0%);
                  animation-timing-function:
                      cubic-bezier(0, 0, 0.2, 1);
              }
          }
      </style>
      <title>Direction: none</title>
  </head>
  
  <body>
      <div class="container">
          <div class="round loading"></div>
      </div>
  </body>
  
  </html>
  

  direction: alternate

  <!-- direction: alternate -->
  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
          .container {
              display: flex;
              flex-direction: column;
              gap: 20px;
              margin-top: 100px;
              margin-left: 100px;
          }
  
          .round {
              background-color: #4fdad6;
              width: 200px;
              height: 200px;
              border-radius: 50%;
          }
  
          .loading {
              /* 时间只需原来的一半 */
              animation: bounce 0.5s infinite alternate;
          }
  
          @keyframes bounce {
              0% {
                  transform: translateY(0);
                  animation-timing-function:
                      cubic-bezier(0, 0, 0.2, 1);
              }
  
              100% {
                  transform: translateY(-25%);
              }
          }
      </style>
      <title>Direction: alternate</title>
  </head>
  
  <body>
      <div class="container">
          <div class="round loading"></div>
      </div>
  </body>
  
  </html>
  

• fill-mode: none, forwards, backwards, both

  fill-mode	function
  none	在动画开始前和结束后，关键帧列表中定义的样式对元素没有任何影响
  forwards	动画结束后会保留动画最后一帧的样式
  backwards	动画开始前让元素保持第一帧的样式
  both	同时具有forwards和backwards的特点

• play-state: running, paused

  animation-play-state:paused 或animation-play-state:running

• 111

11. Keyframes¹⁰

0代表起点，100代表终点，也可换为from和to

@keyframes name {
    keyframe-selector
    css-styles;
    }
    ...
}

code	功能	备注
name	关键帧列表的名字	name需全局唯一，不然可能被覆盖
关键帧选择器	关键帧选择器
css-styles	关键帧的样式

示例

        body {

            background-color: black;
        }

        .box {
            animation: custom 2.5s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: cyan;
            width: 100px;
            height: 100px;

        }

        @keyframes custom {
            0% {
                transform: translateY(0) rotate(0deg);
                border-radius: 50%;
            }

            25% {
                transform: translateY(-100px) rotate(30deg);
                border-radius: 8%;
            }

            50% {
                transform: translateY(0) rotate(60deg);
                border-radius: 50%;
            }

            75% {
                transform: translateY(-100px) rotate(90deg);
                border-radius: 8%;
            }
            
            100% {
                transform: translateY(0) rotate(120deg);
                border-radius: 50%;
            }

            ;
        }

12. 媒体查询

@media <media-type> and (max-width: 640px)

• media-type: 默认为all，其他还有 screen, print, speech

例：

CSS

/* 屏幕宽度大于1000像素 */
@media (min-width:1000px) {
    .box {
        width: 25%;
        border-radius: 0px;
    }

    .btnTop {
        display: block;
    }
}

/* 屏幕宽度大于600且小于1000像素 */
@media (min-width:601px)and (max-width:999px) {
    .box {
        width: 50%;
        border-radius: 0px;
    }

    .btnTop {
        display: block;
    }
}

/* 屏幕宽度小于600像素 */
@media (max-width:600px) {
    .box {
        width: 100%;
        border-radius: 10px;
        ;
    }

    .btnTop {
        display: none;
    }
}

.box {
    background-color: cyan;
    border: 20px solid white;
    float: left;
    width: 200px;
    height: 200px;
}

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

13. 优先级规则

在 CSS 中，优先级（也称为 “权重”）决定了当多个规则应用于同一个元素时，哪一个规则会生效。CSS 优先级由四个级别组成，从最高到最低分别是：内联样式、ID 选择器、类选择器（伪类选择器、属性选择器）、元素选择器。每个级别有不同的权重值。

优先级规则

1. 内联样式:
   • 权重值：1000
   • 例子：<div style="color: red;"></div>
2. ID 选择器:
   • 权重值：100
   • 例子：#header { color: blue; }
3. 类选择器、伪类选择器、属性选择器:
   • 权重值：10
   • 例子：.nav { color: green; }
   • 伪类例子：:hover { color: yellow; }
   • 属性选择器例子：[type="text"] { color: purple; }
4. 元素选择器、伪元素选择器:
   • 权重值：1
   • 例子：p { color: orange; }
   • 伪元素例子：::before { content: "Hello"; }

计算优先级

CSS 优先级是通过计算各个选择器部分的权重值来确定的。以下是具体的计算方法：

• 每个内联样式的权重值为 1000。
• 每个 ID 选择器的权重值为 100。
• 每个类选择器、伪类选择器和属性选择器的权重值为 10。
• 每个元素选择器和伪元素选择器的权重值为 1。

示例

p { color: red; }               /* 权重值：1 */
.nav { color: blue; }           /* 权重值：10 */
#header { color: green; }       /* 权重值：100 */
div#header .nav p { color: yellow; } /* 权重值：111 (100 + 10 + 1) */

在上面的示例中，div#header .nav p 的权重值为 111，所以它的样式会覆盖其他权重值较低的规则。

Important 声明

在优先级之外，!important 声明可以用来覆盖任何其他规则，不论其优先级。使用 !important 声明的规则将具有最高优先级。

p { color: red !important; }

即使有其他权重值更高的规则存在，!important 声明的规则仍然会生效。

优先级冲突时的顺序

当多个规则的优先级相同时，后定义的规则将覆盖先定义的规则（后声明覆盖前声明）。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 优先级示例</title>
    <style>
        p { color: red; }                  /* 元素选择器，权重值：1 */
        .text { color: blue; }             /* 类选择器，权重值：10 */
        #unique { color: green; }          /* ID 选择器，权重值：100 */
        p#unique { color: purple; }        /* 元素 + ID 选择器，权重值：101 */
        div p#unique { color: orange; }    /* 元素 + 元素 + ID 选择器，权重值：102 */
    </style>
</head>
<body>
    <div>
        <p class="text" id="unique">Hello, CSS Priority!</p>
    </div>
</body>
</html>

在这个例子中，由于 div p#unique 的权重值最高（102），所以最终段落的颜色将显示为橙色。

15. Cursor 鼠标指针

cursor: url(custom.svg) x, y

x, y 用来设置指针的区域

14. Background - 背景

常用属性

属性	功能	参数
background-color	背景颜色	rgbm rgba, linear-gradient(渐变色)
background-image	加载背景颜色	url(./bg.jpg)
background-size	调整背景尺寸	长度，如果小于容器尺寸会自动平铺
background-repeat	背景图片填充样式	repeat, no-repeat, repeat-x, repeat-y, round, space
background-position	调整背景位置	2个，中间用空格连接。分别表示水平位置和垂直位置， 如center center表示中心居中
background-size	调整背景拉伸	contain - 不扭曲或者裁剪的情况下，把图片缩放到占满整个容器; cover - 占满整个容器，但多出部分会被裁切

X. Other tips

1. 快捷输入

边框快捷输入	语法
设置上下左右为同一边距	padding: 10px;
依次为上下边距和左右边距	padding: 10px 20px;
依次为上，左右，下边距	padding: 10px 30px;
依次为上、右、下、作边距	padding: 10px 20px 15px 15px;
lorem+数字 = 放置x个字符作为placeholder	lorem50

2. 快速模板

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

3. Float

如果float不及时清除，下面的部分会跟着浮动串行，因为后续容器的高度不能自动伸长以适应内容的高度（父元素高度塌陷），使得内容溢出到容器外面而影响（甚至破坏）布局的现象。

这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

因此每次float用完后，都需要清除浮动：

例：

HTML

<div class="block">
    <h1>Hello World</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis numquam cupiditate assumenda ea
        amet quod consequuntur soluta esse deserunt id quidem nihil sunt accusantium architecto magnam,
        atque magni. Sint, unde?</p>
    <button>This is a Button</button>
</div>
<!-- CSS清除浮动：float用完后要清除,防止浮动溢出 -->
<div class="clearfix"></div>

CSS

.block {
    float: left;
    width: 33.3%;
    border: 1px solid skyblue;
    box-sizing: border-box;
}

.clearfix {
    clear: both;
    /* both means left and right */
}

4. 元素宽高

overflow: visible
overflow-x: ...
overflow-y: ...

超出部分依旧可见

可选参数

• visible 超出部分依旧显示

• hidden 超出部分不显示

• scroll 超出部分显示滚动条

5. 保证图片视频缩放不变形

用 max-width:100%;

img, video {
    max-width:100%;
    height:auto;
}

x. 实用代码示例

透明隔断

<style>
    .transparent-block {
        content: "&nbsp;";
        display: block;
        height: 30px;
        width: 100%;
    }
</style>

<body>
	<span class="transparent-block"></span>
</body>

水平居中（块级元素）

margin: 0 auto

The margin: 0 auto; rule is commonly used to center block-level elements horizontally within their parent container. Here’s how it works:

How margin: 0 auto; Centers an Element:

1. Block-Level Elements: Elements like <div>, <p>, and others with display: block; or display: flex; typically occupy the full width of their parent container. When you set a specific width (like width: 20%;) on such an element, it will only take up that percentage of the parent container’s width, leaving space on either side.
2. Auto Margins: By setting margin-left and margin-right to auto, you’re instructing the browser to automatically calculate and apply equal margins on both sides of the element. This ensures the element is horizontally centered within its parent.
3. margin: 0 auto;: This shorthand sets the top and bottom margins to 0, and the left and right margins to auto. As a result, the element is centered horizontally within its parent container while keeping its top and bottom margins at 0.

---

Reference

---

1. CSS - Selectors- Mozilla ↩︎ ↩︎

2. css伪类和伪元素 一分钟完全掌握 - Bilibili ↩︎ ↩︎

3. CSS - Color - Mozilla ↩︎

4. HSL - Color Convert ↩︎

5. CSS 按钮 - RUNOOB ↩︎

6. 十七分钟CSS快速入门 - Bilibili ↩︎

7. CSS 常用样式属性动画演示，一个视频掌握全部！ ↩︎

8. CSS Font Stack ↩︎

9. Font - Google ↩︎

10. 十五分钟学会CSS动画 - Bilibili ↩︎ ↩︎ ↩︎ ↩︎