HTML+CSS

本地跑没问题

已于 2024-01-24 10:16:51 修改

阅读量507

点赞数 9

文章标签： html css 前端

于 2023-12-23 14:30:55 首次发布

本文链接：https://blog.csdn.net/weixin_59742742/article/details/135168368

版权

浏览器内核

浏览器最核心的部分就是渲染引擎，一般也称为“浏览器”
- 负责解析网页语法，并渲染页面

一、不同浏览器的内核

Trident（三叉戟）：IE、360安全浏览器、搜狗浏览器、百度浏览器、UC浏览器
Gecko（壁虎）：火狐浏览器
Presto（急板乐曲）->Blink（眨眼）：Opera
Webkit：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器
Webkit -> Blink：谷歌浏览器、Edge

HTML语言

超文本标记语言（HTML）是一种用于创建网页的标记语言
- 是构建网站的基石
什么是超文本？
- 不仅仅可以插入文本，还可以插入图片、音频、视频等
- 还可以表示超链接

一、html基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

二、VSCode插件与配置

中文插件：Chinese
颜色主题：atom one dark
文件夹图标：VSCode Great Icons
在浏览器中打开网页：open in browser、Live Sever
自动重命名标签（改了开始标签，结束标签自动修改）：auto rename tag
Auto Save 自动保存
Font Size 修改代码字体大小
Word Wrap 代码自动换行
Render Whitespace 空格的渲染方式（个人推介）
Tab Size 代码缩进

三、HTML结构+常见元素

3.1 文档声明

- HTML文档声明,告诉浏览器当前页面是HTML5页面
- 让浏览器用HTML5的标准去解析识别内容
- 省略了会出现兼容性问题

3.2 html元素

元素是HTML文档的根元素
lang属性,作用是
- 帮助语音合成工具确定要使用的发音
- 帮助翻译工具确定要使用的翻译规则
常用的规则
- lang=“en” 文档的语言是英文
- lang=“zh-CN” 文档的语言是中文

3.3 head元素

head元素规定了文档相关的配置信息(也称为元数据),包括文档的标题,引用的文档样式和脚本等
- 什么是元数据,是描述数据的数据
- 可以理解为对整个页面的配置
常见的设置
- title:网页的标题
- meta:网页的编码
  - 可以设置网页的字符编码
  - 一般使用utf-8编码,涵盖了世界上几乎所有的文字

3.4 body元素

body元素中是网页的具体内容和结构

3.5 常用的元素

p元素 h元素
img元素 a元素 iframe元素
div元素 span元素

3.5.1 img元素

src属性：图片的来源
- URL
- 绝对路径：从电脑根目录开始一直找到资源的路径
- 相对路径：
  - 相当于当前文件的一个路径
  - .代表当前文件夹（一个），可以省略
  - …代表上级文件夹（2个…）
alt属性：
- 图片加载不成功时，显示这段文本
- 给屏幕阅读器使用

3.5.2 a元素

href：指定要打开的URL地址（可以是本地html资源）
target：指定在何处显示链接的资源
- _self:默认值，当前窗口打开URL
- _blank:在新窗口打开URL
描点链接：可以实现跳转到网页中的具体位置
- 在要跳转的元素上定义一个id属性
- 定义a元素，href指向对应的id
其他URL地址
- URL是压缩包：可以下载压缩包
- 指向其他协议地址：mailto
```
<a href="mailto：123@QQ.com">发邮件给123@qq.com</a>
```

3.5.3 iframe元素

可以在一个HTML文档中嵌入其他HTML文档

<iframe src="https://www.taobao.com/" frameborder="0"></iframe>

frameborder属性
- 是否显示边框
  - 1：显示
  - 0：不显示

3.5.4 div元素和span元素

div和span是在css刚出现时，希望结构与样式分离，html只需要负责结构即可的背景下产生的。

div在不同行显示，作为其他元素的父容器
span在同一行显示

四、额外补充

4.1 字符实体

如果你是用小于号（<），浏览器会将其后的文本解析为一个tag
但是我们确实需要编写一个小于号
这个时候我们就可以使用字符实体
HTML实体是一段以连字号（&）开头，以分号（；）结尾的文本
- 用于显示保留字符（会被解析成html代码的字符）和不可见字符（不换行空格）

<	&lt ;
空格	&bnsp ;
>	&gt ;
&	&amp ;
“”	&quot ;
‘	&apos ;

4.2 认识URL

URL：统一资源定位符
URL的标准格式：
- 协议类型：//服务器地址：端口号/文件路径/文件名? 查询字符串#片段ID
- 默认端口：80
和URI的区别：
- URI：统一资源标志符，标识Web技术使用的逻辑或物理资源

五、元素语义化和作用

元素语义化：用正确的元素做正确的事情
标签语义化的好处：
- 方便代码维护
- 减少让开发者之间的沟通成本
- 能让语音合成工具正确识别网页元素的用途，以便做出正确的反应
- 有利于SEO（h1标签的内容可以增加权重）

六、SEO优化

搜索引擎优化：通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式

CSS样式

CSS表示层叠样式表，是为网页添加样式的代码
是一门样式表语言

一、三种CSS的编写方式

内联样式：存在于HTML元素的style属性中,多个样式之间用分号分割

<div style="color:red; font-size:30px;">
    content
</div>

内部样式表：使用style元素
外部样式表

二、CSS属性的官方文档

w3c官方文档：https://www.w3.org/TR/?tag=css

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

三、额外补充

3.1 link元素

link元素是外部资源链接元素，规范了文档与外部资源的关系
属性：
- dns-prefetch:提前对某一资源进行dns解析（性能优化）
- href：指定被链接资源的URL
- rel：指定链接类型
  - icon：站点图标
  - stylesheet：CSS样式

<link ref="stylesheet" href="./style.css">
<link ref="icon" href="../favicon.ico">

3.2 进制

进制：当数字达到某一个值时，进一位（比如一位变两位）

二进制（0b开头）:其中数字由0、1组成
八进制（0o开头）: 由0~7组成
十六进制（0X开头）：由0_9和字母af组成
十进制转其他制：整除，取余数
其他进制转十进制：阶乘
二进制转八进制：三位转成一位八进制
四位转成十六进制：四位转为一位十六进制

3.3 CSS颜色的表示方法

颜色关键字（单词）：不足够表示所有颜色
RGB颜色：
1. 通过red、green、blue组成不同颜色
2. 各个原色的取值范围是0~255
3. 都为0时，是黑色
4. 都为255时，是白色

 <style>
        h1{
            color:rgb(100, 100, 100)
            color:#646464
        }
    </style>

RGB的其他表示方式
1. 可以用#加每个数字的十六进制表示：#646464
2. 缩写：#000000 = #000 #0f3 = #00ff33

3.4 浏览器渲染过程（html+css）

在这里插入图片描述

四、文本属性

4.1 text-decoration

用于设置文字的装饰线
常见取值：
- none
- underline:下划线
- overline:上划线
- line-through:中划线（删除线）

4.2 text-transform

用于设置文字的大小写切换
常见取值：
- capitalize:将每个单词的首字母大写
- uppercase:将每个单词的所有字符大写
- lowercase:将每个单词的所有字符小写
- none:没有影响

4.3 text-indent

用于设置第一行内容的缩进

//空两个字的大小，em：相对于字体的大小
text-indent:2em

4.4 text-align

设置文本的对齐方式
MDN:定义行内内容（例如文字）如何相对它的块父元素对齐
子元素是div无效，因为div是块级元素
常用的值
- left
- right
- center
- justify：两端对齐
  - 剩余空间平均分配到单词间隙中，头尾单词挨边
  - 对最后一行无效
本质研究：对于行内元素都能产生作用效果

4.5 word-spacing letter-spacing

letter-spacing:字母间距
word-spacing:单词间距

五、字体属性

5.1 font-size

font-size决定文字的大小
常用的设置：
- 数值加单位px
- 百分比
- em值：相对于父元素的值，font-size值可以继承

5.2 font-family

用于设置文字的字体名称
- 可设置一个或者多个字体
- 设置多个字体时，浏览器会选择第一个该计算机上有安装的字体
- 或者通过**@font-size指定的可以直接下载的字体**

5.3 font-weight

用于设置文字的粗细
常见的取值
- 100/200~/900
- normal:400
- bold:700

5.4 font-style

设置文本的常规、斜体显示
- normal:常规显示
- italic：字体的斜体（字体本身支持斜体时，显示的斜体）
- oblique：文本倾斜

5.5 line-height

