CSS

初识 css

css 全称 Cascading Style Sheets，层叠样式表

修饰网页样式并不是只有 css，当时有个强力竞争对手 svg，但是css的层叠性让它脱颖而出

目前 css3 只是某些模块升级到3，不是全部，有些模块已经升级到4了

官方文档

https://www.w3.org/TR/CSS22/propidx.html

中文文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS

查看 css 属性可用性

https://caniuse.com/

css 属性变成标准 standard需要经过草稿 drafts、备选推荐、推荐这几个步骤；

谷歌一般会在草稿里看看哪些属性好不好用，好用就支持，而别的浏览器可能不怎么做；

所以有时 css 有些属性出现兼容性问题

css 引入

html 三种引入 css：

• 内联样式
• 文档样式表
• 外部样式表

现代开发网页要结构与样式分离

外部样式表引入

• link 元素
• style 元素里@import

<style>
  @import url();
</style>

link 效率高一点

css 引入 css

@import url();

css 文件编码

指定单个 css 文件编码

@charset "utf-8";

选择器

• 通配选择器
• 元素选择器
• 类选择器
• id 选择器
• 属性选择器
• 组合
• 伪类
• 伪元素

通配选择器

通用属性的设置，比如

 {
  margin: 0;
  padding: 0;
}

通配符 * ，但是一般列出需要使用这些通用属性的元素，因为*内部原理是在网页元素中做个遍历，给每个元素加上这些样式，这样可能影响网页运行效率，因为有些元素是不需要这些属性的

id 选择器

id 名一个页面只能有一个（规范）

类选择器

• 一个元素可以多个类选择器，空格分开

<h2 class="title">123</h2>

.title {
}

伪类选择器

动态伪类

• :link （a:link 未访问的链接）
• :visited （a:visited 已访问的链接）
• :focus （获取焦点时）
• :hover （a:hover 鼠标移动到）
• :active （a:active 点击未松手）

同时存在以上属性时，推荐这个顺序，不然会有很多问题

（女朋友看到lv包包后，haha 大笑）

:hover 和:active 也可以应用到其它元素上

应用

去掉 a 元素的焦点状态

a:focus {
  outline: none;
}

或者

<a tabindex="-1"></a>

tabindex 可以调整 tab 选中元素的顺序

结构伪类

• :nth-child() 正着数
• :nth-last-child() 倒着数
• :nth-of-type() （例子：p:nth-of-type(2) 只数 p 元素，且是第 2 个子元素）
• :nth-last-of-type()
• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :root 代表 html
• :only-child（父元素中唯一子元素）
• :only-of-type
• :empty

否定伪类

• :not()

除了（）

目标伪类

• :target 用于锚点链接

属性选择器

<style>
    [title] {
      color: red;
    }
  </style>

<div title="div">123</div>
<p title="p">111</p>

div 和 p都有title 属性，其它属性同理

元素选择器

<h2>123</h2>

h2 {
}

伪元素选择器

常用伪元素

• ::before
• ::after
• ::first-line
• ::first-letter

::first-line

第一行

::first-letter

第一个字母

::before

在一个元素的内容之前插入内容

span::before {
  content: "123";
  color: red;
}

<span>hhh</span>

hhh 前面多出123并且是红色

除了文字，还可以加图片

span::before {
  content: url();
  color: red;
}

<span>hhh</span>

::after

在一个元素的内容之后插入其它内容

注意：

• 伪元素可以看成是行内元素
• content属性不能少

组合选择器

后代选择器

div sapn {
}

间接后代和直接后代

子选择器

直接子代

div > span {
}

兄弟选择器

div + span {
}

交集选择器

1.同时符合两个条件的元素：div 元素、class="one"

div.one {
}

2.同时符合 3 个条件的元素：div 元素、class="one"、属性值 title="test"

div.one[title="test"] {
}

并集选择器

只要符合任一条件即可：div 元素或class="one"

div,
.one {
}

常用的 css 属性

• color，文字颜色，前景色更严谨
• font-size，文字大小
• background-color，背景颜色
• width/height，宽高

颜色

rgb 颜色空间

red: 0-255

green: 0-255

blue: 0-255

rgba

red: 0-255

green: 0-255

blue: 0-255

alpha: 0-1 透明度，0 完全透明

16 进制

两个一样写一个，缩小 css 体积

div 的 outline 属性

调试技巧

在开发者工具加上这段样式

