从零开始的web前端学习-CSS

CSS 称为层叠样式表，是一种样式表语言，用来描述 HTML 文档的呈现，是对 HTML 的美化

选择器 {
  属性: 属性值;
}

目录

1CSS引入方式

  1. 内部样式表：CSS 代码写在 style 标签中（学习使用）
<html>
  <head>
    <title>网页标题</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>体验CSS</p>
  </body>
</html>
  1. 外部样式表：CSS 代码写在单独的 CSS 文件中，在 HTML 中使用 link 标签引入（开发使用）
<html>
  <head>
    <title>网页标题</title>
    <link rel="stylesheet" href="css文件URL">
  </head>
  <body>
    <p>体验CSS</p>
  </body>
</html>

rel 指关系，取值 stylesheet 指样式表，href 取样式表链接为值

  1. 行内样式：配合 JavaScript 使用
<div style="属性: 属性值;">行内样式展示</div>

2选择器

作用：查找标签，设置样式

  • 标签选择器：使用标签名作为选择器，会选中所有同名标签设置相同的样式
<style>
  p {
    color: red;
  }
</style>
  • 类选择器：查找标签，差异化设置标签的显示效果
<!-- 定义类选择器（.类名）-->
<style>
  .red {
    color: red;
  }
</style>

<!-- 使用类选择器（类名）-->
<div class="red">类选择器使用示例</div>

注意：class 属性不能多次使用，但 class 属性可以取多个值

  • id 选择器：查找标签，差异化设置标签的显示效果，但一般配合 JavaScript 使用而不用作设置 CSS 样式
<!-- 定义 id 选择器（#id 名）-->
<style>
  #red {
    color: red;
  }
</style>

<!-- 使用 id 选择器（id 名）-->
<div id="red">id 选择器使用示例</div>

注意：同一个 id 选择器在一个页面只能使用一次

  • 通配符选择器：查找页面所有标签，设置相同样式，*，不需要调用，浏览器自动查找页面所有标签并设置相同样式，可用以清除标签的默认样式
* {
  color: red;
}

3区域填充

目标：使用合适的选择器进行区域填充

属性名 作用
width 宽度
height 高度
background-color 背景色

4文字控制属性

属性 描述 说明
font-size 字体大小 常用单位px，必须带单位，默认16px
font-weight 字体粗细 属性值可为数字（400正常，700加粗），也可为关键字（normal正常，bold加粗）
font-style 字体倾斜 清除文字默认倾斜效果，normal正常，italic倾斜
line-height 行高 设置多行文本的间距，可为数字+px，也可为数字（当前字体大小的倍数）
font-family 字体族 属性值为字体名
text-indent 文本缩进 属性值可为数字+px，也可为数字+em（1em为当前字体大小）
text-align 文本对齐 控制内容水平对齐方式，left左对齐（默认），center居中对齐，right右对齐
text-decoration 修饰线 none无线，underline下划线，line-through删除线，overline上划线
color 颜色 多种表示方法
font 复合属性 设置网页文字公共样式，字号和字体值必须书写，规定顺序

行高原理：行高 = 上间距 + 文本高度 + 下间距
行高测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）
行高-垂直居中：行高属性值等于填充区域高度属性值（仅适用于单行文字）

font-family 属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序从左至右依次查找，最后设置一个字体族名（以下两种），建议无衬线字体
无衬线字体 sans-serif
衬线字体 serif

text-align 本质是控制内容的对齐方式，属性要设置给内容的父级

<!-- 图片居中对齐 -->
<style>
  div {
    text-align: center;
  }
</style>

<body>
  <div>
    <img src="图片URL" alt="">
  </div>
<body>

color 属性表示方法

颜色表示方式 属性值 说明 使用场景
颜色关键字 颜色英文单词 red、green、blue... 学习测试
rgb表示法 rgb(r,g,b) r,g,b表示红绿蓝三原色，取值为0-255 了解
rgba表示法 rgba(r,g,b,a) a表示透明度，取值0-1 开发使用，实现透明色
十六进制表示法 #PRGGBB #000000，#ffcc00，简写：#000，#fc0 开发使用，复制设计稿

font 属性书写顺序

<style>
  p {
    font: italic 700 30px/2 楷体; /* 倾斜 粗体 字号/行高 字体 */
  }
</style>

5复合选择器