用于设置文本的行高
- 行高可以简单理解为一行文字所占据的高度
为什么文本需要行高？
- 便于阅读
行高的严格定义：两行文字基线的距离
基线：与小写字母x最底部对齐的线
一行文本分为顶线、中线、基线、底线
上一行文本的底线到这行文本的顶线距离称为行距
设置两基线距离之后，**一行文本的高度（行高）**也会等于这个高度

height和line-height的区别：

height:元素的整体高度
line-height:元素中一行文字所占据的高度

line-height应用场景，让文本上下居中：

//让height等于line-height
.box{
            height:100px;
            background-color: #f00;
            color:#fff;
            line-height: 100px;
        }

5.6 font-variant

可以影响小写字母的显示形式
常用的值：
- normal：常规显示
- small-caps:将小写字母替换成缩小过的大写字母

5.7 font缩写属性的语法规则

font是一个缩写属性
顺序：font-style font-variant font-wight font-size/line-height font-family
前三个可省略，可随意掉换顺序
/line-height可以省略
font-size font-family不可以调换顺序，不可以省略

六、CSS选择器

按照一定的规则选出符合条件的元素

6.1 通用选择器

使用* ，浏览器遍历所有元素，性能不好

*{
    font-size:30px;
}
/*更推介的做法*/
body,p,div,h2{
    font-size:30px;
}

6.2 简单选择器

元素选择器
类选择器
id选择器

6.3 属性选择器

拥有某一个属性[att]

属性等于某一个值[att=val]

<style>
  [title=div]{
      color:red
  }
</style>
<body>
  <div title="div">
      div
  </div>
  <h2 title="h2">
      h2
  </h2>
</body>

6.4 后代选择器

所有后代：空格分割
直接子代：>分割

6.5 兄弟选择器

相邻兄弟选择器：使用+连接
普遍兄弟选择器：使用~连接

6.6 选择器组-交集选择器

需要同时符合两个选择器条件

//选中类名为box的div元素
div.box{
    color:red;
}

6.7 选择器组-并集选择器

符合其中一个选择器条件即可，使用,分割
- 给多个元素设置相同的样式

6.8 伪类

用于选择处于特定状态的元素
动态伪类：
- :link、:visited、:hover、:active、:focus
目标伪类
- :target
- 锚点链接跳转时设置样式
语言伪类
- :lang()

//所有设置英文的div
div:lang(en){
    
}

元素状态伪类
- :enabled :disabled :checked
结构伪类
- :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type()
- :first-child :last-child :first-of-type :last-of-type
- :root :only-child :only-of-type :empty
否定伪类
- :not()

6.8.1 动态伪类详解

a:link 未访问的链接
a:visited 已访问的链接
a:focus 元素聚焦时
a:hover 鼠标移动到链接上
a:active 激活的链接（鼠标在链接上长按未松开）
编写顺序不对会失效
直接给a元素设置了样式，相当于给a元素所有动态伪类都设置了

6.9 伪元素

伪元素：选择特殊的元素
常见的伪元素：
- ::first-line
- ::first-letter
- ::before
- ::after
一个冒号和二个冒号都可以
为了区别伪类和伪元素，伪元素推荐写两个冒号
::first-line 为首行文字设置样式
::first-letter 为首字母(文字)设置样式

6.9.1 ::before和::after详解

用来在一个元素的内容之前或者之后插入其他内容
- 通过content属性来为一个元素添加修饰性的内容
如果需要在多个元素的前后插入相同的内容，使用此方法更方便
不能省略content属性
默认是行内非替换元素，不能设置宽和高

/*元素后面显示一个正方形*/
.box::after{
    /*content不能省略，即使没有内容*/
    content：""；
    display:inline-bock;
    width:8px;
    height:8px;
    background-color:#f00;
}

七、CSS属性的特性

7.1 继承性

CSS某些属性具有继承性：
- 拥有继承性的属性设置之后，后代元素都可以继承这个属性
- 如果后代元素自己设置了该属性，那么优先使用自己设置的值
哪些属性具有继承性？
- font-size/font-family/font-weight/line-height/color/text-align都具有继承性
- cursor
- 一般和字体相关的都可以继承
继承过来的属性是计算值，不是设置值

//父元素
.box{
    /*浏览器16px,这里2em等于32px*/
    font-size:2em;
}
//子元素
p{
    /*font-size继承过来就是32px,是计算结果值，不是继承2em的设置值*/
    /*如果继承的是2em设置值，那么结果是64px*/
}

强制继承
- 使用属性名: inherit 实现强制继承，优化代码

7.2 层叠性

CSS是层叠样式表
- 相同一个属性我们通过不同选择器给它进行多次设置
- 那么属性会一层层覆盖上去
- 但是最终只有一个会生效
哪一个会生效？
- 选择器的权重，为了方便比较CSS属性的优先级，我们可以设置一个权值(权值可以进行累加)
  - !important:10000
  - 内联样式：1000
  - id选择器：100
  - 类选择器、属性选择器、伪类：10
  - 元素选择器、伪元素：1
  - 通配符：0
- 先后顺序

八、HTML元素的特性

8.1 元素的类型