div {
  outline: 2px solid red !important;
}

可以清晰地看出网页的结构，并且可以知道哪一块用的div

line-height

文本的最小行高

行高：两行文字基线baseline之间的间距

行距会等分

应用：

块级元素垂直居中

display

元素类型是浏览器赋予的，并且可以更改

display 常见 4 个属性可以更改

• block 变成块级
• inline 变成行内级
• inline-block 变成行内块（同时具备块级和行内级特点）
• none 隐藏

巩固练习：

• 邮箱下拉菜单
• 模拟百度分页列表

visibility

控制元素可见性，有 2 个常用值，

• visible
• hidden

区别display: none;，它还占据空间，display 不占据

overflow

控制内容溢出的行为

• visible
• hidden
• scroll

cursor

鼠标样式

auto

default 跟随操作系统

pointer 小手

text 竖线

文字省略

三条件：

• 内容超出不换行（white-space）
• 内容超出不显示（overflow）
• 内容溢出结尾省略号（text-overflow）

white-sapce

内容超出是否换行

• normal 换
• wrap 不换

text-overflow

设置文字溢出部分行为

• clip 溢出裁剪
• ellipsis 溢出那行的结尾省略号表示

前提是 overflow 不为 visible

white-space: wrap;
overflow: hidden;
text-overflow: ellipsis;

文本属性

text-align

元素内容在元素中的水平对齐方式

• left
• right
• center

text-decoration

装饰文字的装饰线

• none 去除 a 元素默认下划线
• underline 下划线
• overline 上划线
• line-through 中划线（删除线）

letter-spacing

字母间距

word-spacing

单词间距

text-transform

大小写转化

• capitalize 首字母大写
• uppercase 全部大写
• lowercase 全部小写

text-indent

缩进

列表属性

• list-style-type 设置li 元素前面标记的样式（none 值用的多）
• list-style-image
• list-style-position

表格属性

• border-collapse

细线表格

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
</table>

table {
  /* 单元格合并 */
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  padding: 20px;
}

为什么要进行单元格边框合并？

给单元格设置边框时，单元格是紧挨着的，两个单元格会有重叠的部分，本来1px的重叠成2px，因此做出细线表格

border-collapse: collapse;这个属性很重要

表单属性

去除 input 的 tab 键选中效果

input {
  outline: none;
}

textarea 禁止缩放

textarea {
  resize: none;
}

字体

font-size

字体大小

font-family

字体类型；

与操作系统有关系；

为了防止设置的字体操作系统不存在，一般设置多个，从左往右，找到为止；

font-weight

字体粗细

normal：400

bold：700

font-style

斜体

• normal
• italic 用字体的斜体显示（前提是这种字体支持斜体）
• oblique 文本倾斜

网络字体

要想使用 os 没有字体，怎么做？

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

@font-face {
  /* 命名 */
  font-family: "zsf";
  /* 路径 */
  src: url();
}
.box {
  font-family: "zsf";
}

常见字体种类

• ttf
• otf
• eof
• svg
• woff

字体图标

阿里巴巴字体图标库

在 font 文件夹里放需要字体

<span>对应字符串</span>

@font-face {
  /* 命名 */
  font-family: "zsf";
  /* 路径，可多个，为了兼容 */
  src: url();
}
span {
  font-family: "zsf";
}

或者使用附带的css文件（下载字体图标时有），link进来，就可以省去@font-face了，或者

<span class="iconfont icon-arrow"></span>

(可以去掉那对应字符串了，因为那 css 文件设置了伪元素::after，会自动加上图标对应的字符串编码)

使用图片方式比较

img 元素	网站重要组成部分
background-image	先加载 css 再解析 url；可以使用精灵图减少请求次数
iconfont 字体图标	字体图标放大时不会失真；也可以减少请求次数

CSS 特性

• 继承
• 层叠

继承性

何为继承？

一个元素要是没有设置某属性值，就继承父元素的值，有的话就用自己的

可继承的属性

不用死记硬背用多了就熟练了，直接查文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS

那有些不支持继承的属性要是想继承呢？

• 100%
• inherit

注意

继承过来的是计算值，而不是字面值，在使用em 为单位就会区别出来了

层叠性

• css 允许多个相同名字的 css 属性层叠在一个元素上

基本层叠

后面覆盖前面（前提是同类型选择器）

带权重的层叠

选择器的权重

方便比较，数值不重要

权重高的生效