定义：复合选择器由两个或多个基础选择器，通过不同的方式组合而成
作用：更准确、更高效地选择目标元素

  1. 后代选择器：选中某父标签中的所有后代标签
<style>
  父选择器 子选择器 {
    属性: 属性值;
  }
</style>
  1. 子代选择器：选中某父标签中的所有的儿子标签
<style>
  父选择器 > 子选择器 {
    属性: 属性值;
  }
</style>
  1. 并集选择器：选中多组标签设置相同的样式
<style>
  选择器1,
  选择器2,
  选择器3 {
    属性: 属性值;
  }
</style>
  1. 交集选择器：选中同时满足多个条件的元素
<style>
  选择器1选择器2 {
    属性: 属性值;
  }
</style>

注意：选择器可以是标签选择器，也可以是属性选择器等其他选择器，若为属性选择器则格式为选择器1.属性选择器，标签选择器必须书写至最前

6伪类选择器（一般用于超链接）

伪类表示元素状态，选中元素的某个状态设置样式

状态 格式
访问前 选择器:link
访问后 选择器:visited
鼠标悬停 选择器:hover
点击时 选择器:active

注意：如果要给超链接设置以上四种状态，需要按照 lvha 的顺序书写

<style>
  a {
    属性: 属性值;
  }
</style>

直接对 a 标签设置样式，即将 lvha 的状态全部修改为同一样式

7CSS特性

  • 继承性：子级默认继承父级的文字控制属性，子级存在样式会覆盖父级样式

  • 层叠性：相同的属性会覆盖（后面的 CSS 属性覆盖前面的 CSS 属性），不同的属性会叠加（不同的 CSS 属性都生效）

  • 优先级：选择器优先级高的样式生效（通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important），即选择器范围越大，优先级越低

选择器 {
  属性:属性值 !important;
}

!import 使用方法如上所示，但不建议使用

优先级叠加计算（复合选择器）
公式：（行内样式，id 选择器个数，类选择器个数，标签选择器个数），不存在进位
规则：从左至右依次比较个数，同一级个数多的优先级高，个数相同则向后比较，!important 权重最高，继承权重最低

8背景属性

属性 描述 说明
background-color 背景色 background-color: 颜色;
background-image 背景图 实现装饰效果，background-image: url(背景图URL);
background-repeat 背景图平铺方式 no-repeat不平铺，repeat平铺（默认），repeat-x水平平铺，repeat-y垂直平铺
background-position 背景图位置 属性值可为关键字，也可为坐标（数字+px，正负皆可），background-position: x y;
background-size 背景图缩放 属性值可为关键字，可为百分比（根据填充区域计算大小，宽度对应，高度等比例缩放），也可为数字+px
background-attachment 背景图固定 背景图不随元素内容滚动，background-attachment: fixed;
background 复合属性 空格隔开各属性值，不区分顺序（背景色 背景图 平铺方式 位置/缩放 固定）

background-position 属性值关键字

关键字 位置
left 左侧
right 右侧
center 居中
high 顶端
low 底端

注意：关键字可以颠倒顺序，可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向居中

background-size 属性值关键字

关键字 说明
cover 等比例缩放背景图覆盖，可能背景图部分消失
contain 等比例缩放背景图装入，可能背景填充部分无法覆盖 
<style>
  body {
    background: pink url(背景图URL) no-repeat center bottom/cover fixed;
  }
</style>

9显示模式

作用：布局网页的时候，根据标签显示模式选择合适的标签摆放内容

  • 块级元素：独占一行，宽度默认是父级的100%，添加宽高属性生效

  • 行内元素：一行可显示多个，设置宽高属性不生效，宽高尺寸由内容撑开

  • 行内块元素：一行可显示多个，设置宽高属性生效，宽高尺寸可由内容撑开

显示模式间转换：display: 属性值;

属性值 效果
block 块级
inline-block 行内块
inline 行内

10结构伪类选择器

作用：根据元素的结构关系查找元素

选择器 说明
E:first-child 查找第一个标签E
E:last-chiild 查找最后一个标签E
E:nth-child(N) 查找第N个标签E

根据元素的结构关系查找多个元素：E:nth-child(公式)

公式 功能
2n 偶数标签
2n+1，2n-1 奇数标签
5n 5的倍数标签
n+5 第5个以后的标签
-n+5 第5个以前的标签（包括5）

11伪元素选择器

作用：创建虚拟元素，用以摆放装饰性的内容

