01、CSS 基础知识(框架)

CSS 指层叠样式表 (Cascading Style Sheets)，针对HTML网页的统一外观样式设计和管理，给网页进行各种装饰，让她变得美观。CSS是由 W3C(万维网联盟) 制定的技术标准规范。

Cascading ：/kæsˈkeɪdɪŋ/（水）倾泻；大量落下；连续传递；串联（cascade 的现在分词）

:::success 主要优点：

美化页面：提供丰富的外观设计能力，丰富
可复用：可以统一管理HTML页面的样式，可复用。
CSS3可以实现网页样式、内容分离，并对网页元素实现像素级的样式管理。 :::
框架
图
待补充…
CSS 是怎么工作的？
下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

当浏览器遇到无法解析的 CSS 代码会发生什么？——什么也不会干，继续解析下一个CSS样式。

02、基本语法

CSS样式由**选择器名** 花括号**{n个申明(属性:值);}**组成。

选择器就是用来选择要改变样式的HTML元素。
属性与值用半角冒号:分开，半角分号;结尾，分割多组键值。一般建议一行一个键值对。
如果属性值有多个词组，需加上引号保护起来。
不合法、错误的申明会被忽略（跳过），总是怎么宽容！

🔸代码风格：

小写：一般都采用小写，字母开头，字母、数字、下划线。
短线分割：当选择器里是类名时，且类名由多个单词组成，则各个单词之间下划线_、或中划线-分割。
当使用并集选择器时，各个元素竖着写。

🔸注释：/注释，可换行/

📢注意空格：一定注意关键字（and、or）、符号（括号()，加+、减-）之间的空格，不然有些时候会有些莫名其妙的问题。其中加+、减-会首先当做正负数符号

CSS 的简写属性

简写属性就是将同一主题的常见属性的定义集中在一起，如background、font、border、margin、padding。

margin: 1px 2px 3px 4px; /*下面四个属性的简写形式*/
margin-top: 1px;
margin-left: 2px;
margin-bottom: 3px;
margin-left: 4px;

没有指定的值会被设置为它的初始值。这就意味着，它将会覆盖之前设置的值。

简写属性的值本身没有顺序要求，但值类型一样时，就需要注意对应简写属性的规则了。

CSS的使用

🔸行内样式：在标签的style属性上写css样式。缺点：代码耦合度高，样式不复用，不利于维护，尽量不用。
🔸内部（内嵌）样式：在HTML页面head中（其他地方也可以，建议放head头部）定义一个样式style标签，定义css样式，只在当前页面内有效。缺点：多个页面之间无法复用。
🔸外部样式（推荐）：外部单独css文件定义样式，在html的head中<link>引入，所有引入了该css文件的页面都会生效。<link rel="stylesheet" href="css文件路径" />

<html>
<head>
  <meta charset="utf-8"/>
  <title>css练习HTML预览</title>
  <!-- 引入外部css样式文件，type：css类型；ref：当前文件与引入的文件的关系；href：文件路径 -->
  <link type ="text/css" rel="stylesheet" href="css1.css" />
  <!-- 内部样式style标签定义css样式 -->
  <style type="text/css">
      pre{
          color:red;
      }
  </style>
  <style type="text/css">
      @import "mystyle.css" supports(display: flex);
  </style>
</head>
<body>
  <div>
      <!-- 行内样式style属性设置css样式 -->
      <p style="color: blue;">一段p标签文字，使用行内样式style</p>
      <pre>pre标签文本，使用内部样式</pre>
      <font>font标签内容</font>
  </div>
</body>

❓**<link>**和**@import**的区别？都可以用来加载外部css资源文件，不同点：

		@import()
资源类型	link支持更多外部资源加载，包括css	@import是CSS语法，只支持导入css
加载优先级	与HTML页面一同加载	要等网页加载完成后才进行加载
兼容性问题	良好	@import是CSS2.1版本的，不兼容 ie5 以下
扩展性	支持javascript去控制其属性	@import不支持JS操作，支持媒体查询

层叠、优先级和继承

🔶层叠：
当应用两条同级别的规则到一个元素时，存在样式冲突，就出现了层叠，这时：后面的样式规则会覆盖前面的。
🔶优先级：
选择器优先级：样式的目标越具体优先级越高：行内样式优先级（1000 ）> id（100）> class（10）>标签（1）>通用（0）。括号内是权重值，用来决策优先级。 :::warning **!important**：一个特殊的 CSS语法，可以用来覆盖所有上面所有优先级计算，包括被层叠覆盖的，使用小心（尽量不用）！border: none !important; :::