• !important 10000
• 内联样式 1000
• id 100
• 类、属性、伪类 10
• 元素、伪元素 1
• 通配符 0

比较的话也是从权重大的开始比较，有一样权重的就比数量

元素类型

根据元素能不能在同一行显示，html 元素主要分 2 类

• 块级元素
• 行内级元素

块级元素

• 独占父元素一行

常见：div、p、h1-h6、table、form、列表等等

行内级元素

• 多个行内级元素可以在父元素的同一行中显示

常见：a、img、span、input、button 等等

元素之间的空格

只要是行内级元素之间都会有空格，产生的原因是代码的换行符

较好的解决方法：

给元素加 float

另一种分法

根据内容（是否浏览器会替换掉元素）类型，html 元素可以主要分 2 大类元素

• 替换元素
• 非替换元素

替换元素

元素本身没有实际内容，浏览器根据元素类型和属性，来决定元素的具体显示内容

常见：img、input、video 等等

非替换元素

与替换元素相反

宽高由内容决定

注意

"行内级元素不能设置宽高"这种说法是不准确的

比如常见的img 和 input，可以设置宽高

行内级非替换元素不能生效的属性：

• width
• height
• margin-top
• margin-buttom

对行内级非替换元素特殊的属性

padding的上下（上下多出区域，但不占据空间）

border的上下（上下多出区域，但不占据空间）

盒子模型

每一个元素就是一个盒子

内容 content

min-width 最小宽度，确保内容能正常显示（尽管出现滚动条）

内边距 padding

内边距会撑开盒子

外边距 margin

margin 上下传递

如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

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

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box {
  width: 200px;
  height: 200px;
  background-color: orange;
}
.inner {
  height: 100px;
  width: 100px;
  background-color: purple;
  margin-top: 20px;
}

防止 margin 上下出现传递

• 给父元素设置padding-top/padding-bottom
• 给父元素设置border
• 触发 BFC（最有效）

BFC：block format context，类似于结界

如何触发 BFC？

• float
• 设置一个元素overflow为非 visible

建议

• margin 一般用来设置兄弟元素间
• padding 一般用来设置父子元素间

margin 上下折叠

垂直方向上相邻的 2 个 margin有可能会合并为 1 个 margin，这种现象叫collapse

防止 margin 上下折叠

• 只设置其中一个元素的 margin

段落之间设置 margin 折叠有妙用

边框 border

边框主要有三种属性：

• 宽度 width
• 样式 style
• 颜色 color

当边框远大于内容大小时，会出现一些有趣的形状

圆角 border-radius

值为50%（这里的**%是当前元素的（padding+border+width））时，就是圆**

盒子相关属性

box-shadow

盒子阴影

shadow= inset?&&<length>{2,4}&&<color>?

• <>:表示要具体的值
• {2,4}:2 到 4 位
• &&:且，对顺序没要求
• \？:有或没有

第一个 length：水平方向

第二个 length：垂直方向

第三个 length：模糊半径

第四个 length：延伸距离

阴影练习

text-shadow

文字阴影

类似盒子阴影

box-sizing

盒子尺寸

• content-box内容盒子（设置宽高时只是指定内容的宽高）
• border-box（设置宽高时是内容+内边距+边框的高度）

背景

background-image

设置元素背景图片

会盖在（不是覆盖）background-color 上面

可以设置多张，默认显示前面一张（其它图片按顺序层叠在下面）

img 和 background-image 都可满足需求，开发如何选择？

网页重要组成部分用 img

background-repeat

平铺

• repeat-x

• repeat-y

• no-repeat

• repeat

background-size

背景图片大小

• cover 覆盖整个盒子（拉伸图片），不保持宽高比
• contain 拉伸到较短一边为止，保持图片宽高比
• 值 1 个%只是水平方向，2 个%才有垂直

background-position

• 第 1 个值是水平方向
• 第 2 个值是垂直方向
• 如果只有 1 个值，另一个默认 center

css-sprite 精灵图（雪碧图）

是一种 css图像合成技术，将各种小图片合并到一张图片上，然后利用 css 的背景图定位来显示对应图片部分

好处

• 减少向服务器请求的数量，加快网页的响应速度，并减少服务器压力
• 减少图片总大小

雪碧图制作：

• ps
• https://www.toptal.com/developers/css/sprite-generator

练习：

京东案例-多快好省