选择器 说明
E::before 在标签E中最前面添加一个伪元素
E::after 在标签E中最后面添加一个伪元素

注意：必须设置 content 属性，用以设置伪元素内容，若无内容则引号留空，伪元素默认行内显示，伪元素选择器权重等同标签选择器

12盒子模型-组成

作用：布局网页，摆放盒子和内容

组成部分：

  • 内容区域：width、height
  • 内边距：padding（出现在内容与盒子边缘之间）
  • 边框线：border
  • 外边距：margin（出现在盒子外面）

13盒子模型-边框线

属性名：border
属性值：边框线粗细 线条样式 颜色（不区分先后顺序）
常用线条样式如下：

属性值 线条样式
solid 实线
dashed 虚线
dotted 点线

设置单方向边框线：border-top / right / bottom / left（属性名），属性值同 border

14盒子模型-内边距

作用：设置内容与盒子边缘间的距离
属性名：padding（全方位）、padding-top / right / bottom / left（单方向）

内边距多值写法：padding 可作为复合属性

取值个数 示例 说明
一个值 padding:10px 四个方向内边距均为10px
四个值 padding:10px 20px 30px 40px 上10px，右20px，下30px，左80px
三个值 padding:2px 4px 8px 上2px，左右4px，下8px
两个值 padding:1px 2px 上下1px，左右2px

15盒子模型-尺寸计算

  • 默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸（border、padding 的引入会撑大盒子，但 maegin 不会）
    盒子撑大问题解决：
  1. 手动做减法：减掉 border、padding 的尺寸
  2. 内减模式：添加 box-sizing: border-box; 属性

16盒子模型-外边距

作用：拉开两个盒子之间的距离
属性名：margin（全方位）、margin-top / right / bottom / left（单方向）

外边距多值写法：margin 可作为复合属性

取值个数 示例 说明
一个值 margin:10px 四个方向内边距均为10px
四个值 margin:10px 20px 30px 40px 上10px，右20px，下30px，左80px
三个值 margin:2px 4px 8px 上2px，左右4px，下8px
两个值 margin:1px 2px 上下1px，左右2px

外边距实现版心居中：margin: 0 auto;（左右为 auto 即可），盒子必须有宽度 width 属性

17清除默认样式

<style>
  <!-- 去除内外边距 -->
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  <!-- 去除列表符号 -->
  li {
    list-style: none;
  }
</style>

18盒子模型-元素溢出

作用：控制溢出元素的内容的显示方式
属性名：overflow

属性值 说明
hidden 溢出隐藏
scroll 溢出滚动（无论是否溢出都显示滚动条）
auto 溢出滚动（溢出时显示滚动条）

19外边距合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并
现象：取两个 margin 中的较大值生效
注意：直接对其一设置合适 margin

20外边距塌陷现象

场景：父子级标签，子级标签添加上外边距会产生塌陷
现象：父级同子级一起向下移动
解决：

  • 取消子级 margin，父级设置 padding（建议）
  • 父级设置 overflow: hidden（隐藏盒子撑大部分）
  • 父级设置 border-top（原理同上，找到父级盒子的正确位置）

21行内元素-内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
解决方法：给行内元素添加 line-height 可改变垂直位置

22盒子模型-圆角

作用：设置元素的外边框为圆角
属性名：border-radius
属性值：数字+px（代表圆角半径）、百分比（最大值为50%，超出按50%效果呈现）

取值个数 示例 说明
一个值 border-radius:10px 四角半径均为10px
四个值 border-radius:10px 20px 30px 40px 左上10px，右上20px，右下30px，左下80px
三个值 border-radius:2px 4px 8px 左上2px，左下右上4px，右下8px
两个值 border-radius:1px 2px 左上右下1px，左下右上2px

正圆：给正方形盒子设置圆角属性值为宽高的一半或50%
胶囊：给长方形盒子设置圆角属性值为盒子高度的一半

23盒子模型-阴影

作用：为元素设置阴影效果
属性名：box-shadow
属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：X 轴偏移量和 Y 轴偏移量必须书写，默认外阴影，内阴影需添加 inset

24标准流

标准流又称文档流，指的是标签在页面中默认的排布规则

25浮动

作用：让块元素水平排列
属性名：float

属性值 说明
left 左对齐
right 右对齐