h1{
        color: green !important;
        color: blue;
}

🔶继承：
继承也需要在上下文中去理解 —— 一些设置在父元素上的 css 属性是可以被子元素继承的，有些则不能。如一些布局类的（高宽、边距、边框）是不能继承的，一些外观类的（字体、文本样式、颜色）大多可以继承。
CSS提供了五个特殊的通用属性值用来控制继承，每个 css 属性都接收这些值。

属性	描述
inherit	继承父类属性（/ɪnˈherɪt/），就是 “开启继承“，使子元素属性和父元素相同
initial	恢复初试（ /ɪˈnɪʃl/最初的），设置属性值和浏览器默认样式相同，如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
unset	自然值，将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样
revert	恢复，将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer	重置上一层，将应用于选定元素的属性值重置为在上一个层叠层中建立的值。

在一些浏览器中，表单元素默认不会继承父级字体样式，需要主动申明字体样式的继承。 button, input, select, textarea { font-family : inherit; font-size : 100%; }

@规则

@符号开头的特殊语法规则。

@规则	描述	示例/备注
@charset	定义样式表的字符集，必须是样式表中的第一个元素	`@charset "UTF-8";`不支持HTML中使用
@import	引入一个外部样式表，必须先于所有其他类型的规则，@charset 除外。支持媒体查询。	`@import url("fineprint.css")` `@import url _list-of-media-queries_;`
@namespace	用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则
@media	定义媒介查询规则	`@media screen and (min-width: 900px){}`
@page	@page 规则用于在打印文档时修改某些 CSS 属性
@supportsIE🚫	特性查询，判断当前浏览器环境是否支持某些特性，js中可通过 CSSSupportsRule 来访问 @supports	支持not、and、or嵌套多个表达式
@font-face	定义下载的外部的字体
@keyframes	CSS 动画的关键帧

@charset "UTF-8";
@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {  /* 如果不支持grid布局，则使用float布局 */
  div {
    float: right;
  }
}
@supports (--foo: green) {  /* 测试是否支持自定义属性 */
  body {
    color: var(--foo);
  }
}

03、常见值与单位

尺寸（长度/大小）

🔸绝对长度：

cm：厘米
px：像素

🔸相对长度：

em，父元素字体或自身字体的大小，就是字符大小。
rem，根元素字体大小，默认16px。如果用em、rem作为单位，建议根元素设置10px，便于计算。
vh/vw：视窗（浏览器可视窗口）高度、宽度的1%，可以把一些东西做得随用户的视口改变大小。

🔸百分比：相对于其他值（大多是父元素）的比例。

字体大小设置百分比，就是相当于父元素字体大小的比例。
宽度百分比，父元素宽度比例。
color颜色值
RGB颜色是基于R（red）、G（green）、B（blue）三个颜色通道组合而成，每个颜色通道值0到255，16进制就是00到FF。

颜色值	描述
颜色关键词：`red`	预定义的颜色值，如red、green、blue、transparent （透明色），完整列表
16进制值RGB：`#FF12AA`	`#`开头，6位16进制数值
16进制RGBA：`#FF12AAFF`	`#`开头，8位16进制数值，多了透明度A（alpha 通道）
RGB函数：`rgb(2, 121, 139)`	rgb三个值作为参数（10进制，0-255）
函数RGBA：`rgba(2,121,139,0.3)`	rgba4个值作为参数，最后一个参数透明度值是0到1的小数。
透明度属性：`opacity`	0到1的小数
`currentColor`	css3关键字，当前元素的（或其最近父元素）继承的color值

渐变色gradient

渐变色gradient（/ˈɡreɪdiənt/ ）是一种特别的image数据类型，用于background-image、border-image的值，实现多种渐变颜色。可以设置多组值，逗号隔开，层叠渲染都会生效。
🔸线性渐变linear-gradient()：

linear-gradient( 方向/角度 , 颜色位置% , 颜色位置% , … )