背景居中（无论屏幕大小多少，都能看到中间的主要内容，并且居中显示）

background-attachment

• local 背景会随着 box 内容滚动而滚动
• scroll 滚动浏览器时全部内容会随着浏览器滚动
• fixed 背景是固定的，不会随着 box 内容滚动而滚动

background 简写

image position/size repeat attachment color

定位

标准流 normal-flow

在标准流中，可以使用margin、padding对元素定位

缺点：

• 设置一个元素的margin或者padding，通常会影响标准中其他元素的定位效果
• 不便于实现元素的层叠效果

可以使用定位实现元素间层叠

position

static

标准流（设置 4 方位的值没意义 ）

relative

相对（相对原来的位置，也就是标准流时的定位）

absolute

绝对

原理

检查最近父元素的是不是非 position: static，如果是，那就相对于该父元素定位；

如果该父元素并没设置 position（也就是static），那就继续往上检查；

如果一直没找到，那就相对于浏览器视口定位

子绝父相

希望子元素（absolute）相对于父元素进行定位，又不希望父元素脱标（relative）

绝对定位技巧

绝对定位元素

position 值为absolute 或 fixed的元素

对于绝对定位元素来说：

水平方向:

$$ 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度 $$

垂直方向：

$$ 定位参考对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素实际占用高度 $$

应用

1.完全占据父元素

out {
  position: relative;
  width: 600px;
  height: 600px;
}
inner {
  position: absolute;
  left: 0;
  right: 0;
}

2.让内容水平居中