注意：浮动后的盒子顶对齐，浮动后的盒子具备行内块特点，浮动后的盒子不占用标准流的位置，父级宽度不够浮动子级会换行

26清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度，即可能导致布局错乱
解决方法：清除浮动带来的影响

  1. 额外标签法：在父级元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both;
<style>
  .clearfix {
    clear: both；
  }
</style>
  1. 单伪元素法：利用伪元素选择器设置 CSS 属性
<style>
  .clearfix::after {
    content: "";
    display: block;
    clear: both；
  }
</style>
  1. 双伪元素法：类似单伪元素法，推荐使用
<style>
  .clearfix::befor,
  .clearfix::after {
    content: "";
    display: table;
  }

  .clearfix::after {
    clear: both;
  }
</style>

注意：before 伪元素解决外边距塌陷问题
4. 父级元素添加 CSS 属性 overflow: hidden;（确定父级元素范围）

浮动本质作用：对图片使用浮动，实现图文混排效果

27flex布局-组成

flex 布局又称弹性布局，不会产生浮动布局中脱标现象，布局更简单、更灵活，适用结构化布局
flex 布局设置方式：为父级元素设置 display: flex，子级元素可以自动挤压或拉伸
flex 组成部分：弹性容器（设置布局的元素）、弹性盒子（子级元素）、主轴（默认水平方向）、侧轴（又称交叉轴，默认垂直方向）

28flex布局-主侧轴对齐方式

主轴对齐
属性名：justify-content

属性值 效果
flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子间
space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly 类似space-around，但空白间距都相同

侧轴对齐
属性名：

  • align-items：针对当前弹性容器中所有弹性盒子
  • align-self：针对当前弹性容器中某一弹性盒子
属性值 效果
stretch 弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸，主轴由内容撑开）
center 弹性盒子沿侧轴居中排列
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列

29flex布局-修改主轴方向

属性名：flex-direction

属性值 效果
row 水平方向，从左至右（默认）
column 垂直方向，从上至下
row-reverse 水平方向，从右至左
column-reverse 垂直方向，从下至上

30flex布局-弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸
属性名：flex
属性值：整数数字（表示占用父级剩余尺寸的份数）

31flex布局-弹性换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示
属性名：flex-wrap

属性值 效果
wrap 换行
nowrap 不换行（默认）

32flex布局-行对齐方式

属性名：align-content

属性值 效果
flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子间
space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly 类似space-around，但空白间距都相同

注意：需设置 flex-wrap: wrap; 才允许行对齐效果

33定位

作用：灵活改变盒子在网页中的位置
定位模式：position 属性
边偏移：设置盒子的位置（left、right、top、bottom 属性）

相对定位：position: relative
特点：

  1. 改变位置的参照是标签原位置
  2. 不脱标，会占位
  3. 标签显示模式不变

绝对定位：position: absolute
使用场景：子级元素绝对定位，父级元素相对定位
特点：

  1. 脱标，不占位
  2. 参照物：优先查找已定位的祖先元素，若所有祖先元素皆未定位，则参照浏览器窗口
  3. 标签显示模式改变，宽高属性生效

定位居中

  1. 绝对定位
  2. 水平、垂直边偏移为50%
  3. 子级元素向左、向上移动自身尺寸的一半（平移 transform: translate(-50%,-50%) 或者外边距 margin 属性）

固定定位：position: fixed
场景：元素的位置在网页滚动时不会改变
特点：

  1. 脱标，不占位
  2. 参照物：浏览器窗口
  3. 标签显示模式改变，宽高属性生效

34堆叠层级

默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
属性名：z-index
属性值：整数，默认为0，取值越大显示优先级越大

35CSS精灵（CSS Sprites）

一种网页图片应用处理方式。将网页中一些背景图片整合到一张图片文件中，再利用 background-position 精确定位出背景图片的位置
优点：减少服务器被请求次数，减轻服务器压力，提高页面加载速度
实现步骤：

  1. 创建盒子，盒子尺寸与小图尺寸相同
  2. 设置盒子背景图为精灵图
  3. 添加 background-position 属性，改变背景图位置

36字体图标

字体图标展示的是图标，本质是字体
作用：在网页中添加简单的、颜色单一的小图标
优点：

  • 灵活性：灵活地改变样式
  • 轻量级：体积小、渲染快、降低服务器请求次数
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便：先下载再使用

