【前端学习笔记二】CSS基础二

一、颜色模型

1.颜色设置

颜色名称

https://www.w3schools.com/colors/colors_names.asp 这里是一些颜色的名称（关键字），比如red、black、green等，可以直接指定名称来设置颜色。名称不区分大小写。

color:red;

transparent

transparent 是一个关键字，表示完全透明的颜色。它通常用于设置背景颜色或边框颜色为完全透明，或者在渐变中定义透明度。==rgba(0, 0, 0, 0)

div {
	background-color:transparent;
}

currentColor

currentColor 表示当前的颜色。如果没有指定，就会从父容器继承的文本颜色。

div {
  color: red;
  background-color: currentColor;
}

inherit

inherit 是一个保留字，它不局限于颜色，表示该属性采用与元素父级的属性相同的值。对于继承的属性，主要用途就是覆盖另一个规则。

2.RGB

RGB 值也是我们常用的颜色表示方式。RGB 指的就是红-绿-蓝，。每种颜色使用 0 到 255 之间的数字指定。最常见的 RGB 值黑色：rgb(0,0,0) 和白色：rgb(255,255,255)。

3.Hex十六进制

使用十六进制值来表示 CSS 中的颜色，这也是用的最多的颜色表示方式。十六进制使用 16 个符号表示，使用 0 - 9 表示值 0 到 9，A - F 表示值 10 到 15。

在 CSS 中，使用 6 个十六进制数字来表示颜色。分别使用两个数字来表示红色 ®、绿色 (G) 和蓝色 (B) 分量。例如，#000000表示黑色，它是最小的十六进制值；#FFFFFF表示白色，它是最大的十六进制值。

div {
  color: #000000;
  border: 1px solid #00FF00;
  background: #FF0000;
}

也可以使用 3 个值（每种颜色一个）来缩短十六进制值，如果每两位的值相同，就可以缩写一半。

也可以给十六进制颜色定义 alpha 值，alpha 值是透明度的百分比。在十六进制代码中，将另外两位数字添加到六位数字序列中，形成一个八位数字序列。例如，要在十六进制代码中设置黑色#000000，要添加 50% 的透明度，可以将其更改为#00000080。

4.HSL 颜色

使用 hsl() 函数，分别表示色相（Hue）、饱和度（Saturation）、亮度（Lightness），例如 hsl(0, 100%, 50%) 表示红色。

• 色调：色调描述了色轮上的值，从 0 到 360 度，从红色开始（0 和 360）；
• 饱和度：饱和度是所选色调的鲜艳程度，100% 表示完全饱和的亮色，0% 表示完全不饱和的灰色；
• 亮度：颜色的亮度级别，较低的值会更暗，更接近黑色，较高的值会更亮，更接近白色。

HSLA表示：在HSL表示的基础上增加了透明度，使用 hsla() 函数，例如 hsla(0, 100%, 50%, 0.5) 表示半透明的红色。

更多可看：https://www.w3schools.com/colors/default.asp

二、字体

1.字体属性

color

color用来设置字体颜色；

font-size

font-size字体的大小

• em 相当于当前元素的一个font-size
• rem 相对于根元素的一个font-size
• 像素（px）：指定了文本的高度。
• 百分比（%）

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。行高会在字体框的上下平均分配。不指定行高时，content高度131.556px：说明line-height默认值大约是1.31 ~ 1.32(倍数)

font-family

font-family 字体族（字体的格式），font-family可以同时指定多个字体，多个字体间使用，隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推：

font-family: 'Courier New', Courier, monospace

除了可以使用系统自带的字体样式外，@font-face可以将服务器中的字体直接提供给用户去使用:

@font-face {
    /* 指定字体名字 */
    font-family: 'myFont1';
    /* 服务器中字体路径 */
  	/* format 告诉浏览器字体格式，一般不写 */
    src: url('/font/ZCOOLKuaiLe-Regular.woff'),
        url('/font/ZCOOLKuaiLe-Regular.otf'),
        url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');
}

p {
    font-size: 30px;
    color: salmon;
    font-family: myFont1;
}

font-style

字体样式属性 font-style 用于控制文本的风格，可以设置为 normal（默认）、italic（斜体）或 oblique（倾斜）