out {
  position: relative;
  width: 600px;
  height: 600px;
}
inner {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

3.内容垂直居中

out {
    position: relative;
    width: 600px;
    height: 600px;
}
inner {
    position: absolute;
    width: 200px;
    height: 200px;
    margin: auto;
    top: 0;
    bottom: 0;
}

绝对定位练习

考拉练习

fixed

固定（相对浏览器视口，当画布滚动时，固定不动）

固定定位练习

考拉侧栏

元素之间的层叠关系

• 父子关系
• 定位元素在非定位元素上
• 都是定位元素时，后面的元素会盖上前面的元素

都是定位元素的情况下，要是希望前面的元素盖上后面的怎么做？

z-index

只对定位元素有效

浮动

• 浮动也会让元素脱标
• 浮动元素与行内级元素重叠，行内级元素会被浮动元素推出、处于块级的内容也会被浮动元素推出（图文环绕）
• 行内级元素、inline-block 元素浮动后，其顶部将所在行顶部对齐

层叠关系：

标准流元素 < 浮动元素 < 定位元素

inline-block 水平布局的缺陷

• 垂直有些属性会影响水平布局

• 父元素空格产生空隙（空隙大小由父元素字体大小决定）

浮动可以解决这个问题

高度坍塌

真实开发父元素高度是不确定的（auto），但是浮动会使子元素脱标，不再向父元素汇报高度，这时父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌问题

解决父元素高度坍塌问题的过程，叫清除浮动

清除浮动

空元素加入空白块

<div class="topDiv">
  <div class="textDiv">...</div>
  <div class="floatDiv">float left</div>
  <div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>

.topDiv {
  width: 500px;
  border: 2px solid black;
}

.floatDiv {
  width: 100px;
  height: 100px;
  border: 2px dotted red;
  color: red;
  margin: 4px;
  float: left;
  clear: both;
}

.bottomDiv {
  width: 500px;
  height: 100px;
  margin: 5px 0;
  border: 2px dotted black;
}

.textDiv {
  color: blue;
  border: 2px solid blue;
}

.blankDiv {
  clear: both;
}

.blankDiv告诉浏览器，左右不允许有浮动的元素存在；

然而，因为浮动元素（.floatDiv）位置已经确定，浏览器在计算.blankDiv的位置时，将.blankDiv渲染在浮动元素下方，保证了.blankDiv左右没有浮动元素；

同时可以看出，父元素的高度也被撑起来了，其兄弟元素的渲染也不再受到浮动的影响，这是因为.blankDiv仍然在文档流中，它必须在父元素的边界内，父元素只有增加其高度才能达到此目的；

伪元素加入空白块

.clear-fix::after {
  content: "";
  clear: both;
  display: block;
}

同理

给topDiv加上clear-fix 类即可

<div class="topDiv clear-fix">
  <div class="textDiv">...</div>
  <div class="floatDiv">float left</div>
  <div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>

浮动布局练习

京东案例

脱标后元素的特点

• 可以设置宽高
• 宽高默认由内容决定
• 不在受标准流束缚
• 不再给父元素汇报宽高数据

脱标后的元素和 inline-block 有什么区别？

脱标后的元素不是inline-block，而是block，虽然脱标后有时和块级元素在一行，但这是因为脱标后，很难知道父元素是谁（没有父元素了），宽高都是 auto，这时的现象是包裹内容（宽高由内容决定）

形变

transform

• 旋转 rotate(deg)
• 倾斜 skew(deg,deg)
• 平移 tanslate(x,y)
• 缩放 scale(x,y)

形变原点

transform-origin

过渡动画

transition

给形变加上首帧和尾帧

• property指定过渡属性（有 transform、width、height、all）
• duration指定过渡时间
• timing-function指定动画的变化曲线
• delay 延迟动画时间

关键帧动画

transition可以进行过渡动画，但是过渡动画只能控制首尾两个值：第一帧和最后一帧

要是希望有更多状态（帧）可以使用关键帧动画

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

.box {
  height: 150px;
  width: 150px;
  background-color: red;
}
.box:hover {
  animation: zsf 2s linear;
}
@keyframes zsf {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(200px, 0);
  }
  50% {
    transform: translate(200px, 200px);
  }
  75% {
    transform: translate(0, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

• @keyframes创建规则

• 百分比设置各阶段动画（形变）from相当于0%，to相当于100%

• 通过animation将动画添加到属性上一般只用三个值（值 1，值 2，值 3）：

  值 1：动画名字（@keyframes 创建的规则）

  值 2：执行时间

  值 3：动画速率

3D 动画

css 实现 3D 有两个属性：

• transform-style: perserve-3d
• perspective

但是 css 实现 3d 有很多兼容性问题

推荐一个 js 实现 3d 的库

three.js

稳定兼容

flex 布局

除了图文环绕，flex 完全可以替代 float

两个重要的概念

• 开启了 flex布局的元素叫 flex container
• flex container 里面的直接子元素叫flex items

开启

• flex 块级
• inline-flex 行内级

outer {
  display: flex;
  display: inline-flex;
}

布局模型

flex container 上的 css 属性

应用在 flex container 上的 css 属性

• flex-flow
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

flex-direction

默认 flex items 是沿着main axis（主轴）从main start->main end方向排布的

决定主轴方向

有 4 个值：

• row 默认
• row-reverse
• column
• column-reverse

justify-content

决定了flex items在main axis上的对齐方式

flex-start	默认，与main start对齐
flex-end
center	居中对齐
space-between	flex items 间距离相等，与 main start 和 main end两端对齐
space-evenly	flex items 间距离相等，且该距离等于flex items到两端距离
space-around	flex items 间距离相等，且该距离等于flex items到两端距离2 倍

align-content

决定了多行 flex items 在cross axis上的对齐方式，用法与justify-content类似

stretch	与 align-items 的 stretch 类似
flex-start	与 cross start 对齐
flex-end
center	居中
space-between	flex items 间距离相等，与 cross start 和 cross end两端对齐
space-evenly	flex items 间距离相等，且该距离等于flex items到两端距离
space-around	flex items 间距离相等，且该距离等于flex items到两端距离2 倍

align-items

决定了flex items在cross axis上的对齐方式

normal	默认，效果和 stretch 一样
stretch	当flex items在cross axis方向的size 为auto时，会自动拉伸至填充 flex contain
flex-start	与cross start对齐
flex-end	与cross end对齐
center	居中
baseline	基线对齐（第一行作为基线）

flex-wrap

默认情况，所有flex items都会放在一行显示

no-wrap	默认
wrap	换行
wrap-reverse	在交叉轴反转

flex-flow

是flex-direction || flex-wrap的简写

顺序任意

flex items 上的 css 属性

• flex
• flex-grow
• flex-basis
• flex-shrink
• order
• align

order

决定 flex items 的排布顺序，值越小，排越前

• 默认是 0

align-self

通过 align-self覆盖 flex container设置的align-items

• auto 默认，遵从 flex container 的 align-items
• stretch、flex-start、flex-end、center、baseline 效果跟 align-items 一样

flex-grow

决定了 flex items 如何拓展

• 默认值 0
• 当flex container在main axis方向上有剩余 size时，flex-grow属性才会有效
• flex-grow 总和大于等于 1时，等比拓展（加上乘以 size 的值，用完剩余 size）；小于 1时，各自乘以小数（有剩余 size）

flex-shrink

决定了 flex items 如何收缩

• 默认 1
• 当 flex items 在main axis方向上超过了flex container的size时（oversize），flex-grow属性才会有效
• 当 flex items 的**flex-shrink 总和大于 1 时，**等比收缩（减去乘以 oversize 的值）；小于 1 时就用得少，因为还是溢出

flex-basis

决定flex items在main axis主轴上的base size

• auto 自身宽/高
• 具体值

决定 flex items 在 main axis 主轴上的 base size 的优先级

• max-size...
• flex-base
• size
• 内容本身的 size

flex

是 flex-grow || flex-shrink || flex-basis 的简写

网格布局

容器

元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器；

这个元素的所有直系子元素将成为网格项目；

网格轨道

网格上任意两条相邻线之间的空间；

可以使用 grid-template-rows 和 grid-template-columns 属性定义网格上的行和列，这些属性定义了网格轨道

基本示例

<div class="wrapper">
  <div>一</div>
  <div>二</div>
  <div>三</div>
  <div>四</div>
  <div>五</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

三个200px的轨道

fr单位

代表网格容器中可用空间的x等分；

比如三等分可以这样写：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;// 也可以写成 repeat(3, 1fr);
}

repeat表示重复模式，上面表示以一个轨道1fr的模式，重复3次；

它还支持传入轨道列表；

grid-template-columns: repeat(5, 1fr 2fr);

这个则表示，共10个轨道，一个1fr轨道后面跟一个2fr轨道的模式，重复5次；

轨道高度

默认情况下，轨道会自动调整大小，取决于轨道内的内容；

grid-auto-rows 可以指定轨道高度

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

弹性和绝对宽度

.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

minmax

创建的行高度最小为 100 像素，最大为 auto，将取决于内容的大小；

<div class="wrapper">
  <div>一</div>
  <div>
    二
    <p>这里有更多内容。</p>
    <p>使得这里高于 100 像素。</p>
  </div>
  <div>三</div>
  <div>四</div>
  <div>五</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

网格间距

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 1em;
}

以上列与列之间创建了 10 像素的间隙，在行与行之间创建了 1em 的间隙

现代浏览基本支持无前缀，如果不生效，可以加上grid前缀，如grid-row-gap

移动端适配

视口

meta

• name
• content

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

rem 适配

root em，rem 总是相对于html 的 font-size

原理

如何做移动端适配的？

1. 根据不同手机屏幕，设置不同 html 的 font-size大小
2. 将所有需要适配的图片、元素、字体大小的单位，统一用 rem

如何根据不同手机屏幕，设置不同 html 的 font-size 大小？

2 种做法：

• 媒体查询
• js 动态计算（用的最多）

动态计算 rem 值

如何直接根据html 的 font-size大小动态的计算出对应的rem值？

• vscode 插件 px to rem（快捷键 Alt+Z）（不推荐）
• postcss-pxtorem 插件（响应式项目，移动端用了 px 包转 rem，pc 端样式用 /*no*/ 声明该样式不转 rem）
• 利用 less 的计算能力（可以定义变量和计算）

less需要转化成 css才能生效，而转化成 less 有 2 种方案：

• easy less 插件（写完保存）
• node 安装（npm）

媒体查询

/* ipone5 320px*/
@media screen and (min-width: 320px) {
  html {
    font-size: 9px;
  }
}
/* ipone6 375px*/
@media screen and (min-width: 375px) {
  html {
    font-size: 10px;
  }
}
/* ipone6 plus 414px */
@media screen and (min-width: 414px) {
  html {
    font-size: 11px;
  }
}

js 动态计算

学会引入即可

文字大小单位

px	像素
em	相对于父元素字体的大小，2em 就是2 倍父元素字体大小
%	相对于父元素的字体

宽度

px	像素
em	自己有设置 font-size，那就相对于自己的 font-size；没有则相对父元素的 font-size
%	父元素宽度

常见技巧

水平居中

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

普通文本、行内级元素

.box {
  text-align: "center";
}

行内块级元素

.box {
  text-align: "center";
}
选择器 {
  display: inline-block;
}

块级元素没有宽高时

他占据了父元素整个宽

.box {
    text-align: "center";
}
选择器 {
    没有宽高
}

与父元素一样宽高的元素，给他父元素设置 text-align: "center";没有意义，但是由于继承了父元素属性，也可以使其内容居中

块级元素即使有宽高

也占据了父元素整个宽（独占一行）

.box {
    text-align: "center";
}
该盒子选择器 {
    宽高
}

与父元素一样宽高的元素，给他父元素设置 text-align: "center";没有意义，但是由于继承了父元素属性，也可以使其内容居中，但该盒子不会相对父元素居中，只是该盒子的内容在该盒子里居中

怎么让该盒子在父盒子里水平居中呢？

该盒子选择器 {
  margin: 0 auto;
}

原理

那垂直方向可以用auto居中吗？

不可以，垂直意味着父元素高度是auto，而父元素高度 auto 的话，那父元素高度是内容撑起来的，也就没有垂直居中之说；

为什么水平方向可以呢？

因为不给父元素设置宽度，它的值是auto，这样子元素的margin 左右设置auto就可以等分

注意：margin-top的**%参照的是宽度而不是高度**

margin 负值

进行布局时，同一行多个元素摆放后，设置margin-right让他们之间产生间距，那么最后一个元素设置的 margin-right 总是多余的

解决方法

• 每一行的最后一个元素，总是加一个 class，去除 margin-right
• 伪类选择器（会有兼容性问题）
• .outer 固定宽度=.inner+负 margin(最优)

补充

浏览器的私有前缀

为什么要加浏览器前缀？

为了兼容。。。

如何加上浏览器前缀？

打包工具会帮我们添加上去，无需手动

css 属性使用经验

设置的 css 属性不生效

• 选择器优先级低
• 选择器没选中
• 使用形式不对
• 浏览器不支持该属性

多使用开发者工具调试

好看的颜色网站：

https://flatuicolors.com/

爬取数据技巧

斗鱼 f12 切换成移动到 刷新 network

fetch/xhr 复制链接地址在别的窗口打开，会有 json 格式的数据

预处理器

less

&&

类似于&，父选择器

属性

gap

gap 是 CSS 中 Flexbox 和 Grid 布局中的属性，用于设置子元素之间的间距。它是 row-gap 和 column-gap 的缩写，用于定义 Flexbox 容器或 Grid 容器中行和列之间的间距。

flex

.flex-container {
  display: flex;
  gap: 10px; /* 设置子元素之间的间隔为10像素 */
}

grid

.grid-container {
  display: grid;
  gap: 10px; /* 设置子元素之间的间隔为10像素 */
}

inset

用于设置元素偏移的新属性，它是 top、right、bottom 和 left 属性的集合。

element {
  inset: top right bottom left;
}

样式积累

子元素写>与不写的区别

li>a

表示 li 的直接子元素 a

li a

表示 li 的间距子元素（有可能是子孙）

flex 控制顺序

order，数字越小越靠前；

遮罩层

<div class="container">
  <!-- 其他内容 -->
  <div class="overlay"></div>
</div>

/* 初始时，遮罩层不可见 */
.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
}