方向/角度（angle），目的是确定线性渐变的方向，有两种设置方式：
- 角度（angle，顺时针），沿指针方向渐变。单位deg（degree），默认0度（自下而上）。
- 方向，关键字to+ 一个或多个位置（top、bottom、right、left），to right /*从左到右*/
颜色值：颜色值color。
插值位置：可以是%比例，和长度（px），基于方向的渐变插值位置。
```
#gcdiv .b1{
  background-image: linear-gradient(red,blue);
}
#gcdiv .b2{
  background-image: linear-gradient(45deg,red,blue);
}
#gcdiv .b3{
  background-image: linear-gradient(to right,red 20px,blue 90%);
}
```
🔸径向渐变radial-gradient()、重复渐变、圆锥渐变
径向渐变就是基于圆形（或椭圆）区域从中心向外辐射扩散的渐变，从中心点开始。重复渐变就是执行多次渐变，以铺满整个区域。还有一种锥形渐变conic-gradient，类似径向渐变，不过是沿着时钟方向旋转渐变。

radial-gradient(形状/圆心位置 , 颜色位置% , 颜色位置% , … ) conic-gradient(开始角度/圆心位置 , 颜色位置% , 颜色位置% , … )
shape：径向渐变的图形形状，ellipse (默认)、circle （圆）
at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：
- 坐标定位（像素、百分比）：at 0 50%，at 10px 30px
- 方位定位（top、bottom、right、left、center）：at left top
from angele：锥形渐变的开始角度
size：渐变的大小，枚举值。

#gcdiv .b4{
      background-image: radial-gradient(black 6px,black 10px,white,red)
}
#gcdiv .b5{
      background-image: repeating-linear-gradient(0deg,red 3px,blue 10px)
}
#gcdiv .b6{
      background-image: repeating-radial-gradient(red 3px,blue 10px)
}
#gcdiv .b6{
      background-image: repeating-radial-gradient(at 0%,red 3px,blue 10px);
}
#gcdiv .b7{
      background-image: conic-gradient(at 50%,red,blue,yellowgreen,white);
}

锥形渐变实现的进度图效果：

<style>
      .pie{
              width: 200px;height: 200px;
              /* 锥形渐变实现进度环颜色 */
              background-image: conic-gradient(#7870e4 70%,#dce7f3 0) ;
              border-radius: 50%;
              padding: 20px;
              /* 内容居中 */
              display: flex;  align-items: center;
      }
      .pie p{
              height: 100%; width: 100%; font-size: 2em;
              /* 文字居中 */
              display: flex; justify-content: center; align-items: center;                
              /* 白色圆环 */
              background-color: white;    border-radius: 50%;
      }
</style>
<div class="pie">
   <p>70%</p>
</div>

计算函数calc()函数

calcIE9(计算表达式)可动态的计算出一个数值。

可用于长度、角度、时间、百分比、数字的计算。
支持+加法、-减法、*乘法、/除法。注意运算符前后须有空格，否则会无法识别为一个有效的表达式，因为+-可能会被认为是正负数。
```
width: calc(20% + 100px);
width: calc(100% / 6);
font-size: calc(1em + 1vw);
```
CSS变量--var
带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性(IE🚫)，通过 var()函数在作用域范围内复用的。

变量的作用域：取决于其申明的选择器。

:root {
--main-bg-color: pink; /*申明css全局属性（变量）*/
  --Hi: 'hello';
--Name: var(--Hi)',world'; /*字符串变量可以拼接*/
}
body {
background-color: var(--main-bg-color);
}

04、盒子模型

如下图，盒子模型就是每一个元素都是一个盒子，盒子有边框border，有内边距padding，有外边距margin，以及盒子内的内容区域content。一切皆盒子（box），HTML中的元素就是各种层叠的盒子，CSS的布局就是基于这些盒子。

∎content：盒子里的内容
∎padding：盒子内边距，盒子内容到边框的间距（上右下左，顺时针方向）。
∎border：盒子边框，盒子的边框线，包括多个样式属性：线粗细、线样式、颜色、圆角。
∎margin：盒子外边距，盒子和其他元素的间距（上右下左）。 | 属性 | 描述 | 值 | | —- | —- | —- | | ∎border | 边框样式（上右下左） | 可一起设置border:5px solid red; | | border-width | 设置四个边框的宽度 | border-width: 5px 10px 1px medium | | border-style | 设置 4 个边框线的样式 | dotted（点）、 solid（线）、 double（双线）、 dashed（虚线 /dæʃt/ ） | | border-color | 设置四条边框的颜色 | border-color:red green blue pink; | | border-radius | 设置四个 border--radius 圆角属性 | border-radius:15px 0; | | border-collapse | 表格的边框的合并设置 | collapse /kəˈlæps/ | | ∎padding | 设置所有（上右下左）内边距属性 | 数值/%padding:10px 5px; | | *∎margin | 设置所有（上右下左）外边距属性，可负数 | 数值/%margin:10px 5px 15px 20px; |

:::success ❗注意:

margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框border为止 —— 不会延伸到 margin
请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。

⁉️外边距折叠
两个外边距（上下）相接的元素，他们的外边距将合并为一个外边距，即最大的那个外边距的大小，而不是二者的外边距之和。当然不是绝对的，参考外边距重叠。 ::: 基于块级元素、内联元素的区别，盒子也分为两种：块级盒子 (block box) 和 内联盒子 (inline box)。
🔶块级盒子 (block box)

自动换行，宽度默认和父容器一样宽
width、height有效，内边距、外边距、边框会将盒子周围的元素“推开”。

🔶内联盒子 (inline box)

盒子不换行，width、height无效，基于元素内容自动设置。
垂直方向的内边距、外边距、边框有效，但不会把其他inline盒子推开。
水平方向的内边距、外边距、边框有效，会把其他inline盒子推开。

box-sizing盒模型标准

完整的盒模型应用于块级盒子，内联盒子只有部分有效。盒子模型有两种模式：标准盒模型、代替（IE）盒模型，通过属性box-sizing设置（IE8支持切换，之前都只有代替盒模型）。

box-sizing属性值	描述	备注
content-box	标准盒子模型（默认值） padding 和 border往外扩张：如果给元素设置 width 、height，实际设置的是 content box。整个盒子的宽高需再加上padding 和 border。切换标准盒模型：`box-sizing: content-box`
border-box	替代（IE）盒模型 padding 和 border都向内挤压：content box的宽高是要减去padding 和 border。切换代替盒模型：`box-sizing: border-box` 强制设置并继承： `html { box-sizing: border-box; }` `*{ box-sizing: inherit; }`

min/max-content内容尺寸

下面个*-content（IE🚫）“值”用来设置元素的宽度、高度，是基于盒子的内容来设置盒子尺寸。

尺寸值	描述
min-content	最小内容尺寸，基于盒子内容`content`最小的尺寸
max-content	最大内容尺寸，基于盒子内容`content`最大的尺寸
fit-content	适应内容尺寸（/fɪt/适应，合适），会根据视口的大小自适应min-content、max-content

<style>
        #d1 p{
                background-color: antiquewhite; padding: 3px;margin: 5px 0px;
        }