font-weight

字体粗细属性 font-weight 用于设置文本的粗细程度，可以指定为 normal（默认）、bold（粗体）、lighter（更细）、100 到 900 的数字值等。

line-height

行高属性 line-height 用于设置文本行的高度，指定了文本行与行之间的距离。可以使用像素、百分比等单位。

2.文本对齐

Text Align

text-align 文本的水平对齐

• left：左侧对齐
• right：右侧对齐
• center：居中对齐
• justify：两端对齐

vertical-align

vertical-align 设置元素垂直对齐的方式

• baseline：基线对齐
• top：顶部对齐
• bottom：底部对齐
• middle：居中对齐：居中对齐高度 = 基线高度 + x的高度 / 2
  居中对齐并非实际上的居中对齐

vertical-align 还可以设置px值设置垂直对齐方式

3.文本修饰

文本修饰

text-decoration 文本修饰

• none 什么都没有
• underline 下划线
• line-through 删除线
• overline 上划线

white-space 设置网页如何处理空白

• normal 默认值，换行
• nowrap 不换行
• pre 保留文本原始格式，多个空格 换行都保留

文本转换

用来控制文本的大小写转换。
text-transform 属性有以下几种取值：

• none：默认值，保持文本原样。
• capitalize：每个单词的首字母大写。
• uppercase：全部字母大写。
• lowercase：全部字母小写。
• initial：设置为默认值。
• inherit：继承父元素的设置。

文本阴影

text-shadow 属性来为文本添加阴影效果。这个属性允许你指定文本阴影的偏移、模糊半径、颜色等属性。

text-shadow: h-shadow v-shadow blur-radius color;

• h-shadow：指定阴影水平偏移量，可以为正值（向右偏移）或负值（向左偏移）。
• v-shadow：指定阴影垂直偏移量，可以为正值（向下偏移）或负值（向上偏移）。
• blur-radius：可选参数，指定阴影的模糊半径。值越大，阴影越模糊，默认为 0，表示不模糊。
• color：阴影的颜色，可以使用颜色名称、十六进制值或 RGB 值。

4.图标字体 Icon Fonts

在网页中经常需要使用一些图标，通过图片来引入图标图片大小本身比较大，并且非常的不灵活放大还会有马赛克，所以在使用图标时，我们还可以将图标设置为字体，这样是矢量图
通过@font-face的形式来对字体进行引入，通过字体的形式来使用图标。

图标字体本质上是一种包含矢量图标的字体文件（通常是 .woff、.woff2、.ttf 或 .svg 格式），每个图标都映射到字体的一个字符码点上。通过将这些字体文件引入到网页中，并利用 CSS 来设置字体、颜色和大小，可以在页面中像使用文本一样使用这些图标

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.woff2') format('woff2'),
       url('fonts/fontawesome-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.icon {
  font-family: 'FontAwesome';
}

<i class="icon"></i>
<i class="icon fa fa-camera-retro"></i>
<!--Font Awesome 图标字体库中的类名--!>

5.字间距

在 CSS 中，字间距（letter-spacing）和字母间距（word-spacing）可以通过以下方式设置：

1. 字间距（letter-spacing）：

   • 控制字符之间的间距，包括字母、数字和符号。
   • 使用 letter-spacing 属性来设置，其值可以是正数（增加间距）、负数（减少间距）或者 normal（默认值）。

   .example {
       letter-spacing: 2px; /* 设置字间距为2像素 */
   }
   

2. 字母间距（word-spacing）：

   • 控制单词之间的间距，只有在单词之间有空白（空格）时才有效。
   • 使用 word-spacing 属性来设置，其值也可以是正数、负数或者 normal。

   .example {
       word-spacing: 4px; /* 设置单词间距为4像素 */
   }
   

3. 一般多个空格只会保留一个，但 会打几个保留几个；如果在pre标签里边，就会保留所有换行和空白。

6.换行

overflow-wrap

overflow-wrap 属性就是原来的word-wrap，是否允许单词太长会溢出时中断换行。