下载：iconfont 图标库：https://www.iconfont.cn/
使用

  1. 引入字体样式表：
  2. 标签使用字体图标类名：iconfont（字体图标基本样式）、icon-xxx（图标对应类名）

上传矢量图：项目特有的图标上传至 iconfont 图标库，生产字体，然后下载和使用

37垂直对齐方式

属性名：vertical-align

属性值 效果
baseline 基线对齐（默认）
top 顶部对齐
middle 居中对齐
bottom 底部对齐

注意：针对高度最大的元素添加 vertical-align 属性

图片底部空白处理：display: block（浏览器将行内块、行内标签当作文字处理，默认基线对齐），vertical-align 属性也可以处理该问题

38过渡属性

作用：可以为一个元素在不同状态间切换时添加过渡效果
属性名：transition（复合属性）
属性值：过渡属性 花费时间（s）
过渡属性

  • 过渡属性可以是具体的 CSS 属性
  • 过度属性可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）

注意：transition 属性设置给元素本身

39透明度

作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity

属性值 效果
0 完全透明（元素不可见）
1 不透明
0-1间小数 半透明

40光标

作用：鼠标悬停在元素上时指针显示样式
属性名：cursor

属性值 效果
default 默认值，通常为箭头
pointer 小手效果，提示用户可以点击
text 工字型，提示用户可以选择文字
move 十字光标，提示用户可以移动

41SEO搜索引擎优化

常见方法：竞价排名、标签语义化、...
网页头部 SEO 标签

  • title：网页标题标签
  • description：网页描述
  • keywords：网页关键字

42移动web-平面转换

作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面的形态（位移、旋转、缩放、倾斜）

平移：transform: translate(X轴移动距离, Y轴移动距离)，取值可为数字+px，也可为百分比（参照盒子自身尺寸），正右下，负左上
注意：translate 只写一个值代表沿 X 轴移动，单独设置用 translateX() 或者 translateY()

旋转：transform: rotate(旋转角度)，角度单位为 deg（度数），正顺，负逆
特点：旋转会改变坐标轴向，但不同元素用独立的坐标轴

  • 改变转换原点：默认情况下，转换原点为盒子中心点
    属性：transform-origin: 水平原点位置 垂直原点位置;
    属性值：方位名词（left、top、right、bottom、center），数字+px，百分比

  • 多重转换：先平移后旋转，transform: translate() rotate();
    特点：以第一种转换形态的坐标轴为准，因为相同属性会层叠所以利用 transform 复合属性实现多重转换

缩放：transform: scale(缩放倍数); / transform: scale(X轴缩放倍数, Y轴缩放倍数);
注意：宽高属性实现缩放从左上角开始，平面转换则是从中心开始
技巧：取值大于1表示放大，小于1表示缩小

倾斜：transform: skew(倾斜角度)，角度单位为 deg，正左，负右

渐变

  • 线性渐变：背景
    属性：background-image: linear-gradient(渐变方向, 颜色1 位置, 颜色2 位置, ...);
    属性值：渐变方向可选，默认由上至下（to 方位名称或者角度度数），位置可选（百分比，代表开始渐变位置）

  • 径向渐变：高光效果
    属性：background-image: radial-gradient(半径1 半径2 at X Y, 颜色1 位置, 颜色2 位置, ...);
    属性值：半径为2条则时椭圆，圆心位置 X Y 取值可为数字+px 或者百分比或者方位名词

43移动web-空间转换

Z 轴位置与视线方向相同，正出，负入

平移：transform: translate3d(x, y, z) 或者单独设置三个方向
属性值：可以为数字+px，也可为百分比（参照盒子自身尺寸）
注意：默认情况下 Z 轴平移效果无法呈现，必须设置三个方向

  • 视距：指定观察者与 Z 轴平面的距离，为元素添加透视效果（近大远小，近实远虚）
    属性：perspective: 视距;
    注意：属性必须添加给父级元素，取值范围建议为800-1200

旋转

  • transform: rotateZ(旋转角度)，效果与平面中心旋转相同
  • transform: rotateX(旋转角度)，正顺，负逆，建议配合 perspective 属性使用
  • transform: rotateY(旋转角度)，正逆，负顺，建议配合 perspective 属性使用
  • transform: rotate3d(X, Y, Z, 旋转角度)，自定义旋转轴即旋转角度，取值为0-1间的小数（不建议）

左手法则：左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向