/* 当包含遮罩层的容器被悬停时，显示遮罩层 */
.container:hover .overlay {
  display: block;
}

/* 假设要悬停的元素位于一个包含遮罩层的容器中 */
.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>

  </style>
</head>
<body>



</body>
</html>

hint 效果

.hint {
  background-color: #f5f7f9;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  border-left: 4px solid #346ddb;
  padding: 20px;
  margin: 10px 0;
}

使用

<div class="hint" markdown="1"></div>

白天/黑夜模式切换，匹配内容不同样式

方案一

两种文件，监听切换事件，切换 link 的 href

假设是 react

import React, { useState } from "react";

const ExamplePage = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const handleModeChange = () => {
    setIsDarkMode(!isDarkMode);
    const themeLink = document.getElementById("theme-link");
    themeLink.href = isDarkMode ? "/path/to/light.css" : "/path/to/dark.css";
  };

  return (
    <div>
      <h1>Example Page</h1>
      <button onClick={handleModeChange}>
        {isDarkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
      </button>
    </div>
  );
};

export default ExamplePage;

使用了 React 的 useState 钩子来管理当前的模式状态，初始状态为白天模式（isDarkMode 为 false）；

handleModeChange 函数会在按钮点击时触发，它会根据当前模式状态切换到相应的模式，并更新样式文件的链接。