• normal：使用系统的默认换行行为。
• break-word：会被强制分割换行（溢出的部分。
• anywhere：当容器的宽度width设置为min-content时，会在每个字母处都换行，如果宽度设置为固定的值，那么anywhere 和 break-word 的表现是一致的。

white-space

• nowrap ：可以防止文本自动换行，直到遇到<br>；
• pre：文本之间的空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

当文本所在容器的宽度固定时，可以使用 overflow-wrap: break-word; 和 overflow-wrap: anywhere; 来实现文本的自动换行；如果容器宽度为 min-content，就只能使用 overflow-wrap: break-word; 实现文本换行；overflow-wrap: break-word;也可以用于长标点符号的换行。

• word-break: break-all; 也可以用于文本换行，但是该属性不能让长标点符号换行；
• white-space: nowrap; 可以用于防止文本自动换行；
• line-break: anywhere 可以用于将长标点符号进行换行；
• hyphens: auto; 可以用于使用连字符连接单词。

三、背景

在 CSS 中，background 属性可以用来一次性设置元素的所有背景属性，包括背景颜色、背景图片、背景重复、背景位置等。具体语法如下：

.element {
    background: color image repeat attachment position / size initial|inherit;
}

• color: 指定背景颜色，可以是颜色名称、十六进制值或 RGB 值。
• image: 指定背景图片，使用 url(‘path/to/image.jpg’) 指定图片路径。
• repeat: 指定背景图片的重复方式，可以是 repeat、repeat-x、repeat-y 或 no-repeat。
• attachment: 指定背景图片是否随着页面滚动而滚动，可以是 scroll、fixed 或 local。
• position: 指定背景图片的位置，可以使用关键字（如 center、top）或百分比、像素值。
• size: 指定背景图片的尺寸，可以是 auto、具体的尺寸值、cover 或 contain。
• initial 或 inherit: 可选参数，分别表示使用初始值或继承父元素的值。

background-color 设置背景颜色

background-image 设置背景图片

• 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满
• 如果背景图片大小大于元素，则背景图片一部分会无法完全显示
• 如果背景图片大小等于元素，则背景图片会直接正常显示

background-repeat 设置背景图片的重复方式

• repeat 默认值，背景图片沿着x轴和y轴双方向重复
• repeat-x 背景图片沿着x轴方向重复
• repeat-y 背景图片沿着y轴方向重复
• no-repeat 背景图片不重复

background-position 设置背景图片的位置。通过top left right bottom center几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center。通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量

background-clip 设置背景的范围

• border-box 默认值，背景会出现在边框的下边
• padding-box 背景不会出现在边框，只出现在内容区和内边距
• content-box 背景只会出现在内容区

background-origin 背景图片的偏移量计算的原点

• border-box 背景图片的变量从边框处开始计算
• padding-box 默认值，background-position从内边距处开始计算
• content-box 背景图片的偏移量从内容区处计算

background-size 设置背景图片的大小

• 第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是auto
• cover 图片的比例不变，将元素铺满
• contain 图片比例不变，将图片在元素中完整显示

background-attachment 背景图片是否跟随元素移动

• scroll 默认值，背景图片会跟随元素移动
• fixed 背景会固定在页面中，不会随元素移动

四、布局

1.Flexbox

基本概念

Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。

Flexbox 布局由主轴（main axis）和交叉轴（cross axis）组成。
主轴默认是水平方向（从左到右），交叉轴默认是垂直方向（从上到下）。

• main axis: Flex 父元素的主轴是指子元素布局的主要方向轴，它由属性flex-direction来确定主轴是水平还是垂直的，默认为水平轴。
• main-start & main-end: 分别表示主轴的开始和结束，子元素在父元素中会沿着主轴从main-start到main-end排布。
• main size: 单个项目占据主轴的长度大小。
• cross axis: 交叉轴，与主轴垂直。
• cross-start & cross-end: 分别表示交叉轴的开始和结束。子元素在交叉轴的排布从cross-start开始到cross-end。
• cross size: 子元素在交叉轴方向上的大小。

Flexbox 的布局是在父容器（flex container）和子项目（flex item）之间进行的。父容器通过设置 display: flex 或 display: inline-flex 将其定义为 Flex 容器。子项目则成为 Flex 容器的直接子元素，并通过一系列属性来控制其布局行为。