立体呈现：设置元素的子级元素是位于 3D 空间中还是平面中
属性名：transform-style

属性值 效果
flat 子级元素位于平面
preserve-3d 子级元素位于3d平面

步骤：

  1. 父级元素添加 transform-style 属性
  2. 子级元素定位
  3. 调整子级元素的位置（平移或者旋转）

缩放

  • transform: scale3d(X, Y, Z)，三个方向同时
  • transform: scaleZ()，沿 Z 轴
  • transform: scaleX()，沿 X 轴
  • transform: scaleY()，沿 Y 轴

44动画

过渡：实现两个状态间的变化过程
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
实现步骤：

  1. 定义动画：@keyframes 动画名称 {from{} to{}}（两个状态），@keyframes 动画名称 {百分比，指代下一状态开始时间}（多个状态）
  2. 使用动画：animation: 动画名称 动画时长;
属性 效果
animation-name 动画名称
animation-duration 动画时长
animation-timing-function 速度曲线，线性匀速-linear，逐帧动画-steps(帧数)
animation-delay 延迟时间
animation-iteration-couunt 重复次数，infinite无限循环
animation-direction 动画方向，alternate反向复原
animation-fill-mode 完成状态，forwards最后帧，backwards第一帧
animation-play-state 暂停动画，paused为暂停，通常配合:hover使用

复合属性：animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 完成状态;
注意：动画名称和动画时长必须赋值，属性值不区分先后，两个时间值则前代表动画时长，后代表延迟时间

无缝动画：复制开头图片到结尾位置（图片复制增加宽度与区域宽度相等）

逐帧动画（精灵动画）：CSS 精灵图 配合属性 animation-timing-function: steps(帧数);
精灵动画制作步骤：

  1. 准备显示区域，盒子尺寸与一张精灵小图尺寸相同
  2. 定义动画，移动背景图，移动距离与精灵图宽度相当
  3. 使用动画，steps(帧数)，帧数即精灵小图数量

多组动画：animation: 动画1, 动画2, 动画N;

45移动端

屏幕分辨率：纵横向上的像素点数，单位 px（物理分辨率/硬件分辨率-出厂设置，逻辑分辨率-软件或驱动设置）
注意：开发参照逻辑分辨率，移动端默认情况下网页宽度并不与逻辑分辨率相同，PC 端两者相同

视口：显示 HTML 网页的区域，用来约束 HTML 尺寸

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

width=device-width 指视口宽度与设备宽度（逻辑分辨率）相等，initial-scale=1.0 指缩放1倍，即不缩放

二倍图：防止图片在高分辨屏幕下模糊失真

适配方案

  • 宽度适配：宽度自适应（百分比布局、flex 布局）
  • 等比适配：宽高等比缩放（rem、vw）

46适配方案-rem

rem 单位是相对单位，是相对于 HTML 标签字号的计算结果，1rem = 1HTML 字号大小

媒体查询：可用以检测视口宽度，可实现差异化 CSS 样式（某个条件成立，执行对应 CSS 样式）

@media (媒体特性) {
  选择器 {
    美化内容;
  }
}

检测视口宽度：@media (width:375px) {...}
经验：当前 rem 布局方案中，习惯将网页等分成10份，HTML 标签的字号为视口宽度的1/10

flexible.js：根据不同的视口宽度为网页中 HTML 根节点设置不同的字号大小 font-size

<body>
  ...
  <script scr=".../flexible.js"></script>
</body>

rem 移动适配公式：初始像素大小 / 基准根字号大小，即视口宽度的1/10

47CSS预处理器-less

less 令 CSS 具有逻辑运算能力，是对 CSS 的优化、扩展

注释

// 单行注释

/*
多行
注释
*/

注意：html 注释 <!- ->、css 注释 /* */（html 注释亦适用），但是 less 中的单行注释不会在生成的 css 文件中出现

运算：加减乘除

.box {
  // 加、减、乘法直接运算
  width: 100 + 50 - 25px;
  height: 5 * 32px;

  // 除法需要添加 () 或 .
  width: (100 / 4px);
  height: 100./ 4px;
}

注意：每个数字都可带单位，但存在多个单位时，以第一个单位为准

嵌套：快速生成后代选择器

.父级选择器 {
  父级样式;

  .子级选择器 {
    子级样式;

    &:hover {
      状态;
    }

    .孙级选择器 {
      孙级样式;
    }
  }
}