接下来，你需要在你的项目中的某个布局文件（比如说是 src/theme/Layout.js）中添加以下代码，以引入样式文件：

import React from "react";

const Layout = () => {
  return (
    <div>
      <head>
        <link id="theme-link" rel="stylesheet" href="/path/to/light.css" />
      </head>
      {/* 布局的其他内容 */}
    </div>
  );
};

export default Layout;

在上述代码中，我们在 <head> 元素中添加了一个带有 id 为 "theme-link" 的链接标签，初始时它的 href 属性指向白天模式的样式文件。

现在，当你在浏览器中打开该示例页面时，你会看到一个标题和一个切换模式的按钮。点击按钮时，样式文件的链接将会根据当前模式状态切换。

需要将 /path/to/light.css 和 /path/to/dark.css 替换为实际的样式文件路径。

方案二

使用 html 的属性切换（data-theme）

这是 light 模式下

.hint {
  background-color: #f5f7f9;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  border-left: 4px solid #346ddb;
  padding: 20px;
  margin: 10px 0;
}

这是 dark 模式

html[data-theme='dark'] .hint {
  background-color: #a1bba8;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  border-left: 4px solid #346ddb;
  padding: 20px;
  margin: 10px 0;
}

修改滚动条背景

::-webkit-scrollbar-track: transparent;