块级元素：独占父元素的一行
行内级元素：多个行内级元素可以在父元素的同一行显示
元素类型的修改 ```display:inline/block ``
div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已

8.2 CSS属性 - display

修改元素的显示类型
- block:块级元素
  - 独占一行
  - 可以设置宽高
- inline:行内级元素
  - 和其他行内元素在一行显示
  - 不能设置宽高，宽高由内容决定
  - img、video、input比较特殊，是行内替换元素，可以设置宽高
- inline-block: 同时具备行内级、块级元素的特征
  - 在同一行显示
  - 可以设置宽高
- none: 隐藏元素

8.3 编写HTML元素的注意事项

块级元素、inline-block元素
- 一般情况下，可以包含其他任何元素
- 特殊情况，p元素不能包含其他块级元素
行内级元素（比如a、span、strong等）
- 一般情况下，只能包含行内级元素

8.4 HTML元素隐藏的四种方法

方法一：display:none
- 元素不显示，并且不占据任何空间
方法二：visibility: hidden
- 元素不可见，但是会占据空间
- 默认为visible，即可见
方法三：rgba设置颜色，将a的值设置为0
- 透明度为0，完全透明
- 只是设置当前的color/bgc其中的颜色透明度为某一个值，不会影响子元素
- 不影响子元素，即要么color ->文本透明，要么background-color->背景色透明
方法四：opacity：0
- 设置整个元素的透明度，会携带所有的子元素都有一定的透明度

8.5 元素的溢出-overflow

用于控制内容溢出时的行为
常用值
- 默认值：visible
- hidden:隐藏
- scroll：多一个滚动条
- auto:内容超出才显示滚动条

8.6 CSS不生效的原因

选择器的优先级太低
选择器没选中对应的元素
CSS属性使用形式不对
- 元素不支持此属性，比如span不支持width和height
- 浏览器不支持此属性
- 被同类的CSS属性覆盖，比如font覆盖font-size

九、盒子模型

HTML中的每一个元素都可以看做是一个盒子，具备四个属性
- 内容：content
  - 元素的内容（width/height）
- 内边距：padding
  - 元素与内容之间的距离
- 边框（border）
  - 元素的边框
- 外边距（margin）
  - 元素和其他元素之间的间距

9.1 内容-width-height

内容是通过width和height设置
对于行内非替换元素，设置宽高无效
width默认值为auto
另外我们还可以设置：
- min-width:最小宽度
- max-width：最大宽度
- 移动端适配时，可以设置
不常用属性
- min-height
- max-height

9.2 内边距-padding

padding用于设置盒子的内边距，即边框和内容之间的距离
缩写属性顺序是：上右下左
padding的其他值

在这里插入图片描述

9.3 边框-border

属性：width color style

常见边框样式：
- solid：实线
- dashed：虚线
- dotted
- double

9.4 圆角-border-radius

用于设置盒子的圆角
常见的值
- 数值：设置小的圆角
- 百分比：设置一定的弧度或者圆形
  - 百分比相对的是border-box（内容加padding加边框）的宽度
  - 一般用于设置圆形：设置为50%或者50%以上

9.5 外边距-margin

用于设置盒子的外边距，即元素和元素之间的间距
缩写属性：
- 上右下左
- 其他与padding一样

9.6 margin和padding的对比

//需求：子元素向右移动30px
<style>
    .box{
        width:300px;
        height:300px;
        background-color:#f00;
        
        /*方法一：父元素设置padding*/
        padding-left:30px;
        /*但是这种方法会增加box的总体宽度，需要设置border-box*/
        box-sizing:border-box;
    }
    .container{
        width:100px;
        height:100px;
        background-color:#0f0;
         /*方法二：使用margin,但是设置上下margin时会出现问题*/
         /*需要在父元素中设置overflow,触发bfc*/
        margin-left:100px;
    }
</style>

推荐用法：
- 父子元素中间使用padding
- 相同兄弟元素之间使用margin

9.7 margin上下传递的问题

左右不会传递
margin-top传递
- 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top会传递给父元素
margin-bottom传递
- 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，才会传递给父元素
如何防止出现传递问题？
- 给父元素设置上下padding
- 给父元素设置border（border-width不为0）
- 触发BFC：设置overflow：auto

9.8 margin上下折叠

垂直方向上相邻的2个margin有可能会合并成一个margin，这种现象叫做折叠
水平方向上的margin-left、margin-right永远不会collapse（折叠）
折叠后最终值的计算规则
- 两个值进行比较，取较大的值
如何防止折叠
- 设置其中一个margin
上下margin折叠的情况
- 两个兄弟块级元素之间上下margin的折叠
- 父子块级元素之间

9.9 块级元素的水平居中

在浏览器中，块级元素独占一行的实现方式：将剩余长度分配给margin
如果我们想要块级元素居中，可以将左右margin设置为auto，margin：0 auto；
推荐使用flex布局

9.10 外轮廓-outline

outline表示元素的外轮廓
- 不占据空间
- 默认显示在border的外面
相关属性：
- outline-width
- outline-style
- outline-color
- 用法跟border类似
常用来去除a元素、input元素的focus轮廓效果

9.11 盒子阴影-box-shadow

box-shadow属性可以设置一个或者多个阴影
- 每个阴影用shadow表示
- 多个阴影之间用逗号隔开，从前到后叠加
属性
- offset-x(x偏移量)
- offset-y(y偏移量)
- blur-radius(模糊半径)
- spread-redius(延伸半径)
- color(颜色)
- inset(外框阴影变成内框阴影)
- bos-shadow:offset-x(x偏移量) offset-y(y偏移量) blur(模糊度) color(颜色)
如果希望向四边扩散，在blur后面加一个值
如果希望阴影往里面走，在color后面加inset

9.12 文字阴影text-shadow

类似于box-shadow，给文字添加阴影
没有box-shadow的延伸

9.13 行内非替换元素的特殊性

不能设置宽高，宽高由内容决定
padding：上下会被撑起来，但是不占据空间
border：上下会被撑起来，但是不占据空间
margin：上下不生效

为什么这么设计？
- 一行中有多个行内元素，如果其中一个行内元素上下空间变化，会影响整体

9.14 背景色和前景色

背景色有没有设置到border下面（有设置）
前景色会在border没有设置颜色的情况下，显示color的颜色

9.15 盒子尺寸计算-box-sizing

box-sizing用于设置盒子模型中宽高的行为
content-box
- padding、border都布置在width、height外
border-box
- padding、border被布置在width、height里

十、CSS设置背景

10.1 background-image

用于设置元素的背景图片
- 会盖在background-color的上面
如果设置了多张图片
- 第一张显示在最上面，其他图片按顺序层叠在下面

/*设置背景图片*/
background-image:url(../images/kobe01.jpg)
/*如果图片过小，默认会平铺，所以要设置background-repeat*/
background-repeat:no-repeat

元素没有具体的宽高，背景图片不会显示

10.2 background-repeat

用于设置背景图片是否要平铺
常见的值：
- repeat：平铺
- no-repeat: 不平铺
- repeat-x: 只在水平方向平铺
- repeat-y: 只在垂直方向平铺

10.3 background-size

用于设置背景图片的大小
- auto：默认值，以背景图本身大小显示
- cover：缩放背景图，完全铺满元素
- contain：缩放背景图，保持宽高比，宽度或高度铺满元素
- 百分比：相对于背景区backround-size:100% 100%
- length: 具体的大小，比如100px

10.4 background-position

设置背景图的位置
- 具体的值：20px 30px
- 水平方向还可以设置值：left、center、right
- 垂直方向可以设置值：top、center、bottom
- 如果只设置了一个方向，另一个方向默认为center

10.5 background-attachment

决定背景图的位置是在视口内固定，或者随着包含它的区块滚动
可以设置以下三个值
- scroll（默认值）：背景相对于元素本身固定，而不是随着它的内容滚动
- local：相对于元素内容固定，如果元素拥有滚动机制，背景会随着元素的内容滚动
- fixed：背景相对于视口固定，如果元素拥有滚动机制，背景不会随着元素的内容滚动

10.6 background

是一系列背景相关属性的简写属性
- background:color url position size repeat attachment

10.7 background-image和image的对比

总结
- img：作为网页内容的重要组成部分，比如广告图片等
- background-image：可有可无，起到修饰网页作用

十一、HTML高级元素

在这里插入图片描述

11.1 列表元素

方案一：使用div元素来实现
方案二：使用列表元素，使用元素语义化的方式来实现
很多网站喜欢按照自己的风格来布局：
- 列表元素有默认的CSS样式
- 列表元素有很多限制，ul/ol中只能放li，li再放其他元素
- 虽然可以重置样式，但我们更喜欢自由的div
三种列表元素
- 有序列表：ol、li
- 无序列表：ul、li
- 定义列表：dl、dt、dd

11.1.1有序列表 - ol - li

ol
- 有序列表，直接子元素只能是li
li
- 列表中的每一项

11.1.2无序列表 - ul -li

ul
- 有序列表，直接子元素只能是li
li
- 列表中的每一项

11.1.3 定义列表 -dl -dt -dd

dl
- 定义列表，直接子元素只能是dt、dd
dt
- term是项的意思，列表中每一项的项目名
dd
- 列表中每一项的具体描述，是对dt的描述、解释、补充

    <h1>前端开发</h1>
    <dl>
        <dt>阶段一：打好基础</dt>
        <dd>HTML</dd>
        <dd>CSS</dd>
        <dd>JS</dd>

        <dt>阶段二：框架实战</dt>
        <dd>Node基础</dd>
        <dd>Webpack基础</dd>
    </dl>

11.1.4案例练习思路

先完成结构
重置样式
想整体，后局部
- 从外到里，从上到下
去除重复代码（css）
- 将重复代码放到一个单独的class中

11.2表格元素

table：表格
tr：表格中的行
td：行中的单元格

11.2.1表格元素的使用

<style>
        /* 添加边框 */
        td {
            border: 1px solid #333;
            padding: 8px 16px;
        }

        table {
            text-align: center;
            /* 边框合并 */
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>排名</td>
            <td>股票名称</td>
            <td>股票代码</td>
            <td>股票价格</td>
            <td>股票的涨跌</td>
        </tr>
        <tr>
            <td>1</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
        </tr>
        <tr>
            <td>2</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
        </tr>
        <tr>
            <td>3</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
        </tr>
    </table>
</body>

表格中的其他元素

thead
- 表格的表头
tbody
- 表格的主体
tfoot
- 表格的页脚
caption
- 表格的主题
th
- 表格的表头单元格

更加语义化的代码重构

    <style>
        /* 添加边框 */
        td,
        th {
            border: 1px solid #333;
            padding: 8px 16px;
        }

        table {
            text-align: center;
            /* 边框合并 */
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table>
        <caption>热门股票</caption>
        <thead>
            <tr>
                <th>排名</th>
                <th>股票名称</th>
                <th>股票代码</th>
                <th>股票价格</th>
                <th>股票的涨跌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
            </tr>
            <tr>
                <td>2</td>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
            </tr>
            <tr>
                <td>3</td>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
                <td>xxxx</td>
            </tr>
        </tfoot>
    </table>
</body>

12.2.2单元格合并

一个单元格可能跨多行多列使用
跨列合并：使用colspan
- 在最左边的单元格写上colspan属性，并且省略掉合并的td
跨行合并：使用rowspan
- 在最上面的单元格写上rowspan属性，并且省略掉后面tr中的td

//跨列
<table>
        <tr>
            <th colspan="2">1-1</th>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
        </tr>
    </table>
//跨行
<table>
        <tr>
            <th rowspan="2">1-1</th>
            <th>1-2</th>
        </tr>
        <tr>
            <td>2-1</td>
            <!-- <td>2-2</td> -->
        </tr>
    </table>

11.3 表单元素

form
- 表单，一般情况下，其他表单元素都是它的后代元素
input
- 单行文本输入框、单选框、复选框、按钮等元素
textarea
- 多行文本框
select、option
- 下拉选择框
button
- 按钮
label
- 表单元素的标题

11.3.1 input元素的使用

常见属性：
- type：text/password/time/date/checkbox/button/submit/file
- readonly:只读
- disabled:禁用
- name:名字
- value:取值

11.3.2 布尔属性

常见的布尔属性：disablied、checked、readonly、multiple、autofocus、selected

布尔值可以没有属性值，写上属性名就代表使用这个属性
- 如果要设置值，值就是属性本身

11.3.3 input模拟button

<body>
    <!-- 三个按钮点击的默认行为不一样 -->
    <form action="">
        <input type="text">
        <input type="date">
        <input type="button" value="普通按钮">
        <!-- 自动重置form中其他表单内容 -->
        <input type="reset" value="重置按钮">
        <button type="reset">重置button</button>
        <!-- submit可以对form中的其他表单进行提交（将数据提交给服务器） -->
        <input type="submit" value="提交按钮">
        <button type="submit">提交button</button>
    </form>
</body>

input和label的关系

label元素一般配合input使用，用来表示input的标题
点击label就可以激活对应的input变为选中

<div>
        <!-- 用label的for和input的id绑定在一起 -->
        <label for="username">
            user:<input id="username" type="text">
        </label>
    </div>

radio的使用

将input的type设置radio
- name值相同时才具备单选功能

<body>
    <!-- 设置name实现radio的单选 -->
    <!-- 如果name一样，那么radio会互斥 -->
    <!-- 上传服务器是，name为键，value为具体的值 -->
    <label for="male">
        <input id="male" type="radio" name="sex" value="男">男
    </label>
    <label for="women">
        <input id="women" type="radio" name="sex" value="女">女
    </label>
</body>

checkbox的使用

将type设置为checkbox
- 属于同一类型的checkbox，name值要保持一致

<body>
    hobby:
    <label for="ball">
        <input id="ball" type="checkbox" name="hobby" value="ball">ball
    </label>
    <label for="walk">
        <input id="walk" type="checkbox" name="hobby" value="walk">walk
    </label>
</body>

textarea的使用

常用属性
- cols:列数
- rows：行数
缩放的CSS设置
- 禁止缩放：resize:none;
- 水平缩放：resize：horizontal
- 垂直缩放：resize：vertical
- 水平垂直缩放：resize：both

    <style>
        textarea{
            resize: none;
        }
    </style>
</head>
<body>
    <form action="abc">
       <label for="info">
            info:
            <textarea name="" id="info" cols="10" rows="10"></textarea>
       </label>
    </form>
</body>

select和option的使用

option是select的子元素，一个option代表一个选项
常用属性
- multiple：多选
- size：显示多少项
option常用属性
- selected:默认被选中

<body>
    <form action="abc">
        <!-- 加了multiple，使用ctrl可以实现多选 -->
        <select name="fruits" id="" multiple size="2">
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="orange">橙子</option>
        </select>
    </form>
</body>

form元素的使用

form通常作为表单元素的父元素：
- 将整个表单作为一个整体进行操作
- 比如重置
- 比如提交
action:提交服务器的地址
method:请求方法（get或post），默认是get（数据直接在url中显示）
target
- 类似a元素的target

十二、 Emmet常见的语法

大幅度提高前端开发效率的一个工具
- 在vscode中输入缩写后按住Tab/Enter键会自动生成相应代码
！和html：5
- 快速生成完整结构的html5代码
> (子代)
+(兄弟)
*(多个)

^(上一级)^(上上级)

div>span+p+(h1>span+i)+p
==
div>span+p+h1>span+i^p

()分组

属性和内容

id:#
类名：.
属性：[]
内容：{}
数字：$

a[href="xxx"]{百度一下}

ul>li{列表内容}*10

ul>li{列表内容$}*10

隐式标签

.box+.container

CSS Emmet
- w100
- h30

案例
w10+h30+m30+p50 
m20-30-40-50    margin: 20px 30px 40px 50px;

dib    display:inline-block
bd1#cs  border:1px #ccc solid

十三、结构伪类

:nth-child

:nth-child(1)
- 是父元素中的第一个子元素
:nth-child(2n)
- n代表任意正整数和0
- 是父元素中第偶数个子元素
- 等于 :nth-child(even)

/*前五个*/ 
ul li:nth-child(-n + 5){
            color: red;
        }
//奇数个，等于nth-child(odd)
  ul li:nth-child(2n + 1){
            color: red;
        }

:nth-last-child

类似与:nth-child，从后往前数

     /* 倒数第二个 */
        ul li:nth-last-child(2) {
            color: red;
        }

        /* 倒数后3个 */
        ul li:nth-last-child(-n + 3) {
            color: red;
        }

:nth-of-type

跟:nth-child类似,不同点是nth-of-type只计算同种类型的元素

    <style>
        /* 选择ul中第三个li元素 */
        /* 因为第三个元素是div，所以使用nth-child */
        /*使用nth-child,如果第三个元素不是li，那么无效  */
        ul li:nth-of-type(3){
            color:red
        }
        ul li:nth-child(5){
            color:orange
        }
    </style>
</head>
<body>
    <ul>
        <li>列表元素1</li>
        <li>列表元素2</li>
        <div>mmmmmm</div>
        <li>列表元素3</li>
        <li>列表元素4</li>
        <li>列表元素5</li>
        <li>列表元素6</li>
        <li>列表元素7</li>
        <li>列表元素8</li>
        <li>列表元素9</li>
        <li>列表元素10</li>
    </ul>
</body>

:nth-last-of-type

类似与:nth-of-type，从后往前数

其他结构伪类

在这里插入图片描述

:root，根元素，就是html元素
:empty 代表里面完全空白的元素

否定伪类

:not()的格式：not(x)
- x是一个简单选择器
- 元素、通用、属性选择器等等

十四、额外知识补充

border图形

border是给盒子增加边框的，但是在开发中我们也可以使用border实现一些形状：

<style>
    .box {
        box-sizing: border-box;
        width: 0px;
        height: 0px;
        background: #f00;

        border: 30px solid transparent;
        border-bottom-color: aqua;
    }
</style>

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

网络字体

我们之前使用的font-family，是在系统上找到可用的字体
字体选择是有限的
这就是所谓的Web-safe字体
不能进行一些定制化的需求

Web fonts的工作原理
1. fonts获取到想要的字体
2. 在css中使用字体
3. 将所有资源一起部署到服务器

使用Web fonts
1. 将字体放到对应的目录中
2. 通过@font-face来引入字体，并且设置格式
3. 使用字体
@font-face 用于加载一个自定义的字体

@font-face{
    font-family:"font01";
    src:url(./fonts/AaJianHaoTi-2.ttf);
}
body{
    font-family:"font01"
}

在这里插入图片描述

网络字体的兼容性写法
开发中某些浏览器可能不支持该字体，为了浏览器的兼容性，我们需要有对应格式的字体

字体图标

字体可以设计成各种形状，把字体直接设计成图标的样子，叫做字体图标
好处
- 放大不会失真
- 可以任意切换颜色
- 用到多个图标时，文件相对图片较小
使用过程
- 登录阿里icons
- 下载代码，拷贝到项目中
- 通过link引入iconfont.css文件
- 使用字体图标
```
<i class="iconfont icon-music"></i>
```
将字体文件和默认的css文件导入到项目中

精灵图CSS Sprite

是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的小图片
好处
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减少图片总大小
- 解决了图片命名的困扰，只需要对一张图片命名

精灵图的使用过程：

通常使用背景：
1. 设置对应元素的宽度和高度
2. 设置精灵图作为背景图片
3. 调整背景图片的位置来显示
如何获取精灵图的位置

http://www.spritecow.com

光标显示

cursor可以设置鼠标指针在元素上面时的显示样式
常见的设值有
- auto：浏览器根据上下文决定指针的样式
- default：操作系统决定，一般就是一个小箭头
- pointer：小手，链接上面默认是这个样式
- text：一条竖线，文本输入框默认是这个样式
- none：没有任何指针显示

十五、CSS元素定位

标准流

默认情况下，元素按照标准流进行排布

从左到右，从上到下按顺序摆放好
默认情况下，相互之间不存在层叠现象
可以使用margin、padding对元素进行定位（但是会影响其他元素）
不便于实现元素层叠的效果

position属性介绍

定位允许你从正常的文档流中取出元素，并使它们具有不同的行为：
- 比如放在另一个元素上面
- 始终保持在浏览器视窗口的同一位置
position可以对元素进行定位，常用取值
- static：默认值，静态定位
  - 元素按照正常文档流定位
  - left、right、top、bottom没有任何作用
使用下面的值可以让元素变成定位元素
- relative：相对定位
- absolute：绝对定位
- fixed:固定定位
- sticky：粘性定位

相对定位的使用

relative
元素按照标准流布局
定位参照对象是元素原来的位置
可以使用left、right、top、bottom定位，不影响其他元素

固定定位-fixed

元素脱离标准流
可以通过left、right、top、bottom定位，
定位参照对象是视口
当画布滚动时，固定不动

绝对定位-absolute

脱离标准流
可以通过left、right、top、bottom定位，
- 定位参照对象是最邻近的定位祖先元素
- 如果没有这样的祖先元素，参照对象是视口

absolute和fixed元素的特点

可以随意设置宽高
宽高默认有内容决定
不再严格区分block、inline、inline-block的区别
不再向父元素汇报宽高
脱标元素内部默认还是按照标准流布局
对于绝对定位元素来说
- 定位参照对象的宽度 = left + right + ml + mr + 元素自己的宽度
- 定位参照对象的高度 = top + bottom + mt + mb + 元素自己的高度
如果我们把left、right、top、bottom设置为0，margin设置为auto，那么可以实现绝对定位元素的左右垂直居中

<style>
    .box {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: red;
    }

    .container {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: aqua;
    }
</style>

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

如果我们将left、right、top、bottom、margin设置为0，那么等于将元素的宽高设置为100%

auto的总结

width：auto

行内非替换元素：width：包裹内容
块级元素：width：包含块的宽度
绝对定位元素：width：包裹内容

粘性定位-sticky

可以看作是相对定位和绝对定位的结合体
它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点
当达到阈值点时，就会变成绝对定位
相对于最近的滚动组先包含滚动视口的

.nav{
    position:sticky;
    /*距离上沿还有40px的时候停住*/
    top:40px;
}

z-index属性

z-index设置定位元素的层叠顺序（仅对定位元素有效）
- 取值可以是正整数、负整数、0
比较原则
- 如果是兄弟关系
  - z-index越大，层叠在越上面
  - z-index相等，写在后面的那个元素层叠在上面
- 如果不是兄弟关系
  - 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
  - 而且这2个元素必须有设置z-index的具体数值

十六、浮动

认识浮动

float属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它
- 最初只用于文本内浮动图像，实现文字环绕的效果
- 但在早期并没有提供好的左右布局方案，因此在一段时间内成为网页多列布局的常用工具（属于css属性的滥用）
绝对定位、浮动都会让元素脱离标准流，达到灵活布局的效果
常用值：
- none:不浮动，默认值
- left：向左浮动
- right：向右浮动

浮动的常见规则

元素一旦浮动，脱离标准流
- 朝着向左或向右方向移动，直到自己的边界紧贴着包含块或其他浮动的元素为止
- 定位元素会层叠在浮动元素上面
浮动元素之间不能层叠
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素会紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素会向下移动，直到有充足的空间为止
浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
- 比如行内级元素、inline-block元素、块级元素的文字内容
- 达到图文混排的效果
行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

浮动常见的应用场景

行内元素的间隙处理
空隙产生的原因是因为行内元素之间的换行符

方法：

删除换行符
将父级元素的font-size设置为0
元素自己设置浮动
flex布局

浮动的问题-高度坍陷

子元素设置浮动后，脱离标准流
不会向父元素汇报高度，那么父元素在没有设置高度的情况下就没有高度
导致高度坍陷问题

解决方案：清除浮动

清除浮动的目的：让父元素计算总高度的时候，把浮动子元素的高度算进去
如何清楚浮动
- 使用clear属性：可以指定一个元素是否必须移动(清楚浮动后)到它之前的浮动元素下面
  - 常用值：
    - left：要求元素的顶部低于之前生成的所有左浮动元素的底部
    - right：要求元素的顶部低于之前生成的所有右浮动元素的底部
    - both：要求元素的顶部低于之前生成的所有浮动元素的底部
    - none：默认值，无特殊要求
  - 缺点：
    - 会增加很多无意义的空标签，维护麻烦
    - 违反了结构与样式分离的原则
- 给父元素增加::after伪元素
```
.clear-fix::after{
    content:"";
    display:block;
    clear:both;
    
    visibility:hidden; /*浏览器兼容性*/
    height:0;/*浏览器兼容性*/
}
.clear-fix{
    *zoom:1; /*IE6/7兼容性*/
}
```

十七、Flex布局

认识flexbox

Flexbox翻译为弹性盒子
- 弹性盒子是一种用于按行或按列布局元素的一维布局方法
- 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
- 使用Flexbox进行布局的方案称为flex布局
flex布局是目前web开发中使用最多的布局方案

flex布局中的重要概念

两个重要的概念：
- 开启flex布局的元素叫flex container
- flex container 里面直接子元素叫做flex item
flex item的特点
- 将受flex container属性的设置来控制和布局
- 不再严格区分块级元素和行内级元素
- 默认情况下是包裹内容的，但是可以设置宽高
display设置为flex或者inline-block可以成为flex container
- flex：flex container以block-level形式存在
- inline-flex：flex container以 inline-level形式存在

flex-direction

flex items默认都是沿着main axis(主轴)从main start 开始往 main end 方向排布
- flex-direction决定了main-axis的方向，有四个取值
- row(默认值)、row-reverse、column、column-reverse

flex-wrap

flex-wrap决定了felx container是单行还是多行
- nowrap(默认):单行
- wrap:多行
- wrap-reverse:多行（与wrap相比，交叉轴方向相反）

flex-flow

flex-flow是flex-direction和flex-warp的简写
- 顺序任何，并且可以省略

justify-content

justify-content决定了flex items在main axis上的对齐方式
- flex-start(默认值)：与main start对齐
- flex-end：与 main end 对齐
- center：居中对齐
- space-between
  - flex items之间的距离相等
  - 与main start、main end两端对齐
- space-around
  - flex items之间的距离相等
  - 与main start、main end之间的距离是flex items之间距离的一半
- space-evenly
  - flex items之间的距离相等
  - 与main start、main end之间的距离等于flex items之间的距离

align-items

align-items决定了flex items在cross axis上的对齐方式
- normal：在弹性布局中，效果和stretch一样
- stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
- flex-start：与cross start对齐
- flex-end：与cross end对齐
- center：居中对齐
- baseline：与基准线对齐

align-content

align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
- stretch(默认值)：与align-items的stretch类似
- flex-start：与cross start对齐
- flex-end：与cross end对齐
- center：居中对齐
- space-between
  - flex items之间的距离相等
  - 与cross start、cross end两端对齐
- space-around
  - flex items之间的距离相等
  - 与crossstart、cross end之间的距离是flex items之间距离的一半
- space-evenly
  - flex items之间的距离相等
  - 与cross start、cross end之间的距离等于flex items之间的距离
因为父元素的高度真实开发中不固定，所以很少使用align-content

flex-item属性：order

order决定了flex item的排布顺序
给item设置order，值越小，排在前面
默认值是0

flex-item属性：align-self

可以通过align-self覆盖flex-container设置的align-items
- auto(默认值)：遵从felx contaienr的align-item设置
- stretch、flex-start、flex-end、center、baseline效果和align-items一致

flex-item属性：flex-grow

flex-grow决定了flex items如何扩展
- 可以设置任意非负数字，默认值是0
- 当flex container在main axis上有剩余size时，flex-grow属性才会有效
flex-grow总和sum超过1，每个flex item扩展的size为
- flex container的剩余size * (flex-grow /sum)
不能超过自己的max-width/height

flex-item属性：flex-shrink

flex-grow决定了flex items如何收缩
- 可以设置任意非负数字，默认值是1
- 当flex item在main axis上超过felx container的size时，flex-shrink属性才会有效
收缩规则类似flex-grow的扩展规则
不能小于自己的min-width/height

flex-item属性：flex-basis

flex-basis用于设置items在main axis方向上的base size（基础尺寸）
- auto(默认值)、具体的宽度数值(100px)
如果有一个超过基础尺寸的英文单词，会自动扩展
决定items最终base size的因素，从优先级高到低
- max-width/max-height/min-width/min-height
- flex-basis
- width/height
- 内容本身的size

flex-item属性：flex

flex是flex-grow||flex-shrink||flex-basis的简写，felx属性可以指定1个、2个或3个值
单值语法：
- 一个无单位数：会被当作flex-grow的值
- 一个有效宽度值：会被当作flex-basis的值
- 关键字none，auto或initial
- none:0 0 auto
- auto: 1 1 auto
- initial:0 1 auto
双值语法：第一个值必须是无单位数，会被当作flex-grow的值
- 第二个值必须为以下之一
  - 一个无单位数：当作flex-shrink的值
  - 一个有效宽度值：会被当作flex-basis的值
三值语法：
- 第一个值必须是一个无单位数：会被当作flex-grow的值
- 第二个值必须是一个无单位数：当作flex-shrink的值
- 第三个值必须是一个有效宽度值：会被当作flex-basis的值

flex布局常见问题

在这里插入图片描述

解决方案：

不使用space-between,手动计算margin
在items后面添加列数减2个高度为0的空元素(比如i标签或者span标签)

十八、CSS属性-transform

CSS transform属性允许对某一个元素进行某些形变，包括旋转、缩放、倾斜或平移等。
并非所有的盒子都可以进行transform的转换（通常行内级元素不能进行形变）

transform的用法

transform：

常见的函数有：
- 平移：translate(x,y)
- 缩放：scale(x,y)
- 旋转：rotate(deg)
- 倾斜：skew(deg,deg)

位移-translate

平移：translate(x,y)
- 这个CSS函数用于移动元素在平面上的位置
值个数
- 一个值：x
- 二个值：x和y的值
值类型
- 百分比：相对于自身
- 具体值

元素水平垂直居中总结

水平居中：
- 行内级元素：
  - 设置父元素的text-align：center
- 块级元素：
- 设置当前块级元素(宽度)margin：0 auto
- 绝对定位+margin：
  - 元素有宽度情况下，left：0/right:0/margin:0 atuto
- flex
  - justify-content:center
- left + translateX
垂直居中：
- 绝对定位+margin
  - 元素有高度的情况下，top:0/bottom:0/margin:auto 0
- flex布局
  - align-items:center
- top + translateY

缩放-scale

缩放：scale(x,y)
- scale()CSS函数可改变元素的大小
值个数
- 一个值，设置x轴上的缩放
- 两个值，设置x轴和y轴上的缩放

旋转-rotate

旋转：rotate()
值个数
- 一个值时，表示旋转的角度
值类型：
- 常用单位deg：旋转的角度(degrees)
- 正数为顺时针
- 负数为逆时针

tranform-origin

改变transform形变的坐标原点
tranform-origin默认中心圆点：center，center
一个值：
- 设置x轴的原点
两个值
- 设置x轴和y轴的原点
值类型
- left、center、right、top、bottom关键字
- length：从左上角开始计算
- 百分比：参考元素本身大小

倾斜-skew

倾斜：skew(x,y)
- 函数定义了一个元素在二维平面上的倾斜转换
值个数
- 一个值时，表示x轴上的倾斜
- 二个值时，表示x轴和y轴上的倾斜
值类型
- deg：旋转的角度
- 正数为顺时针
- 负数为逆时针
倾斜的原点也受transform-origin的影响

transform设置多个值

可以给transform设置多个形变函数，之间以空格分隔

十九、transition动画

认识transition动画

CSS transition提供了一种在更改CSS属性时控制动画速度的方法
可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的
通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定
CSS transition可以决定
- 哪些属性发生动画效果
- 何时开始(设置delay)
- 持续多久(设置duration)
- 如何动画(定义timing function，比如匀速或想快后慢)

过渡动画-transition

transition CSS属性时transition-property,transition-duration,transition-timing-function和transition-delay的一个简写属性

/*告知浏览器 box 在进行一些css属性变化的时候有一个过渡效果*/
.contaienr:hover .box{
 	transition:left 1s ease-in;   
}
/*父元素的hover事件，子元素box产生变化*/
.contaienr:hover .box{
    left:100px;
}

transition动画的缺点

transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态
transition不能重复执行，除非一再触发动画
transition需要在特定状态下会触发才能执行，比如某个属性被修改了

二十、CSS Animation

###基本使用步骤

CSS Animation的使用分成两个步骤
1. 使用keyframes定义动画序列(每一帧动画如何执行)
2. 配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

@keyframes规则

可以使用@keyframe来定义多个变化状态，并且使用animation-name来声明匹配：
- 关键帧使用百分比来指定动画发生的时间点；
- 0%表示动画的第一时刻，100%表示动画的最终时刻；
- 因为这两个时间点十分重要，所以还有特殊的别名：from和to；

animation属性

CSS属性是以下属性的简写形式
- animation-name：指定执行哪一个关键帧动画
- animation-duration：指定动画的持续时间
- animation-timing-function：指定动画的变化曲线
- animation-delay：指定延迟执行的时间
- animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画
- animation-direction：指定动画，常用值normal和reverse
- animation-fill-mode：执行动画最后保留哪一帧
  - none：回到没有执行动画的位置
  - forwards：动画最后一帧的位置
  - backwards：动画第一帧的位置
- animation-play-state：指定动画运行或者暂停(JS中使用，用于暂停动画)

二十一、vertical-align

行盒的概念和作用

<style>
    /* 当前box会有高度 */
    /* 高度由内容撑起来 */
    /* 本质：内容的行高撑起来 */
    .box {
        background-color: orange;
    }
</style>

<body>
    <!-- 如果有多行文本，每一行是一个行盒，行盒会将所有内容包裹起来-->
    <div class="box">我是div元素</div>
</body>

CSS属性-vertical-align

影响一个行盒中行内级元素的对齐方式
行盒中对齐方式默认是baseline对齐-，即使没有文本，底部也会预留文本基线下的剩余内容
- 文本的baseline是字母x的下方
- lnine-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）
- lnine-block有多行文本时，baseline是最后一行文本的x的下方
如果想要删除多于内容，则使用vertical-align改变对齐方式或者设置display:block

vertical-align的其他值

baseline(默认值)：基线对齐
top：把行内级盒子的顶部和line boxes顶部对齐
middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐
- 但是x的中间其实不是整个文本的中间，所以middle不是真正的居中
bottom：把行内级盒子的底部跟line box底部对齐
百分比：把行内级盒子提升或者下降一段距离(距离相对于line-height计算)，0%意味着跟baseline一样
length：把行内级盒子提升或者下降一段距离，0%意味着跟baseline一样

在行内级的元素设置

额外补充

一、HTML5新增元素

###HTML5新增语义化元素

header: 头部元素
nav：导航元素
section：定义文档某个区域的元素
article：内容元素
aside：侧边栏元素
footer：尾部元素

###HTML5新增Video元素

用于在HTML中嵌入媒体播放器，支持文档内的视频播放
行内替换元素
常见属性
- src：URL地址
- controls：是否显示控制信息
- autoplay：是否自动播放
- muted：静音播放
- poster：一海报帧的URL
- preload：是否需要预加载视频
兼容性写法

/*不支持就是用sourec中的src*/
<video src="./" controls>
	<source src="./">
</video>

###HTML5新增audio元素

用于在文档中嵌入音频
常见属性(类似video)
- src
- controls
- autoplay
- muted
- preload

###input元素的扩展内容

placeholder：输入框的占位文字
multiple：多个值
autofocus：自动聚焦
另外对于input的type值的扩展
- date
- time
- number
- tel
- color
- email
- range
- 等等

###新增全局属性data-*

data-*，用于自定义数据属性：
- data设置的属性可以在JS的DOM操作中通过dataset获取到
- 通常用于HTML和JS之间数据的传递

<body>
    <!-- <div age="18"></div> -->
    <!-- 相比于直接使用age属性，更规范，更利于浏览器解析 -->
    <div class="box" data-age="18"></div>
</body>
<script>
    const boxEl = document.querySelector(".box")
    console.log(boxEl.dataset.age)
</script>

小程序中广泛使用

二、CSS属性-white-space

white-space用于设置空白符处理和换行规则
normal(默认值)：合并所有连续的空白，允许单词超屏时自动换行
nowrap：合并所有连续的空白，不允许单词超屏时换行
pre：阻止所有连续的空白，不允许单词超屏时换行
pre-wrap：阻止所有连续的空白，允许单词超屏时换行
pre-line：合并所有连续的空白(但保留换行符)，允许单词超屏时换行

三、CSS属性-text-overflow

用来设置文字溢出时的行为
- clip：溢出的内容直接裁剪掉(字符可能会显示不完整)
- ellipsis：溢出行的结尾处用省略号表示
生效的前提时overflow的值不是visible

四、CSS中的函数

var：使用css定义的变量
calc：计算css值，用于计算元素的大小和位置
blur：高斯模糊效果
gradient：颜色渐变函数

CSS函数-var

CSS中可以自定义属性
- 属性名需要以**两个减号(–)**开始
- 属性值则可以是任何有效的CSS值
通过var来使用这个自定义属性

    html{
        /* 定义了一个变量 */
        /* 只有自己和后代元素可以使用 */
        --main-color:#f3c258;
    }
    .box{
        color:var(--main-color)
    }

自定义属性有可见作用域，只在选择器内部有效
- 推荐自定义属性定义在html中，也可以使用:root选择器

CSS函数-calc

calc函数允许在声明CSS属性值时执行一些计算。
- 计算支持加减乘除
  - 运算符的两边必须要有空白字符
- 通常用来设置一些元素的尺寸或者位置

<!-- 我们希望item2固定宽度，item1占满剩余宽度 -->
<style>
    .box {
        width: 300px;
        height: 100px;
        background-color: orange;
    }

    .item {
        height: 50px;
        display: inline-block;
    }

    .item1 {
        width: calc(100% - 100px);
        background-color: #f00;
    }

    .item2 {
        width: 100px;
        background-color: #0f0;
    }
</style>

<body>
    <div class="box">
        <div class="item1 item"></div>
        <div class="item2 item"></div>
    </div>
</body>

CSS函数-blur

blur()函数将高斯模糊应用于输出图片或者元素
- blur(radius)
- radius：模糊的半径，用于定义高斯函数的偏差值，偏差值越大，图片越模糊
通常会和两个属性一起使用：
- filter：将模糊或颜色偏移等图形效果应用于元素
- backdrop：为元素后面的区域添加模糊或者其他效果

img{
    filter：blur(10px);
}

CSS属性-gradient

gradient是一种CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。
- CSS的image数据类型描述的是2D图形
- 比如background-image，list-style-image、border-image、content等
- image常见的方式是通过url来引入一个图片资源
- 它可以通过CSS的gradient函数来设置颜色的渐变

在这里插入图片描述

linear-gradient的使用

创建一个表示两种或多种颜色线性渐变的图片

background-image:linear-gradient(blue,red);
/*改变方向*/
background-image:linear-gradient(to right,blue,red);
background-image:linear-gradient(to right top,blue,red);
background-image:linear-gradient(45deg,blue,red);
/*多个颜色，具体位置*/
background-image:linear-gradient(to right,blue,red 40px,orange 60%,purple 100%);

五、浏览器前缀

官方文档专业术语叫做：供应商特定扩展
W3C新出一个新的CSS属性时，由草稿到推荐的过程可能改变或者删除
那么在过程中，先使用浏览器前缀来让浏览器使用
浏览器前缀，只有对应的浏览器才能解析使用
- -o-、 -xv-：Opera等
- -ms-、mso-：IE等
- -moz-：Firefox等
- -webkit：Safari、Chrome等
不需要要手动添加，模块化打包工具会自动添加浏览器前缀

六、BFC

什么是FC？

FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的
块级元素的布局属于BFC
行内级元素的布局属于IFC
- 比如div/p/h1/h2 属于BFC的布局中
- a/span/i 属于IFC的布局中

BFC

块级元素所在的布局就叫BFC

BFC有什么作用

在BFC中盒子会一个一个垂直排布
垂直方向的间距由margin决定
上下元素margin的折叠(同一个BFC中)
BFC中，每个元素都默认挨着包含块的左边缘
由此得出的作用
- 解决margin的折叠问题
  - 将两个元素放在不同的BFC中
- 解决浮动高度坍陷问题

解决margin的折叠问题

将两个元素放在不同的BFC中

解决浮动高度坍陷问题

将父元素设置overflow：hidden时，子元素即使浮动不向父元素汇报高度，父元素也会有高度
但是不能解决绝对定位元素的高度坍陷问题
使用BFC解决这个问题的前提：
- 父元素的高度是auto
- 父元素触发BFC
BFC的高度是auto时，是如下计算高度的
- 如果只是行内级元素，高度是行高的顶部和底部的距离
- 如果是块级元素，是由最顶层的块上边缘和最底层块下边缘之间的距离
- 如果有绝对定位元素，将被忽略
- 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

七、媒体查询

媒体查询是一种提供给开发者针对不同设备需求进行定制开发的一个接口

媒体查询的使用方式主要有三种：

@import结合媒体查询使用

@import url(./css/body_bgc.css)(max-width: 800);

使用media属性为style，link，source和其他HTML元素指定特定的媒体类型
```
<link rel="stylesheet" media="(max-width: 800px)" href="./css/body.css">
```
@media

@media (max-width: 800px){
    body{
        background-color:red;
    }
}

媒体类型

在使用媒体查询时，你必须指定要使用的媒体类型
- 媒体类型时可选的，并且会(隐式)应用all类型
常见的媒体类型
- all：适用于所有设备
- print：适用于在打印预览模式下在屏幕上查看的分页材料和文档
- screen：主要用于屏幕
- speech：主要用于语音合成器

媒体特性

媒体特性描述了浏览器、输出设备或是预览环境的具体特征
- 通常将媒体特性描述成一个表达式
- 每条媒体特性表达式必须用括号括起来
常见的媒体特性：
- width
- height
- color
- 等等

逻辑操作符

媒体查询的表达式最终会获得一个boolean值
如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询
- and
- not
- only
- 逗号

@media screen and(min-width:500px) and (max-width: 700px){
    body{
        background-color:#f00;
    }
}

八、CSS常见单位

绝对长度单位
相对长度单位

绝对长度单位

与其他东西都没有关系，通常被认为总是相同的大小
大多数打印时更有用，比如cm单位
经常使用的是px

相对长度单位

相对于其他一些东西
比如父元素的字体大小，或者视图端口的大小
好处是可以使文本或其它元素的大小与页面上的其他内容相对应
常见的相对长度单位
- em：相对于自己的font-size（自己没有的话，相对于父元素，因为font-size会继承）
- rem：相对于html的font-size
- vw/vh：viewport width/height相对于视口的百分比

像素的理解

像素是影响显示的基本单位
像素单位常见的有三种像素名称：
- 设备像素(也称之为物理像素)
- 设备独立像素(也称之为逻辑像素)
- CSS像素
设备像素
- 指的是显示器的真实像素
- 我们在购买显示器或者手机时，提到的设备分辨率就是设备像素的大小
设备独立像素
- 如果面对开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果是不同的
- 所以在设备像素智商，操作系统为开发者进行抽象，提供了逻辑像素的概念
- 比如你买了一台显示器，在操作系统上是以1920×1080设置的显示分辨率，那么无论设备像素是多少，显示的都是1920×1080
CSS像素
- CSS中我们经常使用的单位是px，它在默认情况下等同于设备独立像素
- 毕竟逻辑像素才是面向我们开发者的

DPR、PPI

DPR：设备像素比
- 在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比
- 可以通过window.devicePixeRatio获取到当前屏幕上的DPR值
PPI：每英寸像素(物理像素)
- 通常用来表示一个打印图像或者显示器上像素的密度

九、CSS预处理器

CSS编写的痛点

随着代码量的增加
- 比如大量重复的代码,虽然可以用来勉强管理和抽取，但是使用起来依然不方便
- 比如无法定义变量(目前已经支持)
- 比如没有专门的作用域和嵌套，需要定义大量的id/class来保证选择的准确性，避免样式混淆
- 等等一系列问题
所以对CSS称呼为“面向命名编程”
为了解决这些问题，出现了一系列的CSS预处理器
- CSS预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序
- 市面上有很多CSS预处理器可供选择，会增加原生CSS不具备的特性
- 代码最终会被转为CSS来运行，因为对于浏览器来说只识别CSS

常见的CSS预处理器

Sass/Scss
- 07年诞生，最早最成熟的CSS预处理器
- 目前受LESS影响，已经进化到了全面兼容CSS的SCSS
Less：
- 09年，受SASS的影响，但是又使用CSS的语法，让大部分开发者更容易上手
- 相比与SASS，可能编程功能不够，优点是使用方式简单，便捷，兼容CSS
- 另外影响了Sass演变到SCSS
Stylus：
- 10年，主要给Node项目进行CSS预处理器支持

Less的使用

认识less

CSS扩展语言，并且兼容CSS
- 增加了很多相比于CSS更好用的特性
- 比如定义变量、混入、嵌套、计算等等
- Less最终需要被编译成CSS运行于浏览器

less代码的编译

下载Node环境，通过npm下载less工具，使用less工具对代码进行编译
通过VSCode插件来编译成CSS或者在线编译
1. Easy LESS插件下载
2. 当我们保存less文件时，这个插件会帮我们生成对应的css文件
3. 我们在html中引入css文件即可
引入CDN的less编译代码，对less进行实时的处理

 <link rel="stylesheet/less" href="./index.less">
 <script src="https://cdn.jsdelivr.net/npm/less@4"></script>

Less语法

语法一：兼容css

所以我们可以在less文件中编写所有的css代码
只是将css的扩展名改成了.less结尾而已

语法二：变量

我们需要将常见的颜色或者字体等定义为变量来使用
使用如下格式定义变量：

@变量名：变量值;

// 定义变量
@mainColor:#f3c258;
@samllFontSize:12px;
@normalFontSize:14px;
@bigFontSize:18px;
.box{
    color:@mainColor;
    font-size: @bigFontSize;
}

语法三：嵌套

特殊符号：&表示当前选择器的父级

// 嵌套
.container{
    .box{
        color: @mainColor;
    }
    h1{
        font-size: @bigFontSize;
        &:hover{
          color:#00f;  
        }
    }
}

语法四：运算

在less中，加减乘除可以对任何数字颜色或者变量进行运算
- 运算之前会单位换算，以最左侧操作数的类型为准
- 如果单位换算无效或失去意义，则忽略单位

// 运算
.box{
    // 100px
    height: 100px + 10em;
    width: 50px * 2;
    background-color: #f00 + #0f1;
}

语法五：混合

在原来的css编写中，存在大量重复代码
less的混入可以将一组属性从一个规则集到另一个规则集

// 混入mixins
.nowrap-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.box1 {
    width: 100px;
    background-color: #f00;

    .nowrap-ellipsis();
}

.box2 {
    width: 100px;
    background-color: #0f0;

    .nowrap-ellipsis();
}

混入可以传入变量

.box-border(@borderWidth: 5px) {
    border: @borderWidth solid purple;
}

.box1 {
    width: 100px;
    background-color: #f00;

    .nowrap-ellipsis();
    .box-border(10px);
}

混入的高级用法(混入和映射结合使用)
- 弥补less中不能自定义函数的缺陷

//映射(Maps)
.box-size{
    width: 100px;
    height: 100px;
}

.box1 {
    width: .box-size()[width];
    background-color: #f00;
}

//混入和映射结合
.pxToRem(@px){
    result:(@px / @htmlFontSize) * 1rem
}
.box{
    width:.pxToRem(100)[result];
}

语法六：继承

比较少用
和混入相比，继承代码最终会转化为并集选择器

.box-size{
    width: 100px;
    height: 100px;
}
.box1 {
    background-color: #f00;
    &:extend(.box-size);
}

语法七：less内置函数

less内置了多种函数用于转换颜色、处理字符串、算术运算等

.box{
    color:color(red);//将red转成RGB的值
    width:convert(100px,'in');//单位的转换,in是英寸
    font-size:ceil(18.5px);//数学函数
}

语法八：作用域

一个大括号是一个作用域
优先使用当前作用域的或者混入的
如果找不到，则从“父”级作用域继承

@mainColor:#f00;

.box{
    @mainColor:#0f0;
    .item{
        span{
            //使用离他最近的
			color:@mainColor;
             @mainColor:#00f;
        }
    }
}

语法九：注释

// 单行注释
/**/多行注释

语法十：导入

导入的方式和CSS的用法是一致的
导入一个.less文件，此文件中的所有变量就可以全部使用了
如果导入的文件时.less扩展名，则可以将扩展名省略掉

Sass的使用

认识Sass

Sass的语法使用的是类似与Ruby的语法，没有花括号，没有分号，具有严格的缩进
后来官方推出了全新的SCSS，是完全兼容CSS的
SCSS语法包括变量、嵌套、混入、函数、操作符、作用域等
通常也包括更为强大的控制语句，更灵活的函数，插值语法等

十、移动端适配

什么是移动端开发？

目前移动端开发主要包括三类：
- 原生App开发(IOS、Android等)
  - 不属于前端范畴
- 小程序开发(原生小程序、uniapp等)
- Web页面(移动端的Web页面，可以使用浏览器或者webview浏览)
因为目前移动端设备较多，所以我们需要对其进行一些适配
两个概念
- 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小
- 响应式：会随着屏幕额实时变动而自动调整，是一种自适应

移动视口

认识视口viewport

在一个浏览器中，我们可以看到的区域就是视口
我们说过fixed是相对于视口来进行定位的
在pC端的页面中，我们不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个

但是在移动端，你布局的视口和你可见的视口是不太一样的
- 因为移动端的网页窗口往往比较小，我们可能希望一个大的网页在移动端可以完整的显示
- 所以在默认情况下，移动端的布局视口是大于视觉视口的
所以在移动端，我们可以将视口划分为三种情况
- 布局视口
- 视觉视口
  - 会将布局视口等比例缩小以完整的放在视觉视口显示
- 理想视口

布局视口和视觉视口

默认情况下，一个在pC端的网页在移动端会如何显示呢？
- 会按照宽度为980px来布局一个页面的盒子和内容
- 会将布局视口等比例缩小以完整的放在视觉视口显示
我们相对于980px布局的这个视口，称之为布局视口
- 布局视口的默认宽度为980px

理想视口

理想视口是我们希望设置100px，那么显示的就是100px
我们可以对布局视口的宽度和缩放进行设置，以满足正常在一个移动端窗口的布局
这个时候可以设置meta中的viewport
viewport的属性值
- width
- height
- initial-scale
- maximum-scale
- minimum-scale
- user-scalable

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, minimum-scale=1.0,minimum-scale=1.0">

移动端适配方案

我们希望在不同的屏幕尺寸上显示不同的大小：
- 比如我们设置一个100×100的盒子
  - 在375px的屏幕上显示是100×100
  - 在320px的屏幕上显示是90+×90+
  - 在414px的屏幕上显示是100+×100+
- 其他padding、margin、border、left、font-size我们也希望如此
解决方案
- 方案一：百分比设置
  - 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比很难统一
  - 所以百分比在移动端适配中使用时非常少的
- 方案二：rem单位+动态html的font-size
- 方案三：vw单位
- 方案四：flex的弹性布局

rem单位方案

我们可以动态修改html的font-size，来动态改变rem单位，实现在不同屏幕下有不同的尺寸
rem的font-size尺寸如何设置？
- 方案一：媒体查询
  - 缺点：
    - 针对不同的屏幕，写大量的媒体查询
    - 没法实时更新font-size的大小，即屏幕的一点变换都要随着变化
- 方案二：编写JS动态计算font-size

<script>
    // 动态编写html中的font-size
    // 拿到html元素
    const htmlEl = document.documentElement
    function setRemUnit() {
        // 拿到屏幕宽度
        const htmlwidth = htmlEl.clientWidth
        // 屏幕宽度的十分之一设置为htm的font-size
        const htmlFontSize = htmlwidth / 10
        htmlEl.style.fontSize = htmlFontSize + "px"
    }
    setRemUnit()
    window.addEventListener("resize", setRemUnit)
 	window.addEventListener("pageshow",setRemUnit)
</script>

方案三：lib-flexible库
- 事实上，lib-flexible做的事情是相同的，我们可以直接引入

rem单位换算

方案一：手动换算
- 比如有一个在375px屏幕上，100px宽高的盒子
- 我们需要将100px转成对应的rem值
- 100/37.5=2.6667，其他也是相同的方法计算
方案二：less/scss函数

.pxToRem(@px){
    width: 1rem (@px / 37.5);
}

方案三：postcss-pxtorem
- 我们可以借助webpack的工具来完成自动的转化
方案四：VSCode插件
- px to rem 的插件，在编写时自动转化
- 在设置中调整Root Font Size

VW方案

视口宽度/100=1vw

html{
    font-size:10vw;
}
.box{
	width:2.6667rem;
     height:2.6667rem;
}
/*以上代码可以直接写成*/
.box{
    width:2.6667 * 10vw;
    height:2.6667 * 10vw;
}

vw和rem的对比

rem事实上是一种过渡的方案，它利用的也是vw的思想
- 前面不管是我们自己编写的js，还是flexible的源码
- 都是1rem等同于设计稿的1/10，在利用1rem计算相对于整个屏幕的尺寸大小
- 但是10vw刚好等于屏幕的1/10
- 相对于rem更具优势
vw相比于rem的优势
- 不需要计算和设置html的font-size大小
- 不会因为设置的html的font-size大小，而必须给body设置一个font-size，防止继承
- 因为不依赖font-size的尺寸，不用担心html的font-size被纂改而发生的混乱
- vw比rem更具语义化
- vw可以具备rem之前的所有优点
相比于rem，更推荐使用vw

vw的单位换算

方案一：手动计算
- 比如有一个在375px屏幕上，100px宽高的盒子
- 我们需要将100px转成对应的vw值
- 100/3.75=26.667，其他也是相同的方法计算
方案二：less/scss函数

@vwUnit:3.75;
.pxToVw(@px){
    result:(@px / @vwUnit) * 1vw
}
.box{
    width:.pxToVw(100)[result];
    height:.pxToVw(100)[result];
}

方案三：postcss-px-to-viewport-8-plugin
- webpack来完成
方案四：VScode插件
- px to vw的插件，编写时自动转换

十一、grid布局

grid布局是一种基于二维的布局系统
更加强大，也更加复杂
兼容性比flex差一些，暂时作为了解即可

本地跑没问题

关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS

dl定义列表，直接子元素只能是dt、dddtterm是项的意思，列表中每一项的项目名dd列表中每一项的具体描述，是对dt的描述、解释、补充。
复制链接

扫一扫