注意：& 符号打破后代关系，如上例就是指代 .父级选择器 .子级选择器:hover {}，而不会生成后代选择器，一般配合 hover 伪类或者 nth-child() 结构伪类使用

变量：存储数据，方便使用或修改

@myColor: pink; // 定义变量，@变量名: 数据;

// 使用变量，属性: @变量名;
.box {
  color: @myColor;
}

导入：导入 less 公共样式文件

@import '.../base.less'
@import '.../common' // less文件可以省略后缀

导出

/* 需在第一行添加导出语句，第一示例是改名导出，第二示例是直接导出至文件夹，第三示例是禁止导出 */
// out: .../index.css 
// out: .../css/
// out: false

48适配方案-vw

vw（viewport width）是一个相对单位，是相对视口宽度尺寸的计算结果，1vw = 1/100视口宽度，同理有 vh（viewport height），1vh = 1/100视口高度

vw 移动适配公式：初始像素大小 / 视口宽度的1/100，同理可知 vh 移动适配公式

问题：vw 和 vh 是否可以混用？
答案：不能，vh 是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形，所以应该单一使用

49响应式网页-媒体查询

媒体查询完整写法

@media 媒体类型 关键词 (媒体特性) {
  选择器 {
    美化内容;
  }
}

注意：

  • 关键词即逻辑操作符：and、only、not
  • 媒体类型：区分设备类型
类型名称 值 描述
屏幕 screen 带屏幕的设备
打印预览 print 打印预览模式
阅读器 speech 屏幕阅读模式
不区分类型 all 默认值，包括上述情况
  • 媒体特性：描述媒体类型的具体特征，必须带 ()
特性名称 属性 值
视口的宽和高 width、height 数值
视口最大宽或高（小于等于生效） max-width、max-height 数值
视口最小宽或高（大于等于生效） min-width、min-height 数值
屏幕方向 orientation portrait（竖屏）、landscape（横屏）

书写顺序：min-width（从小到大），max-width（从大到小）

配合外部 CSS：导入 CSS 样式的同时进行媒体查询，满足条件则导入

<link rel="stylesheet" media="媒体类型 关键词 (媒体特性)" href="CSS文件URL">

50响应式网页-Bootstrap框架

Twitter 公司开发维护的前端 UI 框架，提供大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构以及 JavaScript，快速编写功能完善的网页以及常见交互效果

使用步骤：

  1. 下载 bootstrap 框架
  2. 引入 bootstrap-icons.css 或者 bootstrap.min.css 文件使用样式

栅格系统
栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数
常用布局类：col--（列），row（行），详细信息可查看 api

<!- 视口宽度不同，显示盒子数量不同 ->
<div class="container">
  <div class="row">
    <div calss="col-xl-3 col-md-6 col-sm-12">1</div>
    <div calss="col-xl-3 col-md-6 col-sm-12">2</div>
    <div calss="col-xl-3 col-md-6 col-sm-12">3</div>
    <div calss="col-xl-3 col-md-6 col-sm-12">4</div>
  </div>
</div>

全局样式

  • Button 类
类名 说明
btn 默认样式
btn-success 成功样式
btn-warning 警告样式
btn-lg、btn-sm 按钮尺寸 
<button class="btn btn-success btn-lg">成功</button>
  • Table 类
    |类名|说明|
    |-|-|
    |table|默认样式|
    |table-striped|隔行变色|
    |table-success|表格颜色|
<table class="table table-striped table-hover">
  <tr class="table-success">
    <th>1</th>
    <th>2</th>
  </tr>
</table>

组件：对样式或功能的封装
步骤：引入 bootstrap 框架样式表、引入 bootstrap 框架 JavaScript 文件、复制结构，修改内容

字体图标：同前文 icon-font 字体图标类似
下载 -> 使用

  1. 复制 fonts 文件夹至项目目录
  2. 网页引入 bootstrap-icons.css 文件
  3. 类名调用（bi-xxx）
<i class="bi-android2"></i>
posted @   /O_o\  阅读(1)  评论(0)  编辑  收藏  举报
相关博文：
·  从零开始的web前端学习-HTML
·  从零开始的web前端学习-JavaScript
·  系统化学习前端之CSS
·  CSS （层叠样式表）选择器　字体　文本　块元素　行内元素　元素显示转换　背景
·  CSS学习笔记
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示