样式文件

• 如果在元素里找不到应该出现的类，那很有可能没有导入样式文件；

背景图

1. JPEG（.jpg）:
   • 适用于照片和图像，特别是具有丰富颜色和渐变的图像。
   • 支持压缩，可以减小文件大小，但可能会降低图像质量。
   • 不支持透明度。适用于不需要透明背景的情况。
2. PNG（.png）:
   • 适用于具有透明度（透明背景）需求的图像，如图标和图形。
   • 支持无损压缩，图像质量不会受损。
   • 文件大小通常较大，对于复杂的图像可能不是最佳选择。
3. GIF（.gif）:
   • 适用于简单的动画和图像，如小图标和动画徽标。
   • 支持透明度和动画。
   • 文件大小相对较小，但色彩深度有限。
4. WebP（.webp）:
   • 一种现代的图像格式，支持无损和有损压缩。
   • 通常提供较小的文件大小和较好的图像质量。
   • 适用于网页性能优化。
5. SVG（.svg）:
   • 适用于矢量图形，如图标和简单的图形，而不是照片。
   • 可无限缩放而不失真，因为它们是基于矢量的。
   • 通常是文本文件，因此文件大小较小。

当选择背景图像格式时，考虑图像的内容、质量需求和性能要求。对于照片背景，JPEG 通常是一个不错的选择。对于需要透明度的图像，PNG 可能更合适。对于图标和图形，SVG 或 WebP 可能是更好的选择，以提供较小的文件大小和高质量。根据您的具体需求，您还可以选择其他格式。

超出内容省略号

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word; /* 兼容性设置，用于处理长单词或URL的换行 */

文本竖着排列

• 旋转+位移（translate+rotate）
• 单属性（writing-mode，苹果机上会可能有兼容问题）

动画

使用 json 渲染动画（react 项目）

1.安装 lottie 库

npm install lottie-react

2.使用

import React from "react";
import Lottie from "lottie-react";

function MyLottieAnimation() {
  return (
    <div>
      <Lottie
        options={{
          animationData: yourAnimationData, // JSON动画数据
          loop: true, // 是否循环播放
          autoplay: true, // 是否自动播放
        }}
      />
    </div>
  );
}

export default MyLottieAnimation;

疑难杂症

背景图片展示部分区域

修改某个库的动画效果

比如修改 antd 消息弹出框的动画细节（入场时间、退场时间等等）

固定宽度文本换行

max-width 属性

如何覆盖掉第三方模块中样式里的变量值？

在 index.css 中使用:root 伪类选择器（匹配 html 元素），重新设置该变量的值。

img 不受盒子高度拉伸？

 {
  object-fit: contain;
}

保持图像的纵横比，确保整个图像都可见，图像将被缩放以适应容器。

而 cover，保持图像的纵横比，尽量填充整个容器，图像将在垂直或水平方向上被裁剪。

如何覆盖掉用户代理样式表中输入框自动填充后的样式

@rjsf 中的 form 组件

有个注意点

https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/form-props#children

当有这样的样式：

position: relative;
&:after {
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

触发 form 提交事件时，校验不会触发(去掉这段样式则可以)。 这是为何？

原图片很小，盒子宽高很大导致图片很模糊