父元素属性

display: 定义元素为 Flex 容器，可以是 flex 或 inline-flex。

父元素（容器）可以设置以下六个属性：

• flex-direction：定义主轴的方向，默认为 row（水平方向，从左到右），可以是 row-reverse（水平，从右到左）、column（垂直方向，从上到下）、column-reverse（吹制，从下到上）。
• flex-wrap：在一条轴线上排不下时的换行方式，可以是 nowrap（默认的，不换行，调整子元素尺寸）、wrap（换行，第一行在上面）、wrap-reverse（换行，第一行在下面）。
• flex-flow：flex-direction 属性和flex-wrap属性的简写，默认为:flex-flow:row nowrap
• justify-content：定义项目在主轴上的对齐方式，可以是 flex-start（默认，左对齐/上对齐）、flex-end（右对齐/下对齐）、center（居中对齐）、space-between（两端对齐，中间间隔相等）、space-around（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍）。
• align-items： 定义项目在交叉轴上的对齐方式，可以是 stretch（默认值、如果元素未设置高度或设为auto，将占满整个容器的高度）、flex-start（起点对齐）、flex-end（终点对齐）、center（中点对齐）、baseline（以元素的第一行文字的基线对齐）。
• align-content：定义多根轴线的对齐方式，如果只有一根轴线，则不起作用（也就是nowrap），当容器内部有多个轴线时，该属性控制这些轴线在交叉轴上的分布方式（就是每一行的线怎么在垂直方向排）。可以是 flex-start（轴线从交叉轴的起始位置开始排列）、flex-end（轴线从交叉轴的末尾位置开始排列）、center（轴线在交叉轴上居中排列）、space-between（轴线平均分布在容器内，首尾没有空隙）、space-around（轴线平均分布在容器内，轴线两侧有相等的空隙）、stretch（默认值，轴线占满整个交叉轴）。

子元素属性

• order：用来定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-basis：指定的是元素在主轴上的基础长度。如果主轴是横向的，则该值指定的就是元素的宽度；如果主轴是纵向的，则该值指定的就是元素的高度；默认值是auto，表示参考元素自身的高度或宽度；如果传递了一个具体的数值，则以该值为准。
• flex-grow：指定弹性元素的伸展系数，默认值为0。按比例分。
• flex-shrink：指定弹性元素的收缩系数，默认值为1（0是不缩小）。
• flex：是flex-grow, flex-shrink 和 flex-basis的简写，后两个属性可选。默认值为：flex:0 1 auto。flex: none：这个设置意味着项目不会被放大或缩小，它会保持其原始大小。flex: 0：这个设置等同于 flex: 0 1 auto。flex: auto：这个设置等同于 flex: 1 1 auto。flex: 1：这个设置等同于 flex: 1 1 0%，0%是定为其父容器的宽度或高度的百分比，具体取决于主轴的方向。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。这个属性和align-items属性的效果是一样的，只不过这个属性只对单个项目生效。

2.Grid布局

Grid 创建二维的网格布局，可以轻松地对齐元素，无论是水平还是垂直方向。这种布局方式非常适合创建复杂的页面布局。Grid是一个二维布局模型，它有列和行。而 Flexbox 是一个一维布局模型，可以将其子项目布局为列或行，但不能同时布局。

1. 容器：设置为display: grid或者display: inline-grid;的元素会成为Grid容器。
2. 项目：容器内部的子元素自动成为Grid项目。
3. 行和列：Grid布局中的水平和垂直单元。
4. 网格线：定义行和列的线，可以用于对齐元素。
5. 网格轨道：行或列之间的空间，可以指定大小。
6. 网格单元格：行和列的交叉点，是放置Grid项目的区域。

父元素属性：