</style>
<div id="d1">
        <p style="width:min-content;">标题H2 title：min-content</p>
        <p style="width:max-content;">标题H2 title：max-content</p>
        <p style="width:fit-content;">标题H2 title：fit-content</p>
        <p style="width:auto;">标题H2 title：auto</p>
</div>

min/max-width尺寸边界

设置元素高宽的边界。

属性	描述
min-height	设置元素的最小高度，默认auto，当大于height会覆盖height的值
max-height	设置元素的最大高度，当小于height会覆盖height的值
min-width	设置最小宽度，默认auto，如果大于width会覆盖width的值
max-width	设置最大宽度值，如果小于width会覆盖width的值

对于替换元素（图像和视频），他们有自己的大小，这会影响布局，可以通过设置max-width:100%来控制其大小。虽然设置width: 100%;也可以控制大小，但会拉伸图片。

05、CSS样式属性

background背景

设置元素背景的样式，更好的衬托内容。

属性	描述	值
background	背景属性，可设置下面多个值。	`background:red no-repeat url(../res/png-0078.png);`
background-color	背景颜色
background-image	背景图片，还支持渐变色MDN	url(地址)
background-repeat	背景图片排列方式，枚举值	- repeat（默认值）：重复排列 - repeat-x：只水平重复排列 - repeat-y：只垂直重复排列 - no-repeat：不重复
background-size	背景图片大小，支持枚举值和数值，图片会进行缩放。如果用像素/百分比图片可能会被拉伸变形。	- auto：自动缩放 - cover：图片等比缩放覆盖背景区，图片可能显示不完整，和 contain 值相反。 - contain：图片等比缩放完全显示，背景可能会填充不完整。 - 像素或百分比：`background-size: 100px 200px;`
background-position	图片的位置，左上角为坐标系原点（x,y），如repeat则无效了	- left，top，center，right，bottom - 长度值/百分比
background-clip	背景的绘制区域	border-box、padding-box、content-box、text（仅文本）