1. 设置display: grid或者display: inline-grid;成Grid容器。当元素设置为 display: grid; 时，它会成为块级元素（block-level element），占据整行；它会在页面上创建一个新行，并且其后的内容会换行显示在该元素之后；这种布局通常用于创建全宽的布局，或者作为页面的主要布局结构。当元素设置为 display: inline-grid; 时，它会成为内联块级元素；不会创建新行，而是与其他内联元素一起在同一行上显示，除非它的内容或指定的尺寸导致它溢出到下一行。这种布局适合创建行内的网格布局，例如在一行内显示多个列。
2. grid-template-columns 和 grid-template-rows：定义列和行的大小，数量和样式。可以使用单位如像素（px）、百分比（%）、自动（auto）、分数（fr）等来定义行和列的大小。

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px; /* 定义两行，高度分别为100像素和200像素 */
  grid-template-columns: 1fr 2fr; /* 定义两列，第一列占整体的1/3，第二列占整体的2/3 */
}

3. grid-template-areas：定义网格布局的命名区域，通过命名区域可以更灵活地控制网格项的位置。给每一格取一个名字，这样子元素通过绑定名字可以设置位置。如果某个区域在 grid-template-areas 中没有被命名，你可以使用一个点（.）来表示一个空的单元格。如果项目的数量多于定义的区域，额外的项目将会按照 grid-template-columns 和 grid-template-rows 定义的顺序填充剩余的空间。
4. grid-template：简写属性，同时定义网格的行(rows)、列(columns)和命名区域(areas)。
   grid-template: none：恢复默认设置；
   <'grid-template-rows'> / <'grid-template-columns'>：指定grid-template-rows与grid-template-columns之值，并设grid-template-areas为none；
   grid-template-areas grid-template-rows / grid-template-columns；
   [name-start] areas-name grid-template-rows [name-end] / grid-template-columns。
5. grid-row-gap 和 grid-column-gap：定义网格行和列之间的间距。可以是像素(px)、点(pt)、em等绝对单位，或者是rem等相对单位，或者间隙大小相对于网格容器的宽度的百分比。还可以使用 inherit 作为值，这意味着子元素会继承父元素的 grid-row-gap 值。
6. grid-gap：简写属性，同时定义网格行和列之间的间距。设一个就是行列相同，设两个就是先rows再columns。
7. justify-items 和 align-items：定义网格项在网格单元格中的对齐方式。justify-items 属性用于控制网格项目在水平方向（沿着网格轨道的行）的对齐方式；align-items 属性用于控制网格项目在垂直方向（沿着网格轨道的列）的对齐方式。

justify-items: normal | stretch | <baseline-position> | <overflow-position> | legacy | legacy-start | legacy-end | center | start | end | self-start | self-end | fit-content | space-between | space-around | space-evenly | first baseline | last baseline;

align-items: normal | stretch | <baseline-position> | <overflow-position> | center | start | end | self-start | self-end | baseline | first baseline | last baseline;

8. justify-content 和 align-content：定义网格容器中所有网格项的对齐方式。默认情况下，justify-content 和 align-content 的值是 normal，这通常等同于 stretch。justify-content 和 align-content 主要影响多行或多列的分布，如果只有一行或一列，它们的效果可能不明显。当使用 space-around、space-between 或 space-evenly 时，这些值定义了网格行或列之间的间隙分布。align-content 还接受 baseline、first baseline 和 last baseline 值，这些值允许你根据基线对齐内容。

justify-content: normal | start | end | center | stretch | space-around | space-between | space-evenly;

align-content: normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline;

9. grid-auto-rows 和 grid-auto-columns：用于定义网格中自动创建的行或列的默认大小。值为：固定尺寸 | min-content | max-content | auto。
10. grid-auto-flow ：控制网格项目在网格容器中的放置顺序，默认从左到右，从上到下填充网格单元格。row：这是默认值。网格项目按行填充，每行从左到右填充，然后是下一行。
    column：网格项目按列填充，每列从上到下填充，然后是下一列。
    dense：当与 row 或 column 结合使用时，这个值允许网格项目占据任何位置，即使这意味着跳过某些单元格。这可以创建更密集的网格布局。
    row dense 或 column dense：这些值结合了 row 或 column 的填充顺序和 dense 的特性。

grid-auto-flow: row | column | dense | row dense | column dense;

11. grid: [ <grid-template> / <grid-auto-flow> ] | [ <grid-auto-flow> / <grid-template> ];

子元素：