.dbackg {                
        background: red,no-repeat url(../res/png-0078.png);
        background-color: rgb(76, 16, 189);
        background-image: url(../res/bimg.jpg);
        background-repeat: no-repeat;
        background-size: 100% 40px;
        background-size: cover;
        background-position: top;
        height: 40px;
}

text文本样式

针对文本布局、装饰的样式类属性。

属性	描述	值/备注
text-align	文本水平对齐	left、center、right、justify
text-indent	段落首行缩进	尺寸px、em
line-height	文本行高，建议设置1.5em，便于阅读	可设置为无单位数值，1.5=1.5em
text-decoration	文本装饰（划线），可同时设置多个值	`text-decoration: underline overline blue dashed 1px;`
text-decoration-line	设置装饰线	- underline：下划线 - overline：上划线 - line-through：中划线 - none：无，可用于去掉a标签的默认下划线
text-decoration-style	装饰线线的样式	波浪线`wavy`，实线`solid`，虚线`dashed`，双实线`double`，点线`dotted`
text-decoration-color	装饰线颜色
text-decoration-thickness	装饰线粗细	尺寸px
text-shadow	文本应用阴影，4个值：水平偏移，垂直偏移，模糊半径，阴影颜色	可设置多组值，叠加生效
text-transform	控制文本的大小写	- capitalize： /ˈkæpɪtəlaɪz/ 大写字母开头。 - uppercase：全大写字母。 - lowercase：全小写字母。
writing-mode	文字方向，水平、垂直
text-overflow	处理溢出的内容，如裁剪、省略号	需配合overflow 和 white-space使用
white-space	元素中空白的处理	nowrap，空白符合并+换行无效。
letter-spacing	增加或减少字符间的空白（字符间距）	`letter-spacing:-3px;`
word-spacing	单词间距
overflow-wrap、word-break、word-wrap	都是针对长单词的强制换行，如长的url地址。	wrap，/ræp/ 换行

.textf{
    color: rgb(182, 12, 12);
    text-align: left;
    text-decoration: underline overline line-through;
    text-decoration-color: blue;
    text-indent: 2em;  /*缩进2个字符*/
        /*文字溢出...*/
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
}

🔸文本垂直居中的几个方法：5

#tdiv p{
        background-color: aquamarine; height: 60px;
}
/* 方法1：height=line-height，针对单行的文本。 */
#tdiv .p1 {                
        line-height: 60px;
}
/* 方法2：使用table-cell布局，然后垂直居中。表格单元格的内容可以垂直居中 */
#tdiv .p2 {
        line-height: 1.5em;
        display: table-cell;
        vertical-align: middle;
}
/* 方法3：flex布局 */
#tdiv .p3 {
        display: flex;
        align-items: center;
}
/* 方法4：利用伪元素::before */
#tdiv .p4::before{
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
}
/* 方法5：用flex布局+flex对齐 */

font文字样式

针对文字的样式属性。

属性	描述	值
color	字体颜色
font	下面几个字体样式属性的简写	font-size 和 line-height 之间须放斜杠`/`
font-family	字体类型，可以设置多个（字体栈，font stack），逗号隔开，浏览器依次选择。注意浏览器使用的是本机字体，Web字体	`font-family: Helvetica, Tahoma, Arial,"Microsoft YaHei","微软雅黑",STXihei,"华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;`
font-size	字体大小，font-size 属性是默认素继承的，从根元素开始，默认16px	尺寸px、em、rem
font-style	字体风格，斜体。	italic： /ɪˈtælɪk/ 字体本身的斜体 oblique：/əˈbliːk/ 强制的斜体
font-weight	字体粗细，枚举值，默认normal	- bold：加粗 - bolder：更粗 - lighter：更细 - 数值100-900：400为正常，700粗体

.fsum {
        color: red;
        color: #ff0000;
        color: rgb(255, 0, 0);
        color: rgba(255, 0, 0, 1);
        font-family: Helvetica, Tahoma, Arial,"Microsoft YaHei","微软雅黑",STXihei,"华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;
        font-size: 20px;
        font-style: oblique;
        font-style: italic;
        font-weight: 600;
        font-weight: bold;
}

用@font-face从网络上下载字体。

@font-face {
    font-family: "myFont";
    src: url("myFont.ttf");
}
html {
    font-family: "myFont", "Bitstream Vera Serif", serif;
}

表格样式