1. grid-row-start 属性指定了网格项的起始行位置。可以是数字，用1开始，指定网格开始的行数。也可以使用命名的网格线来指定起始位置。比如 grid-row-start: header-start;。
2. grid-row-end 属性指定了网格项的结束行位置。可以是数字，不包含该行在内。使用命名的网格线来指定结束位置。例如，grid-row-end: footer-end;。
3. grid-column-start 和 grid-column-end：定义网格项开始和结束的行位置。用法同上
4. grid-row 和 grid-column：简写属性，同时定义网格项的行和列位置。start / end
5. grid-area：定义网格项占据的命名区域。<grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
6. justify-self 和 align-self：定义网格项在网格单元格中的对齐方式。justify-self 和 align-self 是用于在网格布局中控制单个网格项在其网格单元格内水平（主轴方向）和垂直（交叉轴方向）方向上对齐方式的属性。
   start：默认值，网格项在单元格的起始位置/顶部对齐。
   end：网格项在单元格的结束位置/底部对齐。
   center：网格项在单元格的中心位置对齐。
   stretch：网格项填充整个单元格的宽/高度。
   self-start：根据容器的 justify-items / alien-items 值对齐。
   self-end：根据容器的 justify-items /alien-items值对齐。

五、显示属性（display）

用来控制元素如何生成框的属性，它决定了一个元素的布局类型及其在文档流中的表现方式。

• block：元素会生成一个块级框，通常会独占一行。
  可以设置宽度（width）、高度（height）、边距（margin）和填充（padding）等。
• inline：元素会生成一个行内框，它不会打断文本流，允许其他行内元素出现在同一行。可以设置水平方向的边距（margin）、填充（padding）等，但不能设置宽度（width）和高度（height）。
• inline-block：元素会生成一个行内块级框，具有块级元素的特性，但仍保持行内元素的特性。可以设置宽度（width）、高度（height）、边距（margin）和填充（padding）等。
• flex：元素会成为一个弹性容器，通过使用弹性布局来进行排列。
  子元素可以通过 flex-grow、flex-shrink 和 flex-basis 等属性来控制其在容器内的布局。
• grid：元素会成为一个网格容器，通过使用网格布局来进行排列。
  可以使用 grid-template-columns、grid-template-rows 等属性来定义行和列的大小和数量。
• inline-flex：元素会成为一个行内弹性容器，具有弹性容器的特性，但仍保持行内元素的特性。
  可以设置宽度（width）、高度（height）、边距（margin）和填充（padding）等。
• inline-grid：元素会成为一个行内网格容器，具有网格容器的特性，但仍保持行内元素的特性。
  可以使用 grid-template-columns、grid-template-rows 等属性来定义行和列的大小和数量。
• none：元素不会被显示，且不占据文档空间。与其子元素相关的样式也不会应用。通过 JavaScript 来动态控制元素的显示和隐藏。

/* 预组合值 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* 生成盒子 */
display: none;
display: contents;

/* 多关键字语法 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* 其他值 */
display: table;
display: table-row; /* 所有的 table 元素 都有等效的 CSS display 值 */
display: list-item;

/* 全局值 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

六、溢出（overflow）

overflow 是 CSS 属性，用于控制元素内容超出其指定框的部分如何处理的属性。当元素内容超出其指定的宽度和高度时，overflow 属性可以定义溢出内容的显示方式。

1. visible：

   • 默认值。内容不会被修剪，会显示在元素框之外。

2. hidden：

   • 内容会被修剪，超出元素框的部分将被隐藏。

3. scroll：

   • 如果内容超出了元素的框，会显示滚动条以便查看被修剪的内容。

4. auto：

   • 浏览器会决定是否显示滚动条，如果内容超出了元素的框，会显示滚动条。

5. inherit：

   • 继承父元素的 overflow 属性的值。

适用于：

• 长文本内容：当文本内容超出元素框时，可以使用 overflow: scroll; 或 overflow: auto; 来添加滚动条，以便用户查看完整的内容。

• 图片或视频：当元素框不能容纳完整的图片或视频时，可以使用 overflow: hidden; 或 overflow: scroll; 来限制显示区域，防止溢出破坏布局。

• 自定义滚动条：使用 overflow 属性结合 ::-webkit-scrollbar 等伪元素，可以自定义滚动条的样式和行为，提升用户体验。