针对表格元素的样式，css中常用伪类选择器（:first-child、:nth-of-type等）来设置行列的样式、隔行换色，详见选择器章节。

属性	描述	值/示例
table-layout	设置表格单元格行列算法，创建更可控的表格布局	- auto：自动布局，基于内容自动调整宽度 - fixed：固定宽度，设置首行width，默认等宽
border-collapse	设置表格单元格的边框合并方式，一般推荐合并 `border-collapse: collapse`	- collapse：合并模式，合并相邻单元格边框 - separate：分割模式（默认值）
vertical-align	垂直对齐：行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式	tbody上默认`vertical-align: middle;` - top、middle、bottom - sub、super：下标、上标
border-spacing	单元格水平、垂直间距，separate分割模式有效	`border-spacing: 5px 3px;`
caption-side	设置表格标题caption元素的位置

.table{
        table-layout: fixed;
        width: 100%;
        border: 2px black solid;
        border-spacing: 5px 3px;
}
/* 单元格内容溢出样式 */
.table td{
        text-overflow:ellipsis;
        overflow: hidden;
        white-space: nowrap;
        border: 0px;
}
/* 单元格列宽 */
.table tr:first-child th:nth-child(1){
        width: 140px;
}
.table tr:first-child th:nth-child(2){
        width: 150px;
}
.table tr:first-child th:nth-child(3){
        width: 100%;
}
.table tr:nth-child(2) td:nth-child(1){
        height: 50px;
        vertical-align: top;
}

列表样式

列表类型的元素包括ol、ul、dl，下面是列表特有的属性。

css属性	描述	值/示例
list-style	下面三个属性的简写
list-style-type	设置ul、ol的序号符号	实心圆`disc`、空心圆`circle`、数字`decimal`、字母`lower-alpha`、方块`square`、汉字数字`cjk-decimal`
list-style-position	序号符号出现的位置	inside、outside
list-style-image	用图片作为符号	`url();`

#ldiv2 ul>li{
        list-style:none outside url();
        /* 用背景图实现符号效果 */
        background: url(../res/sk\ \(17\).png) no-repeat;
        background-size: 1.3em;
        background-position: 0 0;
        padding-left: 1.5em;
        line-height: 1.8em;
}
#ldiv2 ol li{
        list-style-type: lower-alpha;
        line-height: 1.5em;
}

animation动画

、、、

其他样式属性

属性	描述	值/备注
overflow	溢出方式，元素内容超出盒子大小的处理方式，是overflow-x 和overflow-y的简写属性	- visible：可见（默认值），内容会超出本身区域 - hidden：内容被裁剪 - scroll：滑动条 - auto：自动
cursor	光标类型，最常用的是pointer，也就是一只手	text（输入）、help（问号）、move
direction	设置文本、表列水平溢出的方向。	ltr 从左到右， rtl 从右到左
all	将除了 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。	`.class{ all: unset; }`
opacity	透明度（0-1），对元素整体生效，初始值1	`opacity: 0.5;`
mask	蒙版，用于创建镂空效果
appearance	元素的默认样式（通常都设为none，表示消除默认外观）
outline	外框，不占据空间，绘制于元素内容周围	效果、值同border差不多
box-shadow	元素阴影，五个值：X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色	`box-shadow: 10px 5px 5px black;`
transition
animation

技术人生

CSS基础知识

01、CSS 基础知识(框架)

框架

CSS 是怎么工作的？

02、基本语法

CSS 的简写属性

CSS的使用

层叠、优先级和继承

@规则

03、常见值与单位

尺寸（长度/大小）

color颜色值

渐变色gradient

计算函数calc()函数

CSS变量`--var`

04、盒子模型

box-sizing盒模型标准

min/max-content内容尺寸

min/max-width尺寸边界

05、CSS样式属性

background背景

text文本样式

font文字样式

表格样式

列表样式

animation动画

其他样式属性

CSS基础知识

01、CSS 基础知识(框架)

框架

CSS 是怎么工作的？

02、基本语法

CSS 的简写属性

CSS的使用

层叠、优先级和继承

@规则

03、常见值与单位

尺寸（长度/大小）

color颜色值

渐变色gradient

计算函数calc()函数

CSS变量--var

04、盒子模型

box-sizing盒模型标准

min/max-content内容尺寸

min/max-width尺寸边界

05、CSS样式属性

background背景

text文本样式

font文字样式

表格样式

列表样式

animation动画

其他样式属性

CSS变量`--var`