CSS学习

凛星飘落缀满地

已于 2023-11-08 11:18:13 修改

阅读量358

点赞数 1

文章标签：经验分享学习 css 前端

于 2023-10-08 14:20:03 首次发布

本文链接：https://blog.csdn.net/qq_41878264/article/details/133672963

版权

一、CSS

1.css简介

CSS指的是(Cascading Style Sheets)，即层叠样式表，是一种设计网页样式及布局的技术。所谓“层叠”，实际上指的是将显示样式与显示内容分离。
CSS用来设置网页中元素的样式。
CSS三大特性：层叠性、继承性、优先性
CSS使用的方式
- 行内/内联样式：只能在标签内部通过 $\color{orange}{style属性}$ 来设置标签的样式。
```
  <p style="color:red;font-size:60px;">厦门大学</p>
```
- 内部样式：
  
  ① 将样式编写 $\color{orange}{head的style标签里}$ ，通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改只修改一处即可全部应用（ $\color{orange}{复用性，}$ $\color{orange} {单页面}$ ）
  
  ② 内部样式表更加方便样式进行复用。
  
  ③ 问题：内部样式表只能对一个网页起作用，不能跨页面进行复用。
```
   <head>
    <style type="text/css">
    p,h1,a
{
    color:green;
    font-size:50px;
}
    </style>

   </head>
```
- 外部样式表：
  
  将样式编写到外部样式文件中，可以使用浏览器的缓存机制。第一次加载比较满，第二次已访问加载浏览器本地的文件。
  
  ①link外部样式表:将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的css文件(跨页面复用)
  - href：是外部样式表的路径
  - rel：指的是被链接的文件的类型
  - stylesheet：表示被链接的是CSS文件
  - type：指的是被链接的文件的内容类型
```
  <LINK href="css1.css" rel="stylesheet" type="text/css"/>
  
```
  ②@import外部样式表:@import标记导入外部css文件(跨页面复用)
```
  <HEAD>
  <style type=“text/css”>
  @import url(“…”);
  </style>
  </HEAD>
```

2.css基本语法

selector

{property : value;

property : value;

…}
selector是选择符，最常见的选择符是HTML标签；property是选择符的属性，value为选择符的属性值。

多个选择符属性之间使用分号隔开（声明是名值对结构）
css基本语法：选择器和声明块。
- 选择器：通过选择器可以选中页面中指定元素。
- 声明块：通过声明块来为指定的元素设置样式。
- 声明块包含一条或多条用分号分隔的声明。
- 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

3. 常用选择器

3.1元素选择器

元素选择器:根据标签名来选中指定的元素

① 语法:标签名{}

② 例子:P{} , div{}

3.2id选择器

id选择器:根据设置元素的id属性值来选择一个元素,id值不能重复，有且仅有一个。

① 语法:#id属性值{}

② 例子：#red {}

3.3类选择器

类选择器:根据元素的class属性值选中一组元素,class属性值可以重复。

① 语法: .class属性值{}

② 例子： .blue{}

③可以给一个元素设置多个类class，多个class之间用空格隔开。

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="UTF-8">              
   <title>标题名</title>
       <style>
           .blue{
               color:blue;
           }
           .abc{ 
               font-size:20px;
           }
       </style> 
   </head>
    <body>
    
   <h1 class="blue abc">
    </h1>
    </body>
   </html>

3.4通配选择器

通配选择器:选中页面的所有元素

① 语法：通配符* {}

② 例子：*{ color=red; }

3.5交集选择器

交集选择器:同时选中符合多个条件的元素(中间没有逗号)

① 语法：选择器1选择器2选择器3{}

② 例子： div.red{color=red;}

③ 注意：交集选择器中如果具有元素选择器，必须使用元素选择器开头。

3.6并集选择器

并集选择器(选择器分组):同时选择多个选择器对应的元素(中间使用逗号)

① 语法:选择器1，选择器2，… ，选择器n{}

② 例子: h1 , span{color=green;}

3.7关系选择器

关系选择器

父元素:：直接包含子元素的元素称为父元素（一个元素只有一个父元素）
子元素：直接被父元素包含的元素称为子元素
祖先元素：直接或间接包含后代元素的元素称为祖先元素（一个元素可以有多个祖先元素）
后代元素：直接或间接被祖先元素包含的元素称为后代元素(子元素也是后代元素)
兄弟元素: 拥有相同父元素的元素称为兄弟元素

3.7.1子元素选择器

子元素选择器：选中指定元素的指定子元素

① 语法: 父元素 $\color{orange} {>}$ 子元素

② 例子: div > span{ color：orange;}

3.7.2后代元素选择器

后代元素选择器：选择指定元素内的指定后代元素

① 语法：祖先元素 $\color{orange} {空格}$ 后代元素

② 例子：div span{ color：blue；}

3.7.3兄弟元素选择器

兄弟元素选择器：

选择指定元素的下一个兄弟元素(相邻兄弟选择器)：

① 语法：前一个兄弟元素 $\color{orange} {+}$ 下一个紧挨着兄弟元素(只有1个)

② 例子：p + span {color:red;}

选择指定元素的下边所有的兄弟元素(兄弟选择器)：

① 语法：前一个兄弟元素 ~ 下边所有的兄弟元素(可以有多个)

② 例子：p~span{color:red;}

③ 例子：li:hover ~ .goods-info{ }

3.8属性选择器

属性选择器

选择【含有】指定属性的元素

① 语法: [属性名]

② 例子：p[title]{color:orange;}

   <!DOCTYPE html>
   <html>
   <meta charset-"UTF-8">
   <title>标签名 </title>
   <head>
    <style>
        p[title]{
          color:orange;
        }
    </style>
   </head>
   <body>
    <p title="abc">abc</p>
    <p title="123">123</p>
    <p>abc123</p>
   </body>
   </html>

选择【含有】指定属性和属性值的元素

① 语法: [属性名=属性值]

② 例子: p[title=abc]{color:orange;}
选择属性值以指定值开头的元素(^=)

① 语法: [属性名^=属性值]

② 例子: p[title^=abc]{color:orange;}
选择属性值以指定值结尾的元素($=)

① 语法:[属性名$=属性值]

② 例子： p[title$=abc]{color:orange;}
选择属性值中含有指定值的元素

① 语法:[属性名*=属性值]

② 例子: p[title*=abc]{color:orange;}

3.9伪类选择器（一个冒号）

伪类(不存在的类，特殊的类)，用来描述一个元素的特殊状态。比如：第一个子元素，被点击的元素（①:focus用于元素已经选中或者获得了焦点，点击或选择输入框、文本区域），鼠标移入的元素（:hover）

伪类一般情况下使用冒号：开头。

3.9.1选择第一个子元素

选择第一个子元素

① 语法:父元素>子元素: first-child

② 例子:ul > li：first-child{ color：red;}

3.9.2选择最后一个子元素

选择最后一个子元素

① 语法:父元素>子元素:last-child

② 例子:ul>li : last-child{color :red;}

3.9.3选择第任意个子元素

选择第任意个子元素

① 语法：父元素>子元素:nth-child( n )

② 例子：ul>li :nth-child（1）{color:red;}

表示ul的第一个[子元素li]，而不是li的第一个资源(根据所有的子元素)

③ :nth-child（1）:表示第一个子元素，可以是不同类型

④ :nth-child（2）:表示第二个子元素，可以是不同类型

⑤ :nth-child（n）:表示第0至正无穷的子元素（选择全部子元素）

⑥ :nth-child（2n）:表示偶数位的子元素

⑦ :nth-child (even)：表示偶数位的子元素

⑧ :nth-child（2n+1)：表示齐数位的子元素

⑨ :nth-child（odd）:表示齐数位的子元素

⑩:nth-child(n+5) : nth-child(-n+10)：表示第5个子元素到第10个子元素

(n+5)从第5个开始往后数全部

(-n+10)从第10个开始往前数全部

取其交集【: 表是其范围(开始点:结束点 )】

注意:以上这些伪类根据【所有的子元素】进行排序。

3.9.4选择同类型的子元素

选择相同类型的第一个子元素

① 语法：父元素>子元素:first-of-type

② 例子： ul>li:first-of-type
选择相同类型的最后一个子元素

① 语法：父元素>子元素:last-of-type

② 例子：ul>li:last-of-type
:nth-of-type（指定数）: 表示相同类型的任意子元素

① 语法：父元素>子元素:nth-of-type（指定数)

② 例子：ul>li:nth-of-type（指定数）

注意:这几个伪类的功能和上述的类似不同点是根据【同类型的元素】进行排序

3.9.5否定选择器

否定伪类:not（）选择指定的元素从选择器中去除

① 语法:not（）

② 例子:ul>li:not( :nth-child( 3 ) )

表示选择所有的子元素，去除ul的第三个[子元素li]

3.9.6超链接伪类

超链接伪类

① a:link 未访问超链接的状态

② a:visited 已经访问过超链接的状态

③ a:hover 鼠标悬停超链接时的状态

④ a:active 鼠标点击超链接未释放的状态
注意：

① a:hover必须位于a:link和a:visited之后，这样才能生效。（优先级）

② a:active必须位于a:hover之后，这样才能生效。（优先级）

③ hover active 可以绑定给其他元素 , link visited 只可以绑定给a元素

3.10伪元素选择器（两个冒号）

伪元素选择器:表示页面中的一些特殊的并不真实的存在的元素(特殊的位置)
伪元素( $\color{blue}{inline元素}$ ，不会独占一行)

① ：：first-letter 表示总选择第一个字母
```
  p::first-letter{font-size:50px;}
```
② ：：first-line 表示总选择第一行
```
  p::fist-line{background:yellow;}
```
③ ：：selection 表示鼠标选中的内容
```
 p::selection{background:red;}
```
④ ：：before 表示总在某个元素内的最前【必须设置content】
```
   <!doctype html>
   <html>
     <head>
       <style>
      		div::before{
      		content:'abc';/*具体的值*/ 
      		color=red;
      			}
       </style>
      </head>
     <body>
       <div>Hello Hello How are you </div>
     </body>
   </html>
```
⑤ ：：after 表示总在某个元素内的最后【必须设置content】
```
   <!doctype html>
   <html>
   	<head>
   		<style>
   		div::after{
   		content:'haha';/*具体的值*/ 
  	    color=blue;
   			}
   		</style>
  	 </head>
   <body>
   		<div>Hello Hello How are you </div>
   </body>
  </html>
```
注意:before 和after的伪元素必须【结合content属性】具体的值来使用

4.样式的继承

在这里插入图片描述

样式的继承：为一个元素设置的样式同时也会应用到它的后代元素上。
样式的继承发生在祖先元素和后代元素之间的。

会继承的css属性

字体属性、文本属性(除了vertical-align)、文字颜色、行高等

不会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式等布局、背景相关的属性

5.选择器的优先级

样式的冲突：通过不同的选择器选择相同的元素，选中相同的元素，并且为相同的样式设置不同的值。此时就发生了样式的冲突。
发生样式冲突时，应用那个样式由选择器的权重（优先级）决定。

选择的权重：

**内联样式( 1,0,0,0 ) **

**id选择器( 0,1,0,0 ) **

**类和伪类选择器( 0,0,1,0 ) **

**元素选择器( 0,0,0,1 ) **

**通配选择器( 0,0,0,0 ) **

继承的样式没有优先级，比通配选择器、默认样式都低

在这里插入图片描述

   <!doctype html>
   <html>
   <head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
    #box1{
        background-color:orange;
    }
    div{
        background-color:yellow;
    }
    .red{
        background-color:red; 
    }
    
   </style>
   </head>
   <body>
    <div id="box1" class="red">我是一个div</div>
   </body>

比较含有并集选择器的优先级时，则是单独计算，优先级越高，则优先显示。
比较含有交集选择器的优先级时，需要将所有的选择器进行相加，最后优先级越高，则优先显示。

注意:选择器的累加不会超过其最大的数量级，类选择器优先级累加再高也不会超过id选择器的优先级。（不会跨级）
如果优先级计算之后优先级相同，此时则优先使用靠下的样式。
可以在某一个样式的后边添加！important，则此时改样式会获取到最高的优先级，甚至超过内联样式。

注意:在开发过程一定要慎用。

6.单位

6.1长度单位

像素（px）

① 屏幕(显示器)实际上是由一个一个的小点点（像素）构成的。

② 不同屏幕的像素大小是不同的，像素越小（细腻）的屏幕显示的效果越清晰。
百分比（%）

① 百分比可以设置属性相对于父元素属性的百分比

② 设置百分比可以使用子元素的属性跟随父元素的属性的改变而改变。
em

① em是相对于元素的字体大小来计算的，1em=1font-size=16px（默认）

② em相对于自身字体大小的改变而改变

【注意】如果自身没有设置字体大小，会找父元素的字体大小，如果根元素也没有设置字体大小，会使用默认字体大小16px。
rem

① rem是相对于**< html>根元素的字体大小来改变计算**

【注意】如果根元素没有设置字体大小，会使用默认字体大小16px。
vw
vh

6.2颜色单位

颜色名

比如：red、orange、yellow、green、cyan、blue、purple······

$\color{orange}{transparent(可选值)}$ :透明的效果
RGB值

① RGB直通过三种颜色的不同浓度来调配出不同的颜色。

② [R - red] [G:green] [B blue]

③ 每一种颜色的范围在 0~255或者(0% - 100%)

④ 语法：RGB(红色 , 绿色 , 蓝色)
```
  background-color:red;
  background-color:rgb(255,0,0);
  background-color:rgb(0,255,0);
  background-color:rgb(0,0,255);
```
RGBA值

① 在RGB的基础上增加了一个a表示不透明度

② 需要四个值，前三个和RGB一样，第四个表示不透明度。

1: 表示完全不透明 0表示完全透明 0.5表示半透明

③ 语法：RGB(红色 , 绿色 , 蓝色，不透明度)
十六进制RGB值(HEX)

① 语法：#红色绿色蓝色( 两位两位为一组 )

② 颜色浓度通过00-FF

③ 如果颜色两位重复可以进行简写#aabbcc —> #abc
```
  background-color:#ff0000;
  background-color:#00ff00;
  background-color:#0000ff;
```
十六进制RGBA值(HEXA)

① 语法：#红色绿色蓝色透明度( 两位两位为一组 )

② 颜色浓度和透明度通过00-FF

③ 如果颜色两位重复可以进行简写#aabbccff —> #abcf
HSL值

① H 色相，( 0度 - 360度)单位为：deg（可以不写）

② S 饱和度，颜色的浓度百分比（0%-100%，0%全灰，100%没有灰）

③ L 亮度，颜色的亮度百分比（0%-100%，0%没亮度黑色，100%太亮了白色）

④ 语法：hsl（色相，饱和度，亮度）
```
  background-color:hsl(0,100%,50%);
```
HSLA值

① A透明度，1: 表示完全不透明 0表示完全透明 0.5表示半透明

② 语法：hsl（色相，饱和度，亮度，透明度）

7.布局

7.1文档流（normal flow）

7.1.1文档流简介

网页是一个多层的结构，一层压着一层。通过CSS可以分别为每一层来设置样式。
对于用户只能够看到最顶层的一层。
网页最底下的一层称为文档流，文档流是网页的基础。所创建的元素默认都是在文档流中进行排列。
元素的主要两个状态
- 在文档流中
- 不在文档流中（脱离文档流）默认高度宽度都会被内容撑开

7.1.2文档流元素的特点

元素在文档流中的特点：
- 块元素（block）
  
  ① 块元素在页面中会独占一行。
  
  ② 块元素在页面中自上向下垂直排列
  
  ③ 默认宽度【没有设置宽度】是父元素的全部（会把父元素撑满）
  
  ④ 默认高度【没有设置高度】是被内容撑开（子元素的高度）
  
  ⑤ 可以通过css设置宽高
- 行内元素（inline）
  
  ① 行内元素不会独占一行。
  
  ② 行内元素在页面中自左向右水平排列。
  
  ③ 如果一行之中不能容纳所有的行内元素，则元素会换到第二行继续自左向右水平排列。
  
  ④ 默认宽度【没有设置高度】是被内容撑开
  
  ⑤ 默认高度【没有设置高度】是被内容撑开
  
  ⑥ 不可以通过css设置宽高
- 行内块元素（inline-block）
  
  ① 行内块元素不会独占一行
  
  ② 行内块元素在页面中自左向右水平排列。
  
  ③ 如果一行之中不能容纳所有的行内元素，则元素会换到第二行继续自左向右水平排列。
  
  ④ 默认宽度【没有设置高度】是被内容撑开
  
  ⑤ 默认高度【没有设置高度】是被内容撑开
  
  ⑥ 可以通过css设置宽高

7.1.3总结文档流元素的显示模式

块元素（block）

1.主体结构标签：< html > 、< body >

2.排版标签：< h1 > — < h6 > 、< hr > 、< p > 、< pre > 、< div >

3.列表标签：< ul > 、< ol > 、< li > 、< dl > 、< dt > 、< dd >

4.表格相关标签：< table > 、< caption > 、< thead > 、< tbody > 、< tfoot > 、< tr >

5.< form > 、< option >
行内元素（inline）

1.文本标签：< br > 、< em > 、< strong > 、< sup > 、< del > 、< ins >

2.< a > 、< label>
行内块元素（inline-block）

1.图片：< img >

2.单元格：< td > 、

3.表单控件：< input > 、< textarea > 、< select > 、< button >

4.框架标签：< iframe >

7.1.4修改文档流元素的显示模式

通过 $\color{orange}{css}$ 中的 $\color{orange}{display}$ 属性可以修改元素的显示模块，常用值如下

值	描述
$\color{orange}{none}$	元素会被隐藏
$\color{orange}{block}$	元素将作为块级元素显示
$\color{orange}{inline}$	元素将作为内联元素显示
$\color{orange}{inline-block}$	元素将作为行内块元素显示

7.2盒子模型（box model）

7.2.1盒子模型简介

在这里插入图片描述

CSS将页面中的所有的元素设置为一个矩形的盒子。
将不同矩形的盒子排放到不同的位置。
通过设置盒子的大小和盒子的位置来实现网页的布局。

7.2.2盒子模型组成部分

内容区（content）

① 元素中的所有子元素和文本内容都在内容区排列。

② 内容区的大小由width和height两个属性来设置

-width 设置内容区的宽度

-height 设置内容区的盖度
内边距（padding）

① 内容区和边框之间的距离是内边距

② 一共有四个方向的内边距，可以分别指定四个方向的内边距

-上边距 $\color{orange}{padding-top}$

-右边距 $\color{orange}{padding-right}$

-下边距 $\color{orange}{padding-bottom}$

-左边距 $\color{orange}{padding-left}$

③ 内边距的设置大小会影响整个盒子的大小

④ 内容区的背景颜色会【延伸】到内边距上

⑤ 一个盒子的【可见框】的大小：由【内容区，内边距，边框】共同决定。

⑥ 内边框的属性

$\color{orange}{padding}$ 可以同时指定四个方向的内边距。
- 属性值的情况【中间为空格】：
  
  四个值：上右下左
  
  三个值：上左右下
  
  两个值：上下左右
  
  一个值：上下左右
边框（border）

① 边框属性盒子的边框，边框和边框内部属于盒子内部。出了边框都属于盒子外部。

② 边框的大小会影响整个盒子的大小

③ 设置边框需要至少三个样式来设置

-边框的宽度 $\color{orange}{border-width}$ ：

-边框的颜色 $\color{orange}{border-color}$ ：

-边框的样式 $\color{orange}{border-style}$ ：
```
  border-width:10px;
  border-color:red;
  border-style:solid;
```
④ 边框的属性

可以指定四个边的样式border-xxx-属性，xxx可以是top，right，bottom，left。

边框的宽度可以不写，默认值为3px；

$\color{orange}{border-width}$ 可以同时指定四个方向的边框的宽度。
- 属性值的情况：
  
  四个值：上右下左
  
  三个值：上左右下
  
  两个值：上下左右
  
  一个值：上下左右
除了border-width还有一组border-xxx-width分别指定四个边框宽度

$\color{orange}{border-color}$ 可以同时指定边框的颜色，同样可以分别指定四个边框颜色border-xxx-color
- 属性值的情况：
  
  四个值：上右下左
  
  三个值：上左右下
  
  两个值：上下左右
  
  一个值：上下左右
边框的颜色可以不写，则自动使用【前景色】color的颜色值；
```
  border-color:orange   red yellow green;
  border-color:orange;
```
$\color{orange}{border-style}$ 可以同时指定边框的样式，同样可以分别指定四个边框样式border-xxx-style

-solid 表示实线

-dotted 表示点状虚线

-dashed 表示线状虚线

-double 表示双实线
- 属性值的情况：
  
  四个值：上右下左
  
  三个值：上左右下
  
  两个值：上下左右
  
  一个值：上下左右
边框的样式不写默认为none 表示去除边框【必须指定】

【注意】：

① $\color{orange}{border: none;}$ 表示不设置任何边框，边框不存在于元素上，不占位置。（推荐）

② $\color{orange}{border:0;}$ 表示将边框宽度设置为 0，边框依旧存在于元素上，只是由于其宽度为 0，因此不可见。相当于将边框线条去掉，但是还保留了边框的位置（不推荐）

$\color{orange}{border简写属性}$ 通过该属性可以同时设置边框的所有相关样式，并且没有顺序要求。
```
  border-width:10px;
  border-color:red;
  border-style:solid;
  
  border:10px solid red;
```
⑤ $\color{orange}{指定border}$

除了border以外还有border-XXX

-border-top

-border-right

-border-bottom

-border-left
```
  border-top:10px      solid red;
  border-left:10px solid red;
  border-bottom:10px solid red;
  
  border:10px solid  red;
  border-right:none;
```
外边距（margin）

① 外边距不会影响盒子可见框的大小，但是外边框会影响盒子的位置(布局)。

② 一共有四个方向的外边距，可以分别指定四个方向的外边距

-上外边距 $\color{orange}{margin-top}$

设置一个正值，【元素】则会向下移动。

-右外边距 $\color{orange}{margin-right}$

设置一个正值，【元素的右边元素】则向右移动。

-下外边距 $\color{orange}{margin-bottom}$

设置一个正值，【元素的下边元素】则会向下移动。

-左外边距 $\color{orange}{margin-left}$

设置一个正值，【元素】则会向右移动。

设置负值，元素则会往相反方向移动。

③ 元素在页面中按照自左向右的顺序排列。所以默认情况下，设置 左和上外边距则会移动元素自身。而设置下和右边距则会移动其他元素。

③ 外边距的属性

$\color{orange}{margin}$ 可以同时指定四个方向的内边距。
- 属性值的情况：
  
  四个值：上右下左
  
  三个值：上左右下
  
  两个值：上下左右
  
  一个值：上下左右
④ 外边距的大小会影响带盒子实际占用的大小。

⑤ 行内元素可以设置左右外边距和上下外边距，只不过由于行内元素的特点，上下外边距不起作用

7.2.3盒子模型的水平布局

元素的水平方向的布局，元素在其父元素的水平方向的位置由以下的几个属性共同决定。
- margin-left：
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
一个元素在其父元素中，水平布局中必须满足以下的等式。

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度（必须满足）

0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
- 以上等式必须满足，如果相加结构等式不成立，则称为过度约束，则等式会自动调整。
- 如果这个七个值中**（设置固定宽度）没有auto **的情况，则浏览器会自动调整右外边距 $\color{orange}{margin-right}$ 的值使得等式满足。
  
  0 + 0 + 0 + 200 + 0 + 0 + 0= 800 ，则margin-right为600
  
  0 + 0 + 0 + 1000 + 0 + 0 + 0 = 800，则margin-right为-200。
  
  100 + 0 + 0 + 200 + 0 + 0 + 400 =800，则margin-right 为500。
- 其中七个值的三个值可以设置为auto的情况，则浏览器会自动调整为auto的值使得等式满足。
  
  ① width（没设置默认为auto）
  
  ② margin-left
  
  ③ margin-right
  
  0 + 0 + 0 + auto + 0 + 0 + 0 = 800 ，则auto为800 。
  
  0 + 0 + 0 + auto + 0 + 0 + 200 = 800，则auto为600。
- 如果将一个宽度width和一个外边距设置为auto，则宽度width会调整到最大，设置为auto的外边距自动调整为0。
- 如果将三个值都设置为auto，则宽度width为最大，设置为auto的外边距自动调整为0。
- 如果将两个外边距设置为auto，宽度width固定，则会将左右外边距设置为相同值。
  
  ① 利用这个特点来使一个元素是在父元素中水平居中。
  
  ② 示例：需要有一个宽度width，在设置外边距 margin：0 auto。
```
  width:XXXpx;
  margin:0 auto;
```

7.2.4盒子模型的垂直方向布局

默认情况下( 不设置高度 )，父元素的高度被（内容）【子元素高度】撑开
子元素是在父元素的内容区中顺序排列。如果子元素的高度大小超过了父元素的高度大小，则子元素会从父元素中溢出。
处理子元素溢出问题
- 在父元素中添加overflow属性
  
  ① $\color{orange}{visble( 可选值 )}$ :默认值，子元素会从父元素中溢出，在父元素外部的位置显示。
  
  ② $\color{orange}{hidden(可选值)}$ :子元素溢出部分将会被裁剪，不会被显示。
  
  ③ $\color{orange}{scroll( 可选值)}$ :生成两个滚动条，通过滚动条来查看完整的内容。
  
  ④ $\color{orange}{auto(可选值)}$ :根据需要生成滚动条，不需要就不生成。
- 在父元素中添加overflow-x属性[水平溢出]
- 在父元素中添加overflow-y属性[垂直溢出]
一个元素在其父元素中，垂直布局中的等式 : margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
要让一个文字在父元素中垂直居中,只需将父元素的行高line-height设置为一个和高height一样的值。

7.2.5盒子模型的外边距折叠

垂直方向相邻外边距的重叠（折叠）:

相邻元素的垂直方向的外边距发生重叠现象。
兄弟元素：

① 两个兄弟元素之间的相邻外边距都为正值，则取两者之间的较大值。

② 两个兄弟元素之间的相邻外边距为一正一负，则取两者值之和。

③ 两个兄弟元素之间的相邻外边距都为负值，则取两者之间绝对值的较大者。

说明：兄弟元素之间的相邻外边距的重叠，对于开发是有利的，【不需要】进行处理。
父子元素：

说明：父子元素之间的相邻外边距，子元素会传递给父元素(上外边距)，造成的重叠会影响页面的布局，【必须】进行处理。

① 可以利用内边距padding，父元素设置内边距，同时重新计算内容区高度，不用外边距。

② 可以利用边框，父元素设置边框宽度将相邻外边距隔开，同时重新计算内容区高度，使其父子元素的外边距不相邻。

7.2.6行内元素的盒子模型

行内( 内联 )元素不支持设置宽度width和高度height
行内元素可以设置内边距padding，但是垂直方向的内边距padding不会影响页面的布局【位置】。
行内元素可以设置边框border，但是垂直方向的边框border不会影响页面的布局【位置】。
行内元素可以设置外边距margin，但是垂直方向的外边距margin不会影响页面的布局【位置】【水平方向生效，垂直方向不生效，水平方向外边距相累加】。
设置元素显示的类型
- 添加display属性
  
  ① $\color{orange}{inline( 可选值 )}$ :将元素设置为行内元素
  
  ② $\color{orange}{block( 可选值 )}$ :将元素设置为块元素
  
  ③ $\color{orange}{inline-block( 可选值 )}$ :将元素设置为行内块元素，改元素既可以设置宽度和高度，又不会独占一行
  
  ④ $\color{orange}{table( 可选值 )}$ :将元素设置为一个表格
  
  ⑤ $\color{orange}{none( 可选值 )}$ :元素不在页面当中显示【不占据位置】
设置元素显示的状态
- 添加visibility属性
  
  ① $\color{orange}{visible( 可选值 )}$ :默认值，元素在页面中正常显示
  
  ② $\color{orange}{hidden( 可选值 )}$ :元素在页面中隐藏不显示，但是依然会【占据页面位置】。

7.2.7盒子的大小

默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定。
设置盒子尺寸的计算方式（设置width和height的作用）
- 添加box-sizing属性
  
  ① $\color{orange}{content-box( 可选值 )}$ :默认值，宽度和高度用来设置内容区的大小。
  
  ② $\color{orange}{border-box( 可选值 )}$ :宽度和高度用来设置整个盒子可见框的大小，自动调整内容区的空间。【width 和 height指的是内容区和内边距和边框的总大小】

7.2.8边框轮廓阴影和圆角

边框的大小会影响整个盒子的大小，但会影响页面的布局【位置】
轮廓的大小不会影响整个盒子的大小，但不会影响页面的布局【位置】
outline属性是用来设置元素的轮廓线，用法和border相同，两者不同点是 : 轮廓不会影响到可见框的大小。
box-shadow属性用来设置元素的阴影效果，而阴影不会影响到页面的布局
- 设置阴影需要用box-shadow来设置，不会影响页面的布局
  
  ① $\color{orange}{h-shadow( 必需值 )}$ :水平阴影的位置( 水平偏移量 )，正值向右移动，负值向左移动
  
  ② $\color{orange}{v-shadow( 必需值 )}$ :垂直阴影的位置( 垂直偏移量 )，正值向下移动，负值向上移动
  
  ③ $\color{orange}{blur( 可选值 )}$ :阴影的模糊半径距离
  
  ④ $\color{orange}{color( 可选值 )}$ :阴影的颜色
  
  ⑤ $\color{orange}{spread( 可选值 )}$ :阴影的大小
  
  ⑥ 语法：box-shadow: （水平偏移量垂直偏移量阴影的模糊半径阴影的颜色）
box-radius属性用来设置元素的圆角效果，圆角的半径大小画圆角，。

① 一共有四个方向的外边距，可以分别指定四个方向的外边距

- $\color{orange}{border-top-left - radius}$ :边框的左上圆角：

- $\color{orange}{border-top-right - radius}$ :边框的右上圆角

- $\color{orange}{border-bottom-right-radius}$ :边框的右下圆角

- $\color{orange}{border-bottom-left-tadius}$ :边框的左下圆角
- 可以设置设置【水平圆角半径】和【垂直圆角半径】
  
  border-top-left-radius:50px 100px;
- 如果只设置一个圆角半径,水平圆角半径与垂直圆角半径【相同】
  
  border-top-left-radius:50px;
② 边框圆角的属性

$\color{orange}{border-radius}$ 可以同时指定四个方向的内边距。
- 属性值的情况【中间为空格】：
  
  每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
  
  四个值：左上角右上角右下角左下角：
  
  三个值：左上角 [右上角左下角] 右下角
  
  两个值：[左上角右下角] [右上角左下角]
  
  一个值：[左上角右下角右上角左下角]
```
border-top-left-radius:100px 50px;
border-top-right-radius:50px 20px;
```
border-bottom-right-radius:20px 10px;
border-bottom-left-radius:10px 5px;
/border-radius简写属性–遵循上右下左/
border-radius:100px 50px 20px 10px / 50px 20px 10px 5px;
```
③ **元素设置为圆形**，将border-radius的属性值设置为**50%**【==**前提：元素宽高相同，是正方形**==】

`border-radius:50%;`
```

7.2.9浏览器的默认样式

在这里插入图片描述

通常情况，浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面的布局

通常情况下,编写网页时必须要去除浏览器的默认样式（PC端）

  /*临时办法，没有完全清楚*/
  *{
      margin:0;
      padding:0;
  }
  /*也可以引入外部样式表-重置样式表*/
  <link rel="stylesheet" href="./css/reset.css">

8.浮动

8.1浮动的简介

通过浮动，可以使得一个元素向其父元素的左侧或者右侧移动。
- 添加float属性来设置元素的浮动
  
  ① $\color{orange}{none( 可选值 )}$ :默认值，元素不浮动
  
  ② $\color{orange}{left( 可选值 )}$ :元素向左边浮动
  
  ③ $\color{orange}{right( 可选值 )}$ :元素向右边浮动
  
  float:left;
  
  float:right;
- 注意：元素设置浮动以后，水平布局的等式便不需要强制成立。
- 注意：元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置【布局】，所以【文素下边的还在文档流当中的元素】会自动向上移动。
- 浮动的特点
  
  ① 浮动元素会完全脱离文档流，不在占据文档流当中的位置。下边文档流中元素自动向上移动。
  
  ② 设置浮动以后，元素会向父元素的左侧或右侧移动。
  
  ③ 浮动元素默认不会从父元素中移出（一堵墙）。
  
  ④水平方向 浮动元素向左或向右移动时，不会超过它前边的其它浮动元素的位置【结构位置】
  
  ⑤ 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移【要将浮动元素的上边非浮动元素删除，要么上边非浮动元素也设浮动】
  
  ⑥ 垂直方向浮动元素不会超过它【上一个相邻的浮动兄弟元素】，最多就是和上一个相邻的浮动兄弟元素一边齐或在它之下。
- 浮动总结
  
  浮动主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。

8.2浮动的特点

设置浮动后，元素脱离文档流，文素下边的还在文档流当中的元素会自动向上移动，【但是浮动元素不会盖住文字】，文字会自动环绕在浮动元素的周围，所以利用这个特点来设置文字环绕图片的效果
元素设置浮动以后，将会从文档流中脱离 ; 从文档流脱离后，元素的一些特点也会发生变化
- 块元素
  
  ① 块元素不再独占页面的一行。
  
  ② 脱离文档流之后，块元素的宽度和高都默认被内容撑开【没有指定宽度和高度】
- 行内元素
  
  ① 行内元素脱离文档流以后会变成块元素，特点和块元素一样【宽高生效可以设置，但不能设行高line-height】
脱离文档流以后，不需要再区分块和行内元素【两者一样为块元素，默认被内容撑开】。

9.网页的布局

9.1常用的布局类名

位置	类名
顶部导航条	$\color{orange}{topbar}$
页头	$\color{orange}{header}$ 、 $\color{orange}{page-header}$
导航	$\color{orange}{nav}$ 、 $\color{orange}{navigator}$ 、 $\color{orange}{navbar}$
搜索框	$\color{orange}{search}$ 、 $\color{orange}{search-box}$
横幅、广告、宣传图	$\color{orange}{banner}$
主要内容	$\color{orange}{content}$ 、 $\color{orange}{main}$
侧边栏	$\color{orange}{aside}$ 、 $\color{orange}{sidebar}$
页脚	$\color{orange}{footer}$ 、 $\color{orange}{page-footer}$

9.2页面布局

大块宏观浮动，小块细节用定位

在这里插入图片描述

网页的头部header标签
网页的主体内容main标签
- 左侧导航nav标签
- 中间的文章内容article标签
- 右侧边栏aside标签
网页的底部footer标签

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题名</title>
    </head>
    <body>
        <!--使用语义化标签-->
        <!--创建头部-->
		<header></header>

<!--创建主体 一个网页只能有一个main-->
        <main>
        <!-- 左侧导航 -->
        <nav></nav>
        <!-- 中间的文章内容 -->
        <article></article>
        <!-- 右边的侧边栏 -->
        <aside></aside>
        </main>
        
        <!--创建底部-->
        <footer></footer>
    </body>
</html>

9.3布局小技巧

① 行内元素、行内块元素，可以被父元素当做文本处理

即：可以处理文本对齐一样，去处理行内元素、行内块元素在父元素中的对齐。

例如：text-align 、text-indent 、line-height 等

② 如何让子元素，在父亲中**水平居中**：

若子元素为**块元素**，给父元素加上：margin：0 auto

若子元素为**行内元素、行内块元素**，给父元素加上：text-align：center

行内元素可以设置左右外边距和上下外边距，只不过由于行内元素的特点，上下外边距不起作用；但是无法设置margin：0 auto；

③ 如何让子元素，在父亲中**垂直居中**：

若子元素为**块元素**，给子元素加上：margin - top，值为：(父元素的内容区高度 - 子元素盒子总高) /

若子元素为**行内元素、行内块元素**，每个子元素都加上：vertical-align：middle

【注意】：若想要绝对垂直居中，父元素字体大小设置为0

10.高度塌陷

10.1高度塌陷的简介

一般情况下，页面布局父元素不设置高度，由该子元素撑开（内容多，高度高；内容少，高度低）
当子元素浮动后，其会完全脱离文档流，从而将会无法撑起父元素的高度，导致父元素的高度丢失。
父元素高度丢失以后，其下面的元素会自动上移，导致页面的布局混乱。
高度塌陷是浮动布局中比较常见的一个问题，这个问题必须要进行处理。-- 父元素设置高度。

10.2块级格式化环境（BFC）

BFC（Block Formating Context）: 块级格式化环境
BFC是一个CSS中的一个隐含属性，可以为一个元素开启BFC；当开启BFC属性之后，该元素会变成一个独立的布局区域。
元素开启BFC属性之后的特点： 还存在缺陷和不足。

① 开启BFC的元素，不会被浮动元素所覆盖。

② （父/子）元素开启BFC元素，子元素和父元素的外边距不会折叠【解决父子元素外边距重叠】

③ 父元素开启BFC的元素，可以包含浮动的子元素【解决高度塌陷】
间接开启元素的BFC属性的方式：
- 设置父/子元素的浮动 $\color{orange}{float}$ - 脱离文档流（不推荐：父元素也脱离文档流，宽和高被内容撑开）
- 将父/子元素设置为行内块元素、表格元素
  
  ① $\color{orange}{inline-block}$ （不推荐，行内块元素的宽高是默认被内容撑开的）
  
  ② $\color{orange}{table}$
- 添加元素的overfloat属性，属性值设非visible（默认）的值元素设置 overflow: hidden或overflow: auto，开启BFC以使其元素可以包含浮动的元素。
① $\color{orange}{overflow:hidden(可选值)}$ （临时方法）

② $\color{orange}{overflow:auto(可选值)}$

10.3清除浮动的影响（clear属性）

在这里插入图片描述

由于box1的浮动，导致box3位置上移【浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围】，也就是box3受到了box1浮动的影响，位置发生了改变。
如果不希望某个元素因为其它元素浮动的影响而改变位置，可以通过clear属性来清楚浮动元素对当前元素所产生的影响。
清除浮动元素对当前元素所产生的影响
- 添加 $\color{orange}{clear}$ 属性
  
  ① $\color{orange}{left( 可选值 )}$ :清楚左侧浮动元素对当前元素的影响。
  
  ② $\color{orange}{right( 可选值 )}$ :清楚右侧浮动元素对当前元素的影响。
  
  ③ $\color{orange}{both( 可选值 )}$ :清楚两侧中最大影响【最大的上外边距】的那侧浮动元素对当前元素的影响。
- 原理：设置 $\color{orange}{clear}$ 属性清楚浮动以后，浏览器会自动为元素添加一个上外边距，使其位置不受其他元素影响。

10.4高度塌陷的最终解决方案（利用伪元素清除浮动）

利用.box1:after伪元素选择器，必须设置content ，将content:’ ’ ，同时将伪类元素转为块元素使其独占一行，再添加clear属性清除浮动元素对当前元素所产生的影响，浏览器会自动为元素添加一个上外边距，使其位置不受其他元素影响。
```
<style>
    .box1{
        border:10px red solid;
    }
    
    .box2{
        width:100%;
        height:100px;
        background-color:green;
        float:left;
    }
    /*高度塌陷的最终解决方案*/
    /*伪元素(行内元素 不独占一行)*/
    .box1::after{
        content:'';
        display:block;
        clear:both;
    }
</style>
```
【注意】：

① ：：after 表示总在某个元素内的最后(不是在这个元素之后) 【必须设置content】

② 通过伪元素添加标签，不是用html添加标签。

③ 伪元素默认伪行内元素会独占一行，需要将其修改模式块元素，使其独占一行

10.5外边距折叠的最终解决方案（利用伪元素）

相邻元素的垂直方向的外边距发生重叠现象。
父子元素之间的相邻外边距，子元素会传递给父元素(上外边距)，造成的重叠会影响页面的布局，【必须进行处理】

利用.box1::before伪元素选择器，必须设置content ，将content:’ ’ ,同时将伪类元素转为表格元素，可以将两个元素隔开,还不会占位置用来解决外边距折叠。

在这里插入图片描述

<style>
    .box1{
        width:200px;
        height:200px;
        background-color:green;
    }
    
    .box2{
        width:100px;
        height:100px;
        background-color:orange;
        margin-top:100px
    }
    
    /*外边距折叠的最终解决方案*/
    .box1::before{
        content:'';
        /*不会占位置将两个元素隔开*/
        display:table;
    }
</style>

【注意】：

① ：：before 表示总在某个元素内的最前(不是在这个元素之前) 【必须设置content】

② 伪元素默认伪行内元素会独占一行，需要将其修改模式块元素，但是没有高度（是被内容撑开），需将模式修改伪表格元素不会占位置将两个元素隔开

10.6 clearfix类

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题当遇到这个问题时，给父元素直接使用clearfix这个类即可。

  /* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题当遇到这个问题时,直接使用clearfix这个类即可*/
        .clearfix::before,.clearfix::after
{
			/* 加入空字符串内容  */
            content: '';
            /* 显示为表格 */
            display: table;
			/* 清除浮动元素对当前元素所产生的影响 */
            clear: both;
}

11.定位

定位是一个更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
- 使用position属性来设置定位
  
  ① $\color{orange}{static( 可选值 )}$ : 默认值，元素是静止的，没有开启定位。
  
  ② $\color{orange}{relative( 可选值 )}$ ：开启元素的相对定位
  
  ③ $\color{orange}{absolute( 可选值 )}$ ：开启元素的绝对定位
  
  ④ $\color{orange}{relative( 可选值 )}$ ：开启元素的固定定位
  
  ⑤ $\color{orange}{sticky( 可选值 )}$ ：开启元素的粘滞定位

11.1相对定位

当元素的position的属性值设置为relative时，则开启了元素的相对定位。
相对定位的特点：

① 元素开启相对定位后，如果没有设置偏移量，【元素】不会发生任何变化

② 相对定位是参照于元素在文档流中的位置进行定位的【相对于原来的位置】，上就参照于原来上侧的位置，左就参照于原理左侧的位置

③ 相对定位会提升元素的层级

④ 相对定位不会使得元素脱离文档流，没有脱离文档流

⑤ 相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素【是否可设宽高，是否独占一行】
偏移量（offset）:当元素【开启定位】以后，可以通过偏移量来设置元素的位置（布局）。
- 定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下只使用其中之一；top值越大，定位元素越向下移动；bottom值越大，定位元素越向上移动。
- 定位元素水平方向的位置由left和right两个属性控制；left值越大，定位元素越向右移动；right值越大，定位元素越向右移动。
① $\color{orange}{top}$ : 定位元素和定位位置上边的距离

② $\color{orange}{bottom}$ ：定位元素和定位位置下边的距离

③ $\color{orange}{left}$ ：定位元素和定位位置左侧距离

④ $\color{orange}{right}$ ：定位元素和定位位置右侧距离

11.2绝对定位

当元素的position的属性值设置为absolute时，则开启了元素的绝对定位。
绝对定位的特点：

① 元素开启绝对定位后，如果没有设置偏移量，【元素的位置】不会发生任何变化

② 开启绝对定位后，元素会从文档流中脱离，默认高度宽度都会被内容撑开，不会占据页面的位置

③ 绝对定位会改变元素的性质（行内变成块，快的宽高）

④ 绝对定位会使元素提升一个层级

⑤ 绝对定位说相对于其【最近开启定位的包含块】也可以是绝对定位的包含块进行定位的
偏移量（offset）:当元素【开启定位】以后，可以通过偏移量来设置元素的位置（布局）。
包含块（containing block） :
- 绝对定位的包含块元素就是里当前元素最近的开启了定位的祖先【块】元素；如果所有的祖先元素都没有开启定位，则相对于初始包含快根元素< html >进行定位
- html（根元素，初始包含块）
```
<div><div></div></div>

<div><span><em></em></span></div>

```

11.3固定定位

当元素的position的属性值设置为fixed时，则开启了元素的固定定位。
固定定位也是一种特殊的绝对定位，所以固定定位的大部分特点都和绝对定位一样。
固定定位的特点：

① 元素开启固定定位后，如果没有设置偏移量，【元素的位置】不会发生任何变化

② 开启固定定位后，元素会从文档流中脱离高度宽度都会被内容撑开

③ 固定定位会改变元素的性质

④ 固定定位会使元素提升一个层级

⑤ 唯一的不同的点是固定定位【永远】参照于【浏览器的视口】进行定位

⑥ 固定定位的元素不会跟随网页的滚动条滚动，会固定在可视窗口中的某个位置。
偏移量（offset）:当元素【开启定位】以后，可以通过偏移量来设置元素的位置（布局）。

11.4粘滞定位（sticky）

当元素的position属性设置为sticky，则开启了元素的粘滞定位
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置之前滚动，到达某个位置时将其固定；当定位元素和定位位置上边的距离大于等于上边距，元素进行浮动；当定位元素和定位位置的上边的距离小于上边距，元素进行滚动。
粘滞定位说相对于其【body元素】进行定位的

11.5绝对定位元素的位置（布局）

11.5.1水平布局

水平布局：left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其包含块【内容区的宽度】具有9个值
当元素开启了绝对定位后：水平方向的布局等式就需要添加left 和 right两个值。
以上等式必须满足，如果相加结构等式不成立，则称为过度约束，则等式会自动调整
如果这个九个值中没有auto，width有固定值的情况，则浏览器会自动调整右边 $\color{orange}{right}$ 的值使得等式满足。

0 + 0 + 0 + 0 + 100 + 0 + 0 + 0 + 0= 500 ，则right为400
【前提left为0和right为0】其中九个值的三个值可以设置为auto的情况，则浏览器会自动调整为auto的值使得等式满足

① width（没设置默认为auto）

② margin-left

③ margin-right

0 + 0 + 0 + 0 + auto + 0 + 0 + 0 + 0 =500，则auto为500
left和right的默认值为auto，如果不指定left和right的值为0，则当等式不满足时，会自动调整这两个值，如设置margin就失效了
【前提left为0和right为0】left 和right设置为auto，不会使该元素素是在父元素中水平居中,要设置外边距为auto
【前提left为0和right为0】如果将一个宽度width和一个左/右外边距设置为auto，则宽度width会调整到最大，设置为auto的外边距自动调整为0
【前提left为0和right为0】如果将三个值都设置为auto，则左/右外边距都是0，宽度width为最大。
【前提left为0和right为0】如果将两个外边距设置为auto，宽度width固定，则会将左/右外边距设置为相同值。

11.5.2垂直布局

垂直布局：top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 其包含块【内容区的宽度】具有9个值
当元素开启了绝对定位后：垂直方向的布局等式就需要添加top 和 bottom两个值。
以上等式必须满足，如果相加结构等式不成立，则称为过度约束，则等式会自动调整
如果这个九个值中**没有auto，（height有固定值）**的情况，则浏览器会自动调整下边 $\color{orange}{bottom}$ 的值使得等式满足。
【前提top为0和bottom为0】其中九个值的三个值可以设置为auto的情况，则浏览器会自动调整为auto的值 使得等式满足。

① height（没设置默认为auto）

② margin-top

③ margin-bottom

0 + 0 + 0 + 0 + auto + 0 + 0 + 0 + 0 =500，则auto为500
top和bottom的默认值为auto，如果不指定top和bottom的值为auto，则当等式不满足时，会自动调整这两个值，如设置margin就失效了。
【前提top为0和bottom为0】top 和bottom设置为auto，不会使该元素素是在父元素中水平居中，要设置外边距为auto
【前提top为0和bottom为0】如果将一个高度height和一个上/下外边距设置为auto，则高度height会调整到最大，设置为auto的外边距自动调整为0
【前提top为0和bottom为0】如果将三个值都设置为auto，则上/下外边距都是0，高度height为最大。
【前提top为0和bottom为0】如果将两个上下外边距设置为auto，宽度width固定，则会将上/下外边距设置为相同值。

11.5.4设置定位元素宽、高占满包含快

定位元素宽度占满包含块的宽度：

可以给定位元素同时设置 $\color{orange}{left}$ 和 $\color{orange}{right}$ 为 $\color{orange}{0}$ ，不用设定位元素的宽高。
定位元素高度占满包含块的高度：

可以给定位元素同时设置 $\color{orange}{top}$ 和 $\color{orange}{bottom}$ 为 $\color{orange}{0}$ ，不用设定位元素的宽高。

11.5.4设置定位元素在包含块中水平垂直双居中

left：0

right：0

top：0

bottom：0

margin：auto

【注意】：该定位元素必须设置宽高，如果不设置定位元素的宽和高，该定位元素会占满包含块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: #bfa;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
           
            /* margin可以同时指定四个方向的内边距。 */
            /* 【垂直水平双居中】 属性值缺一不可 */
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
          
            /* 正常水平布局 (7个)
            margin-left + border-left + padding-left + width + padding-right + border-right + margin-right  = 其父元素内容区的宽度【必须满足】 */
            /* 当开启绝对定位水平布局 (9个) 增加了left和right
            left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其包含块【内容区的宽度】
            
            当元素开启了绝对定位后:
            水平方向的布局等式就需要添加left 和 right两个值
            此时规则和之前的一样,只是多添加了两个值*/   
            
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>
</html>

11.6元素的层级（z-index）

对于开启了定位元素，可以通过z-index属性来指定元素的层级

<!--z-index的属性值没有单位，不能是小数，只能是整数(正、负)-->
z-index:9999;

z-index属性需要一个整数作为参数，属性值越大，元素的层级越高；元素的层级越高，元素越优先显示。
如果元素的层级一样，则优先显示靠下的元素
祖先元素的层级再高也 $\color{orange}{不会盖住}$ 后代元素【祖先元素高，后代元素也随着变高，不会遮住孩子】

12.字体（font）

字体相关的样式
- $\color{orange}{font-size}$ 用来设置字体的大小
  
  ① 大小单位 em：相当于当前元素的一个font-size
  
  ② 大小单位 rem：相当于根元素的一个font-size
- $\color{orange}{font-family}$ 用来设置字体格式（字体族）
  
  ① serif （可选值）: 衬线字体
  
  ② sans-serif（可选值）: 非衬线字体
  
  ③ monospace（可选值）: 等宽字体
  
  ④ 指定字体的类别，浏览器会自动使用该类别下的字体。
  
  ⑤ font-family可以同时指定多个字体，多个字体使用逗号，隔开。字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。
  
  ⑥ @font-face将服务器的字体直接提供给用户去使用；有加载进度，版权和字体格式问题
- $\color{orange}{font-weight}$ 用来设置字体重量
  
  ① normal (可选值):默认值标准字符
  
  ② bold(可选值):粗体字符
  
  ③ bolder(可选值):更粗的字符
  
  ④ lighter(可选值):更细的字符
  
  ⑤ 100-900(可选值):由细到粗的字符，400 等同于 normal，而 700 等同于 bold
- $\color{orange}{font-style}$ 用来设置字体风格样式
  
  ① normal (可选值):默认值标准字体样式
  
  ② italic (可选值):斜体的字体样式
字体的简写属性
- $\color{orange}{字体简写属性}$ 通过该属性可以同时设总统框的所有相关样式
- 语法① font：字体大小字体族
```
font-size:50px
font-family:'Times New Roman',Times,serif;

font:50px 'Times New Roman',Times,serif;
```
- 语法② font：字体大小/行高字体族
```

font:50px/2 'Times New Roman',Times,serif
```
- 语法③ font：字体重量字体风格样式字体大小/行高字体族
```
font:bold italic 50px/2 'Times New Roman',Times,serif
```

13.图标字体（iconfont）

13.1图标字体的简介

网页中需要使用一些图标，可以通过图片来引入图标。当是图片大小比较大，并且非常的不灵活。
使用图标时候，可以将图标直接设置为字体，然后通过font-face的形式来引入字体。
可以通过使用字体的形式使用图标（矢量图）,可以对其设置样式（颜色大小等）

13.2font-awesome 使用方式1-类名

通过类名设置图标字体步骤:

① 下载地址:https://fontawesome.com/

② 解压压缩包 font awesome-free-5.10.2-web.zip

③ 将解压文件夹中的css和webfonts移动到项目中【注意:移入的css文件夹和webfonts文件夹必须同一级】

④ 将css文件夹里的all.css引入到网页中

⑤ 使用图标字体：
- 直接通过类名使用图标字体
- 固定class类中先写fas 或者fab，后写需要的类名
```

```

13.3font-awesome 使用方式2-伪元素

通过伪元素来设置图标字体步骤:

① 找到要设置图标的元素通过before或after选中

② 在content中设置字体的编码：\字体编码

③ 设置字体的格式

fab格式：

font-family:‘Font Awesome 6 Brands’;

fas格式：

font-family:‘Font Awesome 6 Free’;

font-weight:900;

<!--
伪元素选择器::before 表示总在某个元素的最前 【必须设置content】
  li::before{        
/* content:里面一对单引号写字体编码 */

content: '\f015';           
font-family:'Font Awesome 6 Free';          
font-weight:900;           
color: blue;          
margin-right: 10px;  
        }
-->

13.4font-awesome 使用方式3-实体

通过实体设置图标字体步骤：

① 固定class类中先写fas 或者fab

② &#x字体图标编码;
```

```

13.5iconfont 使用方式1-实体

通过实体设置图标字体步骤：

① 下载地址:https://www.iconfont.cn/

② 将图标加入购物车添加至项目

③ 将加入图标的项目下载至本地

④ 解压压缩包

⑤ 将解压文件夹中的除去demo.css和demo_index.html

⑥ 将iconfont.css引入到网页中

⑦ 使用图标字体：
- 固定class类中写为iconfont
- &#x字体图标编码;
```

```

13.5iconfont 使用方式2-类名

通过类名设置图标字体步骤：

① 直接通过类名使用图标字体

① 固定class类中先写为iconfont，后写需要的类名
```

```

13.6iconfont使用方式3-伪元素

通过伪元素设置图标字体步骤：

① 找到要设置图标的元素通过before或after选中

② 在content中设置字体的编码：\字体编码（x之后的为字体编码）

③ 设置字体的格式：

font-family:‘iconfont’;
```

```

14.行高（line-heigh）

行高 $\color{orange}{line-hight}$ 是指当行文字占用的实际高度（两行之间）
- 添加line-height属性来设置行高
  
  ① 大小单位（px、em）
  
  ② 单位可以设置一个无单位的整数 (行高为当前指定字体大小的倍数)
  
  ③ 行高默认的高度为 $\color{orange}{line-hight：1.33}$
- 行高可以用来设置多行文字间的行间距；行间距=行高-字体大小
- 行高通常大于或等于字体库框高度，因为它需要考虑行间距的影响
- 行高是会影响块级元素的实际高度的
**字体框高度 ** 是文字的字体所占据的高度，设置 $\color{orange}{font-size}$ 实际上就是设置字体框的高度
- 【行高】会在【字体框高度】的上下平均分配
  
  例如：行高为100px，字体框高为50px，字体框上下高为（100-50）/2
- 将行高设置和高度一样的值，可以使单行文字在一个元素中垂直居中
- 行内元素的文本高度通常指的是字体库框高度（也称为字体高度），而不是行高
- 行内元素和行内块元素也可以当做文本，【父元素】设置行高从而使元素垂直居中

15.文本

15.1文本颜色

文本颜色
- 添加color用来设置文本颜色（前景色）

15.2文本间距

文本间距
- 添加letter-spacing用来设置字母间距【包括中文】
```
letter-spacing:20px
```
- 添加word-spacing用来设置单词间距【不包括中文】(通过空格识别单词)
```
word-spacing:20px
```

15.3文本缩进

文本缩进
- 行内元素和行内块元素也可以当做文本，【父元素】设置文本缩进
- 添加text-indent用来设置段落文本首行缩进
  
  ① 如果值是负数，将第一行左缩进；
  
  ② 如果值是正数，将第一行右缩进；
```
text-indent:40px
```

15.4文本对齐方式

文本水平对齐方式
- 当 text-align 应用于块级元素时，它会使该元素内部所有行内内容在其水平上居中
- 行内元素和行内块元素也可以当做文本，【父元素】设置对齐方式调整文本对齐方式
- 添加text-align属性来设置文本的水平对齐方式
- text-align属性只能【影响内联元素（如文本），而对块级元素没有任何影响。】
  
  ① $\color{orange}{left( 可选值 )}$ :默认值，左侧对齐
  
  ② $\color{orange}{right( 可选值 )}$ :右侧对齐
  
  ③ $\color{orange}{center( 可选值 )}$ :居中对齐
  
  ④ $\color{orange}{justify( 可选值 )}$ :两端对齐
垂直对齐方式
- 【自身子元素】添加vertical-align属性来设置元素对齐的方式
- vertical-align 属性只能【影响内联元素（如文本）和表格单元格中的元素，而对块级元素没有任何影响。】
  
  ① $\color{orange}{baseline( 可选值 )}$ :默认值，基于父元素的基线（子元素的基线与父元素的基线对齐）小写字母的x的底线
  
  ② $\color{orange}{top( 可选值 )}$ :子元素的顶部与父元素的顶部对齐
  
  ③ $\color{orange}{bottom( 可选值 )}$ :子元素的底部与父元素的底部对齐
  
  ④ $\color{orange}{middle( 可选值 )}$ :子元素的中线与父元素的中的小写x的中线对齐
  
  ⑤ $\color{orange}{任意指定值( 可选值 )}$ ：正数往上对齐，负数往下对齐
  
  10px，与基线向上10px对齐
  
  -10px，与基线向下10px对齐
- 引入图片问题
  
  **产生原因：**图片属于替换元素，也是基于父元素的基线对齐，而基线与父元素最低端之间存在一定距离的。
  
  解决方案 ①：
  
  需要将其与顶部对齐,底部对齐或者居中对齐。
  
  vertical - align : top ;
  
  vertical - align : middle ;
  
  vertical - align : bottom ;
```

img{
vertical-align:top;
}

<p>
    <img src=“图片地址”>
</p>
```
  解决方案 ②：
  
  给父元素设置 $\color{orange}{font-size：0}$ ，再给需要显示文字的元素，单独设置字体大小。

15.5文本修饰

文本添加修饰
- 添加text-decoration-color属性来设置文本装饰的颜色
  
  ① color:文本装饰的颜色
- 添加text-decoration-line属性来设置文本装饰的类型(下划线、上划线、穿线)
  
  ① $\color{orange}{none(可选值)}$ :默认值，文本修饰没有线条
  
  ② $\color{orange}{underline(可选值)}$ : 文本的下方显示一条线【下划线】
  
  ③ $\color{orange}{overline(可选值)}$ :文本的上方显示一条线【上划线】
  
  ④ $\color{orange}{line-through(可选值)}$ :文本中间显示一套线【删除线】
- 添加text-decoration-style属性来设置文本装饰线的风格
  
  ① $\color{orange}{solid(可选值)}$ :默认值，单实线
  
  ② $\color{orange}{double(可选值)}$ :双实线
  
  ③ $\color{orange}{dotted(可选值)}$ :点状线
  
  ④ $\color{orange}{dashed(可选值)}$ :虚线
  
  ⑤ $\color{orange}{wavy(可选值)}$ :波浪线
- 简写属性
  
  $\color{orange}{text-decoration简写属性}$ 通过该属性可以设置文本装饰的所有相关样式，并且没有顺序要求。
  
  text-decoration 属性是以下三种属性的简写：
  
  ① $\color{red}{text-decoration-line}$
  
  ② $\color{red}{text-decoration-color}$
  
  ③ $\color{red}{text-decoration-style}$
```
  text-decoration-line:underline;
  text-decoration-color:red;
  text-decoration-style:wavy;
  
  text-decoration: underline wavy red;       

 
text-decoration: none; 
```

15.6处理元素之间的空白问题

产生的原因：

行内元素、行内块元素、彼此之间的多个换行、多个空格会被浏览器解析成一个空白字符
解决方案：
- 方案①：去掉换行和空格
- 方案②：给父元素设置 $\color{orange}{font-size：0}$ ，再给需要显示文字的元素，单独设置字体大小。
- 方案③：给行内元素、行内块元素设置浮动（脱离文档流之后，块元素的宽度和高都默认被内容撑开）

15.7处理元素内的空白问题

处理元素内的空白
- Space(空格)、Enter(回车)、Tab(制表符)会产生空白
- 添加white-sapce属性来设置处理元素内的空白
  
  ① $\color{orange}{normal(可选值)}$ :默认值，空白会被浏览器忽略
  
  ② $\color{orange}{pre(可选值)}$ : 保留空白格式，相当于html < pre >标签会保留空格和换行符
  
  ③ $\color{orange}{nowrap(可选值)}$ :文本不换行

15.8显示省略号效果

显示省略号效果

【注意】white-space、overflow、text-overflow缺一不可，需要配合使用

<!--以下为css样式-->
.box{
<!--文本设为不换行-->
white-space:nowrap
<!--子元素溢出部分将会被裁剪，不会被显示-->
overflow: hidden;
<!--显示省略符号 ... 来代表被修剪的文本-->
text-overflow:ellipsis;
}

在这里插入图片描述

16.背景（background）

16.1背景颜色

背景颜色
- 添加background-color属性来设置背景颜色
  
  ① $\color{orange}{transparent(可选值)}$ : 透明的效果
  
  ② $\color{orange}{color(可选值)}$ :指定相应的颜色

16.2背景渐变

背景颜色渐变，通过渐变可以设置一些复杂的背景颜色，就可以实现从一个颜色向其它颜色过渡的效果

【注意】背景渐变是图片，需要通过background-image：属性来设置

16.2.1线性渐变

线性渐变是直线沿某个方向的渐变
- 属性值： $\color{orange}{linear-gradient()}$
  
  ① 未写百分比/偏移量，会默认平均分配渐变的颜色
  
  background-image: linear-gradient(red, yellow);
  
  红色在开头，中间为过渡区域（红–>黄），再以黄色结束，两者平均分配。
  
  ② 通过百分比控制不同颜色的渐变比例
  
  background-image: linear-gradient(red 30%, yellow 70%);
  
  由中心开始，0%到30%是纯红色，30%到70%是红色渐变到黄色的渐变，70%到100%是纯黄色
  
  ③ 通过偏移量控制不同颜色的渐变比例
  
  background-image: linear-gradient(red 10px, yellow 50px);
  
  由中心开始，0到10px是纯红色，10px到50px是红色渐变到黄色的渐变，50px之后纯黄色
  
  ④ 通过to来控制渐变方向
  
  background-image: linear-gradient(to top, red, yellow);
  
  to top 表示从下向上，由红色开始渐变，黄色结束；
  
  to bottom 表示从上向下，由红色开始渐变，黄色结束；
  
  to left 表示从右向左，由红色开始渐变，黄色结束；
  
  to right 表示从左向右，由红色开始渐变，黄色结束；
  
  ⑤ 通过(xxx) deg表示角度来控制渐变方向 deg默认从下到上，正值顺时针，负值逆时针
  
  background-image: linear-gradient(45deg, red, yellow);
  
  下边顺时针旋转45度开始渐变
- 属性值： $\color{orange}{repeating-linear-gradient()}$
  
  ① 通过偏移量控制不同颜色的重复渐变比列
  
  background-image: repeating-linear-gradient(red 0px, yellow 50px);
  
  由红色在开头，中间为渐变区域，50px时，渐变成黄色，如此重复，
  
  ② 通过to来控制渐变方向的重复渐变
  
  background-image: repeating-linear-gradient(to right, red 0px, yellow 50px);

16.2.2径向渐变

径向渐变是以圆心，逐渐向外一圈圈扩散的渐变（发射性的效果）
语法：radial-gradient( 大小 at 圆心位置，颜色渐变比列，颜色渐变比列 )
默认情况下，径向圆心渐变的形状效果会根据元素的形状来计算的

元素为正方形 -->> 渐变效果为圆形

元素为长方形 -->> 渐变效果为椭圆形
- 属性值： $\color{orange}{radial-gradient()}$
  
  ① 未写百分比时，会默认平均分配渐变的颜色
  
  background-image: radial-gradient(red,yellow);
  
  从盒子中心开始，由红色到黄色，若元素为正方形，渐变的形状为圆形；若元素为长方形，渐变的形状为椭圆形。
  
  ② 设置渐变效果圆的直径
  
  【圆心的默认位置是在盒子的正中心】
  
  background-image: radial-gradient(10px red,yellow);
  
  第一个参数为渐变圆的直径
  
  ③ 设置渐变效果椭圆的长短轴
  
  【椭圆心的默认位置是在盒子的正中心】
  
  background-image: radial-gradient(10px 30px,red,yellow);
  
  要有【两个不同参数值】，大的参数值示长轴，小的参数值表示短轴
  
  ④ 由at控制圆心
  
  background-image: radial-gradient(10px 10px at 10px 10px,red,yellow);
  
  （at 圆心水平值圆心垂直值）
  
  at 来控制圆心后第一个值表示水平位置第二值表示垂直位置
- 属性值： $\color{orange}{repeating-radial-gradient()}$
  
  ① 通过偏移量控制不同颜色的重复渐变比列
  
  background-image: repeating-radial-gradient(red 30%,yellow 50%);

16.3背景图片

背景图片
- 添加background-image属性来设置背景图片
  
  ① $\color{orange}{none(可选值)}$ :默认值，无图像背景
  
  ② $\color{orange}{url('地址')(可选值)}$ :指定相应的图片地址可加可不加’ '引号，显示效果相同。
```
background-image: url(./img/03/01.jpg);
background-image: url('./img/03/01.jpg');
```
- 可以同时设置背景图片(矢量图)和背景颜色，背景颜色将会成为背景图片(矢量图)的背景色
- 如果背景图片小于元素的宽高大小，则背景图片会自动在元素中平铺，将其元素铺满。
- 如果背景图片大于元素的宽高大小，则背景图片有一部分将无法完全显示。
- 如果背景图片和元素的宽高大小相同，则会正常显示。

16.4背景图片的重复方式

背景图片的重复方式
- 添加background-repeat属性来设置背景图片的重复方式
  
  ① $\color{orange}{repeat(可选值)}$ :默认值，背景图片将垂直和水平方向重复
  
  ② $\color{orange}{repeat-x(可选值)}$ :背景图片将水平方向重复
  
  ③ $\color{orange}{repeat-y(可选值)}$ :背景图片将垂直方向重复
  
  ④ $\color{orange}{no-repeat(可选值)}$ :背景图片不会重复

16.5背景图片的位置

背景图片的位置
- 添加background-position属性来设置背景图片的位置（不设置默认为左上方）
  
  通过方位进行设置（九宫格），如果只设置一个方位值，第二个方位值默认为center
  
  ① left top(可选值)：左上方
  
  ② left center(可选值)：左中方
  
  ③ left bottom(可选值)：左下方
  
  ④ right top(可选值)：右上方
  
  ⑤ right center(可选值)：右中方
  
  ⑥ right center(可选值)：右下方
  
  ⑦ center top(可选值)：中上方
  
  ⑧ center center(可选值)：中中方
  
  ⑨ center bottom(可选值)：中下方
  
  通过偏移量（px）进行设置，第一个值是水平位置，第二个值是垂直位置，如果只设置一个偏移量，其他值将是50％。
```

background-position:-50px  300px
```

16.6背景绘制的范围

背景绘制的范围
- 添加background-clip属性来设置背景绘制的范围
  
  ① $\color{orange}{border-box(可选值)}$ :默认值，背景绘制在边框方框内（剪切成边框方框）【边界框】
  
  ② $\color{orange}{padding-box(可选值)}$ :背景绘制在衬距方框内（剪切成衬距方框）。【填充框】
  
  ③ $\color{orange}{content-box(可选值)}$ :背景绘制在内容方框内（剪切成内容方框）【内部区】

16.7背景图片的原点位置

背景图片的原点位置
- 添加background-origin属性来设置背景图片的的原点位置
  
  ① $\color{orange}{padding-box(可选值)}$ :默认值，background-positio的偏移量从填充框的相对位置处开始计算
  
  ② $\color{orange}{content-box(可选值)}$ :background-position的偏移量从内容区的相对位置处开始计算
  
  ③ $\color{orange}{border-box(可选值)}$ :background-position的偏移量从边界框的相对位置处开始计算

16.8背景图片的大小

背景图片的大小
- 添加background-size属性来设置背景图片的的大小
  
  ① $\color{orange}{length(可选值)}$ :设置背景图片高度和宽度，第一个值设置宽度，第二个值设置的高度，中间以空格分隔。如果只给出一个值，第二个是默认设置为 auto（自动等比例缩放）
```


background-size:100px 100px;



background-size:100px;
background-size:100px auto;
```
  ② $\color{orange}{percentage(可选值)}$ :设置背景区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格分隔。如果只给出一个值，第二个是默认设置为 auto（自动等比例缩放）
```

background-size:100% 100%;


background-size:100%;
background-size:100% auto;
```
  ③ $\color{orange}{cover(可选值)}$ :保持图片的纵横比（比列不变），将元素铺满【可能不会完整显示】
  
  ④ $\color{orange}{contain(可选值)}$ :保持图片的纵横比（比列不变），将图片在元素在完整显示

16.9背景图片是否固定

背景图片是否固定
- 添加background-attachment属性来设置背景图片是否固定
  
  ① $\color{orange}{scroll(可选值)}$ :默认值，背景图片会跟随元素的滚动而滚动
  
  ② $\color{orange}{fix(可选值)}$ :默认值，背景图片不会跟随元素的滚动而滚动

16.10背景的简写

$\color{orange}{background简写属性}$ 通过该属性可以同时设置背景的所有相关样式，并且没有顺序要求，中间以空格分开
- 【注意1】background-size必须写在background-position的后边，要有background-size，必须先写background-position，并且使用 $\color{orange}{/}$ 隔开，background-position/background-size
- 【注意2】background简写background-origin和background-clip这两个样式，origin要写在clip的前边
```
  background-color:red;
  background-image: url(./img/03/01.jpg);
  background-position:center center;
  background-repeat:no-repeat;
  
  background:red url(./img/03/01.jpg) center center no-repeat;
```

17.css列表属性

列表的相关的属性，可以作用ul、ol、li元素上。

css属性名	功能	属性值
list-style-type	设置列表符号	常用值如下： none ：不显示标识、 square ：实心方块、 disc ：圆形、 decimal ：数字、 lower-roman ：小写罗马字、 upper-roman：大写罗马字、 lower-alpha ：小写字母、 upper-alpha：大写字母
list-style-position	设置列表符号的位置	inside ：在 li 的里面、 outside ：在 li 的外边;
li-style-image	自定义列表符号	url(图片地址)
简写属性：list-style	符合属性	没有数量、没有顺序要求

18.css表格独有属性

css表格度有属性，只有 table 标签才能使用

css属性名	功能	属性值
table - layout	设置表格列表是否固定	auto ：自动，列宽根据内容计算（默认值）、 fixed ：固定列宽
border - spacing	单元格间据	css中可用的长度值。生效的前提：单元格边框不能合=并
border - collapse	合并单元格边框	collapse ：合并、 separate ：不合并
empty - cells	隐藏没有内容的单元格	show ：显示、 hide ：阴藏。生效的前提：单元格边框不能合并
caption - side	设置表格标题位置	top ：上面（默认）、 bottom ：在表格的下面

19.css鼠标相关属性

css属性名	功能	属性值
cursor	设置鼠标光标的样式	常用值如下： default ：箭头、 move ：移动图标、 text ：文字选择器、 crosshair ：十字架、 wait ：等待、 help ：帮助、 pointer ：小手

<!--自定义鼠标图标-->
<!--使用的自定义光标的 URL且此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标-->
 cursor:url('./test.png'),pointer;

二、CSS3

1.CSS简介

1.1CSS3概述

$\color{orange}{CSS3}$ 是 $\color{orange}{CSS2}$ 的升级版本，它在 $\color{orange}{CSS2}$ 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
$\color{orange}{CSS3}$ 在未来会按照**模块化**的方式去发展：https://www.org/Style/CSS/current-work.html
$\color{orange}{CSS3}$ 的新特性如下：
- 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等。
- 新增了更好的视觉效果，例如：圆角、阴影、渐变等。
- 新增了丰富的背景效果，例如：支持多个背景图片，同事新增了若干个背景相关的属性。
- 新增了全新的布局方案——弹性盒子。
- 新增了 $\color{orange}{Web}$ 字体，可以显示用户电脑上没有安装的字体。
- 增强了颜色，例如： $\color{orange}{HSL}$ 、 $\color{orange}{HSLA}$ 、 $\color{orange}{RGBA}$ 几种新的颜色模式，新增 $\color{orange}{opacity}$ 属性来控制透明度。
- 新增了 $\color{orange}{2D}$ 和 $\color{orange}{3D}$ 变换，例如：旋转、扭曲、缩放、位移等。
- 增加动画与过渡效果，让效果的变换更具有流线性，平滑性。
- ······

1.2CSS私有前缀

① 什么是私有前缀

如下代码中的 $\color{orange}{-webkit-}$ 就是**私有前缀**

div{
	width:400px;
	height:400px;
	-webkit-border-radius:20px;
}

② 私有前缀的作用

$\color{orange}{W3C}$ 标准所提出的某个 $\color{orange}{CSS}$ 特性，在被浏览器正式支持之前，浏览器厂商会**根据浏览器的内核**，使用私有前缀来测试该 $\color{orange}{CSS}$ 特性，在浏览器正式支持该 $\color{orange}{CSS}$ 特性后，就不需要私有前缀了。

举个例子：

-webkit-border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;<!--兜底-->

查询 $\color{orange}{CSS3}$ 兼容性的网站：https://caniuse.com/

③ 常见浏览器的私有前缀

$\color{orange}{Chrome}$ 浏览器： $\color{orange}{-webkit-}$
$\color{orange}{Safari}$ 浏览器： $\color{orange}{-webkit-}$
$\color{orange}{Firefox}$ 浏览器： $\color{orange}{-moz-}$
$\color{orange}{Edge}$ 浏览器： $\color{orange}{-webkit-}$
$\color{orange}{Opera}$ 浏览器： $\color{orange}{-o-}$
$\color{orange}{IE}$ 浏览器： $\color{orange}{-ms-}$

【注意】

我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的 $\color{orange}{CSS3}$ 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具，去帮助我们添加私有前缀。

2.CSS3新增长度单位

① $\color{orange}{rem}$ 根元素字体大小的倍数，只与根元素字体大小有关。

② $\color{orange}{vw}$ 视口宽度的百分之多少， $\color{orange}{10vw}$ 就是视口宽度的10%

③ $\color{orange}{vh}$ 视口高度的百分之多少， $\color{orange}{10vh}$ 就是视口高度的10%

④ $\color{orange}{vmax}$ 视口（宽度高度）两者中的最大的百分比。

⑤ $\color{orange}{vmin}$ 视口（宽度高度）两者中的最大小的百分比。

/*视口宽度的100%*/
width:100vw;
/*视口高度的100%*/
height:100vh;

3.CSS3新增颜色设置方式

$\color{orange}{CSS3}$ 新增了三种颜色设置方式，分别是： $\color{orange}{rgba}$ 、 $\color{orange}{hsl}$ 、 $\color{orange}{hsla}$ ，由于之前已经详细讲解，此处略过。

4.CSS新增的选择器

$\color{orange}{CSS3}$ 新增的选择器有：动态伪类、目标伪类、语言伪类、 $\color{orange}{UI}$ 伪类、结构伪类、否定伪类、伪元素；这些在 $\color{orange}{CSS2}$ 中已经详细讲解，此处略过。

5.CSS3新增盒子属性

5.1盒子尺寸的计算方式属性

使用 $\color{orange}{box-sizing}$ 属性可以设置盒模型的两种类型

可选值	含义
$\color{orange}{content-box}$	$\color{orange}{width}$ 和 $\color{orange}{height}$ 设置的是盒子内容区的大小。
$\color{orange}{border-box}$	$\color{orange}{width}$ 和 $\color{orange}{height}$ 设置的是盒子总大小。

5.2调整盒子大小属性

使用 $\color{orange}{resize}$ 属性，用户可以控制并调节元素的尺寸

值	含义
$\color{orange}{none}$	不允许用户调整元素（大小姐）
$\color{orange}{both}$	用户可以同时调节元素的宽度和高度
$\color{orange}{horizontal}$	用户可以调节元素的宽度
$\color{orange}{vertical}$	用户可以调节元素的高度

    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: orange;
            /* 水平垂直都可以调整 */
            resize:both;
            overflow: scroll; /* 前提设置overflow 处理子元素溢出问题*/
        }
        .box2{
            width: 800px;
            height: 600px;
            background-color: skyblue;
        }
    </style>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

【注意】使用 $\color{orange}{resize}$ 属性前，元素必须先添加 $\color{orange}{overflow}$ 属性，与 $\color{orange}{overflow}$ 相配合使用。

5.3盒子阴影属性

使用 $\color{orange}{box-shadow}$ 属性为盒子添加阴影

语法：

box-shadow:h-shadow v-shadow blur spread color inset;

各个属性值的含义：

值	含义
$\color{orange}{h-shadow}$	水平阴影的位置，必须填写，可以为负值
$\color{orange}{v-shadow}$	垂直阴影的位置，必须填写，可以为负值
$\color{orange}{blur}$	可选，模糊距离程度
$\color{orange}{spread}$	可选，阴影的大小（外延值）
$\color{orange}{color}$	可选，阴影的颜色
$\color{orange}{inset}$	可选，将外部阴影改为内部阴影–自身元素移动

默认值： $\color{orange}{box-shadow:none}$ 表示没有阴影

示例：

/*写两个值:含义 水平偏移量 、垂直偏移量*/
box-shadow:10px 10px;

/*写三个值:含义 水平偏移量 、垂直偏移量、颜色*/
box-shadow:10px 10px red;

/*写三个值:含义 水平偏移量 垂直偏移量 、模糊距离*/
box-shadow:10px 10px 10px;

/*写四个值:含义 水平偏移量 垂直偏移量 、模糊距离 、颜色*/==**【常用】**==
box-shadow:10px 10px 10px red;

/*写五个值:含义 水平偏移量 、垂直偏移量、模糊距离、外延值、颜色*/
box-shadow:10px 10px 10px 10px blue;

/*写六个值:含义 水平偏移量 、垂直偏移量、模糊距离、外延值、颜色、内部阴影*/
box-shadow:10px 10px 20px 3px blue inset;

推荐写四个值的盒子阴影属性

5.4盒子不透明度属性

$\color{orange}{opacity}$ 属性能为整个元素添加透明效果，值是 $\color{orange}{0}$ 到 $\color{orange}{1}$ 之间的小数， $\color{orange}{0}$ 是完全透明， $\color{orange}{1}$ 表示完全不透明

$\color{orange}{opacity}$ 与 $\color{orange}{rgba}$ 的区别？

$\color{orange}{opacity}$ 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。

$\color{orange}{rgba}$ 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

6.CSS3新增背景属性

6.1background-origin

作用：设置背景图片的起始点

属性值：

值	含义
$\color{orange}{padding-box(可选值)}$	从 $\color{orange}{padding}$ 区域开始显示背景图像。—— 默认值
$\color{orange}{border-box(可选值)}$	从 $\color{orange}{border}$ 区域开始显示背景图像。
$\color{orange}{content-box(可选值)}$	从 $\color{orange}{content}$ 区域开始显示背景图像。

6.2background-clip

作用：设置背景图的向外裁剪的区域

属性值：

值	含义
$\color{orange}{border-box(可选值)}$	从 $\color{orange}{border}$ 区域开始向外裁剪背景。—— 默认值
$\color{orange}{padding-box(可选值)}$	从 $\color{orange}{padding}$ 区域开始向外裁剪背景。
$\color{orange}{content-box(可选值)}$	从 $\color{orange}{content}$ 区域开始向外裁剪背景。
$\color{orange}{text(可选值)}$	背景图片只呈现在文字上。

【注意①】若属性值为 $\color{orange}{text}$ ，那么 $\color{orange}{background-clip}$ 要加上 $\color{orange}{-webkit-}$ 前缀；

【注意②】文字字体颜色需要设置为 $\color{orange}{transparent}$ 透明色

/*字体颜色*/
color: transparent;
/*背景裁剪*/
-webkit-background-clip: text;

6.3background-size

作用：设置背景图片的尺寸
属性值：

值 | 含义
------------------------------------ | ------------------------------------------------------------
$\color{orange}{length(可选值)}$ | 用长度值指定背景图片大小，只设置一个值，另一个值会等比例缩放。
$\color{orange}{percentage(可选值)}$ | 用百分比指定背景图片大小，只设置一个值，另一个值会等比例缩放。
$\color{orange}{auto(可选值)}$ | 背景图片的真实大小。—— 默认值
$\color{orange}{contain(可选值)}$ | 保持图片的纵横比（比列不变），将图片在元素在完整显示；注意：添加背景不重复，会造成容器里部分区域没有背景图片，没有添加背景不重复，会造成容器里部分区域背景图片重复。
$\color{orange}{cover(可选值)}$ | 保持图片的纵横比（比列不变），将元素全部铺满【背景图片可能不会完整显示】。

6.4background复合属性

$\color{orange}{background复合属性}$ 通过该属性可以同时设置背景的所有相关样式。
语法：
```
/* background:背景颜色 背景url 是否重复 位置/大小 原点 裁剪方式 */
/* background:color url repeat position/size origin clip */
background: skyblue url(./images/psc.jpg) no-repeat center/300px 300px  border-box content-box;
```
【注意①】 $\color{orange}{origin}$ 和 $\color{orange}{clip}$ 的值如果一样，如果只写一个值，则 $\color{orange}{origin}$ 和 $\color{orange}{clip}$ 都设置；如果设置了两个值，前面的是 $\color{orange}{origin}$ ，后面是 $\color{orange}{clip}$ 。

【注意②】 $\color{orange}{size}$ 的值必须写在 $\color{orange}{position}$ 值的后面，并且用 $\color{orange}{/}$ 分开。

6.5多背景图

$\color{orange}{CSS3}$ 允许元素设置多个背景图片

在这里插入图片描述

/*添加多个背景图片*/
/*背景url 是否重复 位置 */
 background: url('./images/上.png') no-repeat center top,
            url('./images/下.png') no-repeat center bottom,
            url('./images/左.png') no-repeat left center,
            url('./images/右.png') no-repeat right center;

【注意】添加多背景使用 $\color{orange}{background}$ ，而不是 $\color{orange}{background-image}$ ，背景图之间用逗号隔开。

7.CSS3新增边框属性

7.1边框圆角

在 $\color{orange}{css3}$ 中，使用 $\color{orange}{border-radius}$ 属性可以将盒子设置圆角。
同时设置四个角的圆角
```
border-radius:10px
```
分开设置每个角的圆角：

分开设置每个圆角，复合写法：

border-radius:左上角x 右上角x 右下角x 左下角x / 左上角y 右上角y 右下角y 左下角y;

元素设置为圆形，将border-radius的属性值设置为50%

border-radius: 200px 200px; 
border-radius: 50px;

7.2边框外轮廓

$\color{orange}{outline-width}$ ：外轮廓的宽度。
$\color{orange}{outline-color}$ ：外轮廓的颜色。
$\color{orange}{outline-style}$ ：外轮廓的风格。
$\color{orange}{none}$ ：无轮廓
$\color{orange}{dotted}$ ：点状轮廓
$\color{orange}{dashed}$ ：虚线轮廓
$\color{orange}{solid}$ ：实线轮廓
$\color{orange}{double}$ ：双线轮廓
$\color{orange}{outline-offset}$ 设置外轮廓与边框的距离（偏移量），可设置正负值；0为默认值，正值向外，负值向内。
$\color{orange}{outline}$ 简写属性：

outline-width:50px;
outline-style:solid;
outline-color:blue;
/*outline简写属性(盒子发出的光)*/
outline:50px solid blue;

8.CSS3新增文本属性

8.1文本阴影

在 $\color{orange}{css3}$ 中，使用 $\color{orange}{text-shadow}$ 属性给文本添加阴影。

语法：

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

值	描述
$\color{orange}{h-offset}$	水平阴影的位置，必须填写，可以为负值
$\color{orange}{v-offset}$	垂直阴影的位置，必须填写，可以为负值
$\color{orange}{blur}$	可选，默认的距离程度
$\color{orange}{color}$	可选，阴影的颜色

默认值： $\color{orange}{text-shadow:none}$ 表示文本没有阴影

8.2文本换行

在 $\color{orange}{css3}$ 中，使用 $\color{orange}{white-space}$ 属性设置文本换行方式。

常用值如下：

值	含义
$\color{orange}{normal}$	文本超出边界自动换行，文本中的换行被浏览器识别成一个空格。
$\color{orange}{pre}$	按原样输出，与 $\color{orange}{<pre>}$ 标签的效果相同
$\color{orange}{pre-wrap}$	在 $\color{orange}{pre}$ 效果的基础上，超出元素边界会自动换行。
$\color{orange}{pre-line}$	在 $\color{orange}{pre}$ 效果的基础上，超出元素边界会自动换行，且只是文本每行文字的始末位置的空格会被忽略，文字每行文字间的空格会被保留，只能识别文本中的换行。
$\color{orange}{nowrap}$	强制不换行

8.3文本溢出

在 $\color{orange}{css3}$ 中，使用 $\color{orange}{text-overflow}$ 属性设置文本内容溢出时的呈现模式。

常用值如下：

值	含义
$\color{orange}{clip}$	当内联内容溢出时，将溢出部分裁剪掉。
$\color{orange}{ellipsis}$	当内联内容溢出块容器时，将溢出部分替换成···。

【注意】要使得 $\color{orange}{text-overflow}$ 属性生效，块容器必须显示定义 $\color{orange}{overflow}$ 为非 $\color{orange}{visible}$ 值， $\color{orange}{white-space}$ 为 $\color{orange}{nowrap}$ 值。

/*white-space、overflow、text-overflow缺一不可，需要配合使用*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

8.4文本修饰

$\color{orange}{text-decoration-line}$ ：设置文本装饰线的位置
- $\color{orange}{none}$ ：指定无文字装饰
- $\color{orange}{underline}$ ：指定文字的装饰是下划线
- $\color{orange}{overline}$ ：指定文字的装饰是上划线
- $\color{orange}{line-through}$ ：指定文字的装饰是贯穿线
$\color{orange}{text-decoration-style}$ ：文本装饰线条的形状
- $\color{orange}{solid}$ ：实线
- $\color{orange}{double}$ ：双实线
- $\color{orange}{dotted}$ ：点状虚线
- $\color{orange}{dashed}$ ：线状虚线
- $\color{orange}{wavy}$ ：波浪线
$\color{orange}{text-decoration-color}$ ：文本装饰线条的颜色
$\color{orange}{text-decoration}$ 简写属性
```
text-decoration:text-decoration-line||text-decoration-style||text-decoration_color;
```

8.5文本描边

注意：文字描边功能仅 $\color{orange}{-webkit-}$ 内核浏览器支持

$\color{orange}{-webkit-text-stroke-width}$ ：设置文字描边的宽度。
$\color{orange}{-webkit-text-stroke-color}$ ：设置文字描边的颜色。
$\color{orange}{-webkit-text-stroke}$ ：复合属性，设置文字描边的宽度和颜色。

9.CSS3新增渐变

9.1线性渐变

① 多个颜色之间的渐变，默认从上到下渐变

在这里插入图片描述

 background-image:linear-gradient(red,yellow,green);

② 使用关键词设置线性渐变的方向

在这里插入图片描述

/* to tight top 从左下 往右上 */
background-image: linear-gradient(to right top,red,yellow,green);
/* to top 从下往上 */
background-image: linear-gradient(to top,red,yellow,green);

③ 使用角度设置线性渐变的方向

在这里插入图片描述

/* deg默认从下到上，正值顺时针，负值逆时针 */
background-image: linear-gradient( 35deg,red,yellow,green);

④ 调整开始渐变的位置

在这里插入图片描述

/*0到50px是纯红色，50px到100px是红色渐变到黄色的渐变，100px到150px是黄色渐变到绿色的渐变，150px之后是纯黄色*/
background-image: linear-gradient(red 50px,yellow 100px,green 150px);

9.2径向渐变

① 多个颜色之间的渐变，默认从圆心四散，若元素为正方形，渐变的形状为圆形；若元素为长方形，渐变的形状为椭圆形。

在这里插入图片描述

background-image: radial-gradient(red,yellow,green);

② 使用关键字调整渐变圆的圆心位置

在这里插入图片描述

background-image: radial-gradient(at right top,red,yellow,green);

③ 使用像素值调整渐变圆的圆心位置

在这里插入图片描述

background-image: radial-gradient(at 100px 50px,red,yellow,green);

④ 调整渐变形状为正圆

在这里插入图片描述

background-image: radial-gradient(circle,red,yellow,green);

⑤ 通过一个像素值调整半径

在这里插入图片描述

background-image: radial-gradient(100px,red,yellow,green);

⑥ 通过二个像素值调整长轴、断轴

在这里插入图片描述

background-image: radial-gradient(50px 100px,red,yellow,green);

⑦ 调整径向渐变的区域

在这里插入图片描述

background-image: radial-gradient(red 50px,yellow 100px,green 150px);

⑧ 综合写法

在这里插入图片描述

 /* 先写半径在写圆心位置 中间没有逗号 100px 100px at right top */
background-image: radial-gradient(100px 100px at right top,red 50px,yellow 100px,green 150px);

9.3重复渐变

重复渐变是在纯色区域，实线渐变效果。

① 重复线性渐变

在这里插入图片描述

background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);

② 重复径向渐变

在这里插入图片描述

background-image: repeating-radial-gradient(red 50px,yellow 100px,green 150px);

10.字体图标

字体图标的优点：

① 相比图片更加清晰。

② 灵活性高，更方便改变大小、颜色、风格等。

③ 兼容性好， $\color{orange}{IE}$ 也能支持。

阿里字体图标使用方式一：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>方式一</title>
    <style>
        /* 第一步:自定义字体 */
        @font-face {
            font-family: 'iconfont';
            src: url('./font1/iconfont.woff2?t=1687556907775') format('woff2'),
                url('./font1/iconfont.woff?t=1687556907775') format('woff'),
                url('./font1/iconfont.ttf?t=1687556907775') format('truetype');
        }
        /* 第二步:使用iconfont样式 */
        .iconfont {
            font-family: "iconfont" !important;
        }
    </style>
</head>
<body>
    <!-- 第三步 挑选相应图标并获取字体编码，应用于页面 -->
    <span class="iconfont">&#xe72c;</span>
    <span class="iconfont">&#xe72d;</span>
    <span class="iconfont">&#xe72e;</span>
</body>
</html>

阿里字体图标使用方式二：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>方式二</title>
    <!-- 第一步:引入css样式 -->
    <link rel="stylesheet" href="./font1/iconfont.css">
</head>
<body>
    <!-- 第二步:挑选相应图标并获取类名，应用于页面 -->
    <span class="iconfont icon-bianji"></span>
    <span class="iconfont icon-fugai"></span>
    <span class="iconfont icon-liwu"></span>
</body>
</html>

阿里字体图标使用方式三：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>方式三</title>
    <!--第一步:引入js代码 -->
    <script src="./font1/iconfont.js"></script>  
</head>
<body>
    <!-- 第二步：挑选相应图标并获取类名，应用于页面： -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-bianji"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-fugai"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-liwu"></use>
    </svg>
</body>
</html>

11.2D变换

二维坐标系如下：

在这里插入图片描述

1.2D位移（translate）

$\color{orange}{2D}$ 位移可以改变元素的位置，具体使用方式如下：

先给元素添加 转换属性 $\color{orange}{transform}$

编写 $\color{orange}{transform}$ 的具体值，相关可选值如下：

值	含义
$\color{orange}{translateX}$	设置水平方向位移，需指定长度值；若指定的是百分之，是参考自身宽度的百分比。
$\color{orange}{translateY}$	设置垂直方向位移，需指定长度值；若指定的是百分之，是参考自身高度的百分比。
$\color{orange}{translate}$	若只有一个值代表水平方向位置；两个值代表：水平和垂直方向。

【注意】

① 位移与相对定位很相似，都不脱落文档流，不会影响到其他元素。

② 位移与相对定位的区别，相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身宽高的百分比。

③ 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。

④ $\color{orange}{transform}$ 可以链式编写：*transform:translateX(30px) translateY(40px);` 中间空格隔开 , 不是用逗号隔开

⑤ $\color{orange}{transform}$ 可以同时编写：transform:translate(30px,40px);中间逗号隔开

⑥ 位移对行内元素无效，对【行内块元素、块元素】生效。

⑦ 位移配合定位，可以实现元素水平垂直双居中

.box1{
  width: 200px;
  height: 200px;
  /*开启包含块的相对定位*/
  position: relative;
}
.box2{
  width: 60px;
  height: 60px;
 /*开启绝对定位*/
  position: absolute;
  left: 50%;
  top: 50%;
  /*2D位移 水平参考自身宽度、垂直参考自身高度*/
  transform: translate(-50%,-50%);

}

2.2D缩放（scale）

$\color{orange}{2D}$ 缩放是指：让元素放大或缩小，具体使用方式如下：

先给元素添加转换属性 $\color{orange}{transform}$

编写 $\color{orange}{transform}$ 的具体值，相关可选值如下：

值	含义
$\color{orange}{scaleX}$	设置水平方向的缩放比例，值为一个数字， $\color{orange}{1}$ 表示不缩放，大于 $\color{orange}{1}$ 放大，小于 $\color{orange}{1}$ 缩小。
$\color{orange}{scaleY}$	设置垂直方向的缩放比例，值为一个数字， $\color{orange}{1}$ 表示不缩放，大于 $\color{orange}{1}$ 放大，小于 $\color{orange}{1}$ 缩小。
$\color{orange}{scale}$	同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。

【注意】

① $\color{orange}{scale}$ 的值是缩放比例，没有单位；可以支持负数。

② 缩放对行内元素无效，对行内块元素、块元素生效。

③ 借助缩放，可以实现小于 $\color{orange}{12px}$ 的文字。

④ $\color{orange}{transform}$ 可以链式编写：transform: scaleX(1.5) scaleY(0.5);中间空格隔开

⑤ $\color{orange}{transform}$ 可以同时编写：transform: scale(1.5,0.5);中间逗号隔开

3.2D旋转（rotate）

$\color{orange}{2D}$ 旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：

先给元素添加 转换属性 $\color{orange}{transform}$

编写 $\color{orange}{transform}$ 的具体值，相关可选值如下：

值	含义
$\color{orange}{rotateZ}$	设置旋转角度，需要指定一个角度值(xxx $\color{orange}{deg}$ )，正值顺时针旋转，负值逆时针旋转；0~360deg

【注意】

① 在2D变换， $\color{orange}{rotateZ(20deg)}$ 相当于 $\color{orange}{rotate(20deg)}$ ；3D变换时，还可以写 $\color{orange}{rotate(x,x,x)}$

② 旋转对行内元素无效，对行内块元素、块元素生效。

③ transform: rotateZ(30deg);

④ transform: rotate(30deg);

4.2D扭曲（skew）

$\color{orange}{2D}$ 扭曲是指：让元素在二维平面内被"拉扯"，进而"走形"，具体使用方式如下：

先给元素添加 转换属性 $\color{orange}{transform}$

编写 $\color{orange}{transform}$ 的具体值，相关可选值如下：

值	含义
$\color{orange}{skewX}$	设置元素在水平方向扭曲程度，需要指定一个角度值(xxx $\color{orange}{deg}$ )；正值会将元素的左上角、右下角 $\color{orange}{拉扯}$ ，负值会将元素的右上角、左下角 $\color{orange}{拉扯}$ 。
$\color{orange}{skewY}$	设置元素在垂直方向扭曲程度，需要指定一个角度值(xxx $\color{orange}{deg}$ )；正值会将元素的左上角、右下角 $\color{orange}{拉扯}$ ，负值会将元素的右上角、左下角 $\color{orange}{拉扯}$ 。
$\color{orange}{skew}$	若只有一个值代表水平方向 $\color{orange}{skewX}$ ；两个值代表：水平和垂直方向 $\color{orange}{skewX}$ 、 $\color{orange}{skewY}$ 。

【注意】

① 扭曲对行内元素无效，对行内块元素、块元素生效。

② $\color{orange}{transform}$ 可以链式编写：transform: skewX(30deg) skewY(30deg);中间空格隔开

③ $\color{orange}{transform}$ 可以同时编写：transform: skew(30deg,30deg);中间逗号隔开

5.多重变换

多个变换，可以同时使用一个 $\color{orange}{transform}$ 来编写，多个属性之间用空格隔开。

先位移，后旋转

/* 先位移 坐标系是自己本身*/
transform:  translate(100px,100px)  rotate(30deg);

在这里插入图片描述

先旋转，后位移

 /*先旋转 坐标系是自身容器的起始点*/ 
transform:  rotate(30deg) translate(100px,100px);

在这里插入图片描述

【注意】多重变换时，建议后旋转。(先旋转会破坏坐标系)

6.变换原点（transform-origin）

元素变换时，默认的原点是元素的中心，使用 $\color{orange}{transform-origin}$ 可以设置变换的原点。(旋转原点)
修改变换原点对位移没有影响,一直参考坐标系原点。
修改变换原点对旋转和缩放会产生影响。
如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
如果只设置一个方位值，第二个方位值默认为center 。

① transform-origin:50% 50%，变化原点默认在元素的中心位置，百分比是相对自身容器的宽高大小。——默认值

② transform-origin:left top，变换原点在原理自身元素的左上角。

③ transform-origin:50px 50px，变换原点距离父元素左上角 $\color{orange}{50px}$ $\color{orange}{50px}$ 的位置。

④ transform-origin:0，只写一个值的时候，第二值默认为 50%。

变化原点默认在元素的中心位置。

变换原点百分比是相对自身容器的宽高大小。

修改变换原点对位移没有影响,一直参考坐标系原点。

修改变换原点对【旋转】和【缩放】会产生影响。

12.3D变换

1.开启3D空间

重要原则：元素进行 $\color{orange}{3D}$ 变换的首要操作：父元素 必须开启 $\color{orange}{3D}$ 空间！

/* 开启3D空间 */
transform-style: preserve-3d;

使用 $\color{orange}{transform-style}$ 开启 $\color{orange}{3D}$ 变换，【可选如下：

$\color{orange}{flat}$ ：让子元素位于此元素的二维平面（ $\color{orange}{2D}$ 空间）——(默认值)
$\color{orange}{preserve-3d}$ ：让子元素位于此元素的三维空间内（ $\color{orange}{3D}$ 空间）

2.设置景深

指定观察者与 $\color{orange}{z=0}$ 平面的距离，能让发生 $\color{orange}{3D}$ 变换的元素，产生透视效果，看来更加立体。

/*设置景深(有了透视3D效果,近大远小)  */
perspective: 500px;

使用 $\color{orange}{perspective}$ 设置景深，可选值如下：

$\color{orange}{none}$ ：不指定透视，不是0px —— (默认值)
$\color{orange}{长度值}$ ：指定观察者距离 $\color{orange}{z=0}$ 平面的距离，不允许负值。

注意： $\color{orange}{perspective}$ 设置给发生 $\color{orange}{3D}$ 变换元素的**父元素！**

3.透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在【开启3D元素】元素的中点。

使用 $\color{orange}{perspective-origin}$ 设置观察者位置（透视点的位置），例如：

/* 设置透视点的位置(对角线交点 包括边框内边距) */
/*相对于坐标轴往右偏移400px，往下偏移300px(相当于人蹲下300像素，然后向右移动400像素看着元素)*/
/*第一个数值 400px 是相对于元素盒模型左边界的水平距离(被观察的元素往左400px)，第二个数值 300px 是相对于元素盒模型上边界的垂直距离(被观察的元素往上300px)*/
perspective-origin: 400px 300px;

注意：通常情况下，我们不需要调整透视点位置。

4.3D位移

$\color{orange}{3D}$ 位移是在 $\color{orange}{2D}$ 位移的基础上，可以让元素沿 $\color{orange}{Z}$ 轴位移，具体使用方式如下：

先给元素添加转换属性 $\color{orange}{transform}$

编写 $\color{orange}{transform}$ 的具体值， $\color{orange}{3D}$ 位移可选值如下：

值	含义
$\color{orange}{translateZ}$	设置 $\color{orange}{Z}$ 轴位移，需要指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。
$\color{orange}{translate3d}$	第1个参数对应 $\color{orange}{X}$ 轴，第2个参数对应 $\color{orange}{Y}$ 轴，第3个参数对应 $\color{orange}{Z}$ 轴，且均不能省略

/* z轴(缩放) 默认正面看 需要改变观察者的位置  需要设置厚度 */
 /* 位移偏移量要小于景深 */
transform: translateZ(150px); 
transform: translate3d(0px,0px,200px);

【注意】: X轴和Y轴可以设置像素值，也可以设置百分比；Z轴 只能设置像素值，不能写百分比。

5.3D旋转

$\color{orange}{3D}$ 旋转是在 $\color{orange}{2D}$ 旋转的基础上，可以让元素沿 $\color{orange}{X}$ 轴和 $\color{orange}{Y}$ 轴旋转，具体使用方式如下：

先给元素添加转换属性 $\color{orange}{transform}$

编写 $\color{orange}{transform}$ 的具体值， $\color{orange}{3D}$ 旋转可选值如下：

值	含义
$\color{orange}{rotateX}$	设置 $\color{orange}{X}$ 轴旋转角度，需要指定一个角度(xxxdeg)，面对 $\color{orange}{X}$ 轴正方向：正值顺时针，负值逆时针。
$\color{orange}{rotateY}$	设置 $\color{orange}{Y}$ 轴旋转角度，需要指定一个角度值(xxxdeg)，面对 $\color{orange}{Y}$ 轴正方向：正值顺时针，负值逆时针。
$\color{orange}{rotate3d}$	前3个参数分别代表坐标：x,y,z，第4个参数表示旋转的角度，参数不允许省略。

transform: rotateX(45deg);
transform: rotateY(45deg);
/*0为不旋转，1为旋转;第4个参数表示旋转的角度,参数不允许省略。*/
transform: rotate3d(1,1,1,30deg);

6.3D缩放

$\color{orange}{3D}$ 缩放是在 $\color{orange}{2D}$ 缩放的基础上，可以让元素沿 $\color{orange}{Z}$ 轴，具体使用方式如下：

先给元素添加转换属性 $\color{orange}{transform}$

编写 $\color{orange}{transform}$ 的具体值， $\color{orange}{3D}$ 缩放可选值如下：

值	含义
$\color{orange}{scaleZ}$	设置 $\color{orange}{Z}$ 轴方向的缩放比例，值为一个数字， $\color{orange}{1}$ 表示不缩放，大于 $\color{orange}{1}$ 放大，小于 $\color{orange}{1}$ 缩小。
$\color{orange}{scale3d}$	第1个参数对应 $\color{orange}{X}$ 轴，第2个参数对应 $\color{orange}{Y}$ 轴，第3个参数对应 $\color{orange}{Z}$ 轴，参数不允许省略。

/*设置 scaleZ(比例)相当于变换景深的大小 500/4=125px 正面视角看不出效果,需要进行向x轴或y轴的旋转*/
transform:scaleZ(4)rotateX(45deg);

transform: scale3d(1.5,1.5,4)rotatey(45deg);

7.多重变换

多个变换，可以同时使用一个 $\color{orange}{transform}$ 来编写。

/*设置 scaleZ(比例)相当于变换景深的大小 500/4=125px 正面视角看不出效果,需要进行向x轴或y轴的旋转*/
transform:translateZ(100px) scaleZ(3) rotateY(45deg);

【注意】多重变换时，建议后旋转。(先旋转会破坏坐标系)

8.变换原点

3D旋转参考的是变换原点的位置：

 transform-origin:202px 180px; 
 transform: rotatex(-45deg);

9.背部可见性

通过属性 $\color{orange}{backface-visibility}$ 来进行设置

transform: rotateY(45deg);
/* 设置背部可见性 */
backface-visibility: hidden;

13.CSS3过渡

过渡可以在不使用 $\color{orange}{Flash}$ 动画，不使用 $\color{orange}{JavaScript}$ 的情况下，让元素从一种样式，平滑过渡到另一种样式。

1.过渡属性(transition-property)

作用：定义那个属性需要过渡，只有在该属性中定义的属性(比如宽、高、颜色等)才会有过渡效果。
常用值：

① $\color{orange}{none}$ ：不过渡任何属性

② $\color{orange}{all}$ ：过渡能够过渡的所有属性 —— (默认值)

③ $\color{orange}{具体某个属性名}$ ，例如： $\color{orange}{width}$ 、 $\color{orange}{height}$ ，若有多个以逗号分隔。

/* 过渡属性 【需要属性 和 时间】必须有变化(数值)才可以设置 */
/* 哪个属性需要过渡 多个属性以逗号隔开*/
transition-property: width,height;
/* 让所有能过渡的属性 都过渡 */
transition-property: all;

【注意】

① 不是所有的属性都能设置过渡，值为数值或者能转为数值的属性，都能支持过渡，否则不支持。

② 常见的支持过渡的属性有：颜色、长度值、百分比、 $\color{orange}{z-index}$ 、 $\color{orange}{opacity}$ 、 $\color{orange}{2D}$ 变换属性、 $\color{orange}{3D}$ 变换属性，阴影。

2.过渡持续时间(transition-duration)

作用：设置过渡的持续时间，即：一个状态过渡到另一个状态的持续时间。
常用值：

① $\color{orange}{0}$ ：没有任何过渡时间——(默认值)

② $\color{orange}{s}$ 或 $\color{orange}{ms}$ ：秒或毫秒

③ $\color{orange}{列表}$ ：
- 如果想让所有属性都持续一个世纪，那就写一个值。
- 如果想让每个属性持续不同的时间那就写一个时间列表

/*设置过渡的时间 单位为:ms s*/
/*第一个属性过渡持续时间为2s,第二个属性过渡持续时间为5s*/
transition-duration: 2s,5s;
/*所有过渡的持续时间都为1s*/
transition-duration: 1s;

3.过渡延迟(transition-delay)

作用：指定开始过渡的延迟时间，单位为: $\color{orange}{s}$ 或 $\color{orange}{ms}$ ：秒或毫秒

4. 过渡方式(transition-timing-function)

作用：设置过渡的类型
常用值：

① $\color{orange}{ease}$ ：平滑过渡(慢很快慢)——默认值

② $\color{orange}{linear}$ ：线性过渡(匀速)

③ $\color{orange}{ease-in}$ ：慢 → 快

④ $\color{orange}{ease-out}$ ：快 → 慢

⑤ $\color{orange}{ease-in-out}$ ：慢 → 快 → 慢

⑥ $\color{orange}{step-start}$ ：不考虑过渡的时间,直接就是终点

⑦ $\color{orange}{step-end}$ ：考虑过渡时间,但无过渡效果,过渡时间到了以后,瞬间到达终点

⑧ $\color{orange}{steps(integer)}$ ：指定函数的步数(分步过滤)

⑨ $\color{orange}{cubic-bezie}$ ：特定的贝塞尔曲线

5. 过渡的复合属性

transition-property
transition-duration
transition-delay
transition-timing-function
如果设置了一个时间，表示 $\color{orange}{duration}$ ; 如果设置了两个时间，第一个是 $\color{orange}{duration}$ ，第二个是 $\color{orange}{delay}$ ; 其他值没有顺序要求。
```
transition-property:all;
transition-duration:3s;
transition-delay:0.5s;
transition-timing-function:linear;
/*可以简写为以下过渡的复合属性*/
transition: all 3s 0.5s linear;
```

14.CSS3动画

1.什么是帧

一段动画，就是一段时间内连续播放 $\color{orange}{n}$ 个换面。每一张画面，我们管它叫做“帧”。一定时间内连续快速播放若干个帧，就成为了人眼中的动画。同样时间内，播放的帧数越多，画面看起来越流畅。

2.什么是关键帧

关键帧指的是，在构成一段动画的若干帧中，起来决定性作用的 $\color{orange}{2-3}$ 帧。

3.动画的基本使用

第一步：定义关键帧 (定义动画)

① 简单方式定义：

/* 定义一个动画(定义一组关键帧)——第一种方式 */
        @keyframes wangyoudong {
            /* 第一帧(来自哪里) */
            from {
                /* 默认位置 */
                /*property:value*/

            }
            /* 最后一帧(到哪里) */
            to {
                /*property:value*/
                /* 2d变换-位移 */
                transform: translateX(900px);
                background-color: red;
            }
        }

② 完整方式定义：

/* 定义一个动画(定义一组关键帧)——第二种方式(推荐) */
        @keyframes wangyoudong2 {
            /* 第一帧 */
            0%{
                /*property:value*/
            }
            20%{
                /*property:value*/
                background-color: red;
            }
            40%{
                /*property:value*/
                background-color: orange;
            }
            60%{
                /*property:value*/
                background-color: yellow;
            }
            80%{
                /*property:value*/
                background-color: yellow;
            }
            /* 最后一帧 */
            100%{
                /*property:value*/
                /* 2d变换-位移 旋转 */
                /* 多重变换时，建议后旋转 */
	 transform: translateX(900px)rotate(360deg);
                background-color: purple;
                /*元素设置为圆形  */
                border-radius: 50%;
            }
        }

第二步：给具体的元素应用动画，用到的属性如下：

① $\color{orange}{animation-name}$ ：给元素指定具体的动画（具体的关键帧）

② $\color{orange}{animation-duration}$ ：设置动画所持续的时间

③ $\color{orange}{animation-delay}$ ：设置动画的延迟时间
```
.box{
     /* 指定动画 应用动画t元素(一定要写) */
     animation-name:tesrKey;
     /* 动画持续的时间 (一定要写)*/
     animation-duration: 3s;
     /* 动画延迟时间 */
     animation-delay: 0.5s;
}
```

4.动画的其他属性

4.1动画的方式

动画方式类型： animation-timing-function:

常用值如下：

① $\color{orange}{ease}$ ：平滑过渡(慢很快慢)——默认值

② $\color{orange}{linear}$ ：线性过渡(匀速)

③ $\color{orange}{ease-in}$ ：慢 → 快

④ $\color{orange}{ease-out}$ ：快 → 慢

⑤ $\color{orange}{ease-in-out}$ ：慢 → 快 → 慢

⑥ $\color{orange}{step-start}$ ：不考虑过渡的时间,直接就是终点

⑦ $\color{orange}{step-end}$ ：考虑过渡时间,但无过渡效果,过渡时间到了以后,瞬间到达终点

⑧ $\color{orange}{steps(integer)}$ ：指定函数的步数(分步过滤) 一步一步显示

⑨ $\color{orange}{cubic-bezie}$ ：特定的贝塞尔曲线

animation-timing-function:linear

4.2动画播放的次数

指定动画播放的次数： animation-iteration-count:

常用值如下：

① $\color{orange}{number}$ ：自定义动画循环次数

② $\color{orange}{infinite}$ ：无限循环

4.3动画的方向

指定动画的方向：animation-direction:

常用值如下：

① $\color{orange}{normal}$ ：正常方向(默认值) 左 → 右

② $\color{orange}{reverse}$ ：反方向运行右 → 左

③ $\color{orange}{alternate}$ ：动画先正方向运行再反向运行，并且持续交替运行

④ $\color{orange}{alternate-reverse}$ ：动画先反方向运行再正方向运行，并且持续交替运行

【注意】: ③ 和 ④ 交替运行，需要开启无限循环，animation-iteration-count: infinite，否则不生效。

4.4动画以外的状态(动画在哪里)

设置动画的状态位置：animation-fill-mode

常用值如下：

① $\color{orange}{forwards}$ ：设置对象状态为东环结束时的状态（停止在最后一帧）

② $\color{orange}{backwards}$ ：设置对象状态为动画开始时的状态（停止在第一帧）（默认状态）

【注意】: 需要只发生一次动画，若在animation-iteration-count使用infinite，则此属性失效

4.5动画的播放状态

设置动画的播放状态：animation-play-state

常用值如下：

① $\color{orange}{running}$ ：运动 ( 默认播放效果 )

② $\color{orange}{paused}$ ：暂停

 /* 鼠标悬停outer,设置inner的样式 */
        .outer:hover .inner{
 /* 达到鼠标移入,动画暂停的效果 */
         animation-play-state: paused;
            }

5.动画的复合属性

animation-name
animation-duration
animation-delay
animation-timing-function
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

如果只设置一个 $\color{orange}{duration}$ , 设置两个时间分别是： $\color{orange}{duration}$ 和 $\color{orange}{delay}$ ，其他属性没有数量和顺序要求。

animation-name:testKey;
animation-duration: 3s;
animation-delay: 0.5s;
animation-timing-function: linear;
animation-direction:alternate-reverse;
animation-fill-mode: forwards;
/*可以简写为以下动画的复合属性*/
animation:testKey 3s 0.5s linear 2 alternate-reverse forwards;

【注意】:

① $\color{orange}{animation-play-state}$ 动画播放状态一般单独使用，不使用复合属性。

② $\color{orange}{animation}$ 的属性值中间以空格隔开。

6.过渡与动画的区别

过渡需要交互触发条件（:hover、点击事件等）, 动画不需要触发条件。
动画可以在开始到结束状态中，可以通过关键帧进行精细的设计。

在这里插入图片描述

15.CSS3多列布局

作用：专门用于实现类似于报纸的布局。

在这里插入图片描述

常用属性如下：

$\color{orange}{column-count}$ ：指定列数，值为数字。
$\color{orange}{column-width}$ ：指定列宽，值为长度值。
$\color{orange}{columns}$ ：设置列数的复合属性，同时指定【列宽和列数】，值没有数量和顺序要求。
$\color{orange}{column-gap}$ ：设置列间距，只为长度值。
$\color{orange}{column-rule-style}$ ：设置列与列之间边框的风格，
$\color{orange}{column-rule-width}$ ：设置列与列之间边框的宽度，
$\color{orange}{column-rule-color}$ ：设置列与列之间边框的颜色。
$\color{orange}{column-rule}$ ：设置列边框的复合属性，同时指定【列宽度，列样式，列颜色】
$\color{orange}{column-span}$ ：指定是否跨列，值为：none、all。

【注意】：

① $\color{orange}{column-span}$ 是单独给元素添加属性，其它是给包含块容器添加属性。

② 如果多列布局中有图片，需要给图片设置宽度为100%，占据所在列宽度的100%。

 img{
     /* 图片宽度为所在列的宽度的100% */
     width: 100%;
	 /* 过渡属性 【需要属性 和 时间】必须有变化(数值)才可以设置 */
     /* 过渡效果给元素本身设置 */
     transition:all 0.2s linear ;
        }

16.伸缩盒模型

1.伸缩盒模型简介

$\color{orange}{2009}$ 年， $\color{orange}{W3C}$ 提出了一种新的盒模型—— $\color{orange}{Flexible}$ $\color{orange}{BOX}$ ( 伸缩盒模型，又称：弹性盒子)。
它可以轻松的控制：**元素分布方式、元素对齐方式、元素视觉顺序 **······()
截至目前，除了在部分 $\color{orange}{IE}$ 浏览器不支持，其它浏览器均已全部支持。
伸缩盒模型的出现，逐渐演变出了一套新的布局方案—— $\color{orange}{flex}$ 布局

小贴士：

① **传统布局**是指：基于传统盒状模型，主要靠： $\color{orange}{display}$ 属性 + $\color{orange}{position}$ 属性 + $\color{orange}{float}$ 属性。

② $\color{orange}{flex}$ 布局目前在移动端应用比较广泛，因为传统布局不能很好呈现在移动设备上。

2.伸缩容器、伸缩项目

伸缩容器：开启了 $\color{orange}{flex}$ 的元素，就是：伸缩容器。

① 给元素设置： $\color{orange}{display:flex}$ 或者 $\color{orange}{display:inline-flex}$ ，该元素就变为了伸缩容器。

② $\color{orange}{display:inline-flex}$ 很少使用，因此可以给多个伸缩容器的父容器的父容器，也设置为伸缩容器。

③ 一个元素可以同时是：伸缩容器、伸缩项目。
伸缩项目：伸缩容器的**所有子元素**自动成为了：伸缩项目。

① 只能是伸缩容器的**子元素**可以成为伸缩项目，孙子元素，重孙子元素等后代，不是伸缩项目。

② 无论原来是那种元素（块、行内块、行内）, 一旦成为了伸缩项目，全都会 "块状化 ",都会转化为块元素。

3.主轴与侧轴

主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右 ( 左边是起点，右边是终点 ) 。
侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下 ( 上边是起点，下边是终点 ) 。

4.主轴方向

属性名： $\color{orange}{flex-direction}$
常用值如下：

① $\color{orange}{row}$ ：主轴方向水平从左到右——( 默认值 )

② $\color{orange}{row-reverse}$ ：主轴方向从右到左

③ $\color{orange}{column}$ ：主轴方向垂直从上到下

④ $\color{orange}{column-reverse}$ ：主轴方向垂直从下到上
flex-direction属性值：

5.主轴换行方式

属性名： $\color{orange}{flex-wrap}$
常用值下：

① $\color{orange}{nowrap}$ ：(默认值)，不进行换行，伸缩项目会进行伸缩。

② $\color{orange}{wrap}$ ：自动换行，伸缩容器不够放，伸缩项目会自动换行

③ $\color{orange}{wrap-reverse}$ ：伸缩项目反向换行。从伸缩容器的侧轴的反向摆放( 从右到左、从下到上 )
flex-wrap属性值：

【注意】: 主轴方向默认换行方式为不换行，进行伸缩。

6.主轴方向换行复合属性（flex-flow）

$\color{orange}{flex-flow}$ 是一个复合属性，复合了 $\color{orange}{flex-direction}$ 和 $\color{orange}{flex-wrap}$ 两个属性。值没有顺序要求。

 flex-flow:row wrap ;

7.主轴对齐方式

属性名： $\color{orange}{justify-content}$
常用值如下：

① $\color{orange}{flex-start}$ ：主轴起点对齐——( 默认值 )

② $\color{orange}{flex-end}$ ：主轴终点对齐

③ $\color{orange}{center}$ ：居中对齐

④ $\color{orange}{space-between}$ ：均匀分布，两端对齐 , 项目与项目之间的距离是相等的 , 项目距离伸缩容器的边缘是没有距离的 ( 最常用 )

⑤ $\color{orange}{space-around}$ ：均匀分布，两端距离是中间距离的一半

⑥ $\color{orange}{space-evenly}$ ：均匀分布，两端距离与中间距离相同
justify-content 属性值

/* 主轴的对齐方式（伸缩项目没有占满伸缩容器的大小）【主轴的起始位置】 */
justify-content: flex-start;

/* 主轴的对齐方式（伸缩项目没有占满伸缩容器的大小）【主轴的结束位置】 */
justify-content: flex-end;

/* 主轴对齐方式（伸缩项目没有占满伸缩容器的大小） 【中间对齐】 */
 justify-content: center; 

/* 主轴对齐方式，伸缩项目均匀的分布在一行中,项目与项目之间的距离是项目与伸缩容器边缘的距离的两部  */
justify-content: space-around;

/* 主轴对齐方式 伸缩项目均匀的分布在一行中,项目与项目之间的距离是相等的,项目距离伸缩容器的边缘是没有距离的 */
justify-content: space-between;

/*主轴对齐方式  伸缩项目均匀的分布在一行中（边缘 项目都距离相等） */
justify-content: space-evenly;

8.侧轴对齐方式

8.1只有一行的情况

所需属性： $\color{orange}{align-items}$
常用值如下：

① $\color{orange}{flex-start}$ ：侧轴的起点位置对齐

② $\color{orange}{flex-end}$ ：侧轴的终点位置对齐

③ $\color{orange}{center}$ ：侧轴的中点位置对齐

④ $\color{orange}{baseline}$ ：伸缩项目的的单行基线对齐(字母的x的底线)

⑤ $\color{orange}{stretch}$ ：若是伸缩项目未设置高度，将占满整个伸缩容器的高度。——( 默认值 )
align-items 属性值：

在这里插入图片描述

8.2多行的情况

所需属性： $\color{orange}{align-content}$
常用值如下：

① $\color{orange}{flex-start}$ ：与侧轴的起点位置对齐

② $\color{orange}{flex-end}$ ：与侧轴的终点位置对齐

③ $\color{orange}{center}$ ：与侧轴的中点位置对齐

④ $\color{orange}{space-between}$ ：与侧轴两端对齐，中间平均分布。

⑤ $\color{orange}{space-around}$ ：伸缩项目间的距离相等，且是边缘距离的2倍。

⑥ $\color{orange}{space-around}$ ：在侧轴上伸缩项目之间的距离(边缘项目都相等）。

⑦ $\color{orange}{stretch}$ ：占满整个侧轴【前提:伸缩项目不能设置高度】—— 默认值
align-content 属性值

9.元素水平垂直居中

① 设置主轴对齐方式居中和侧轴对齐方式 (单行) 居中

② 在传统布局中，使用margin: auto 0;设置子元素的垂直外边距是无效的。只有在弹性布局中，使用display: flex并将子元素的上下外边距设置为auto，才能实现垂直居中的效果。

在这里插入图片描述

10.主轴的基准长度

概念： $\color{orange}{flex-basis}$ 设置的主轴方向的基准长度，会让 width宽度或 height高度失效。
主轴是横向的,width宽度失效;若主轴是纵向的,height高度失效。
作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值 $\color{orange}{auto}$ ，即：伸缩项目的宽或高。

11.伸缩项目的伸缩性

11.1伸( flex-grow )

概念： $\color{orange}{flex-grow}$ 定义伸缩项目的放大比例，默认为 $\color{orange}{0}$ ，即使主轴存在剩余空间，伸缩项目也不会进行拉伸
规则：

① 若所有伸缩项目的 $\color{orange}{flex-grow}$ 值都为 $\color{orange}{1}$ ，则：它们将等主轴存在剩余空间。

② 若三个伸缩项目 $\color{orange}{flex-grow}$ 值分别为： $\color{orange}{1}$ 、 $\color{orange}{2}$ 、 $\color{orange}{3}$ ，则：分别瓜分到： $\color{orange}{1/6}$ 、 $\color{orange}{2/6}$ 、 $\color{orange}{3/6}$ 的空间（分母为各个伸缩项目flex-grow的值相加，分子为各个伸缩项目的flex-grow的值）。

11.2缩（flex-shrink）

概念： $\color{orange}{flex-shrink}$ 定义了项目的压缩比例，默认为 $\color{orange}{1}$ ，即：如果空间不足，伸缩项目将会缩小
收缩伸缩项目的计算，使用场景举例
例如：

三个收缩项目，宽度分别为： $\color{orange}{200px}$ 、 $\color{orange}{300px}$ 、 $\color{orange}{200px}$ 、它们的 $\color{orange}{flex-shrink}$ 值分别为： $\color{orange}{1}$ 、 $\color{orange}{2}$ 、 $\color{orange}{3}$

若想刚好容纳下三个伸缩项目，需要总宽度为 $\color{orange}{700px}$ ，但目前容器只有 $\color{orange}{400px}$ ，还差 $\color{orange}{300px}$

所以每个人都要收缩一个才可以放下，具体收缩的值，计算步骤如下：

① 计算分母： $\color{orange}{(200×1)+(300×2)+(200×3)=1400}$

② 计算比例：
- 项目一： $\color{orange}{(200×1)/1400=比例值1}$
- 项目二： $\color{orange}{(300×2)/1400=比例值2}$
- 项目三： $\color{orange}{(200×3)/1400=比例值3}$
③ 计算最终收缩大小：
- 项目一需要收缩： $\color{orange}{比例值1×300}$
- 项目二需要收缩： $\color{orange}{比例值2×300}$
  
  项目三需要收缩： $\color{orange}{比例值3×300}$

12.伸缩项目flex的复合属性

$\color{orange}{flex}$ 是复合属性，复合了： $\color{orange}{flex-grow}$ 、 $\color{orange}{flex-shrink}$ 、 $\color{orange}{flex-basis}$ 三个属性，默认为 $\color{orange}{flex:0}$ $\color{orange}{1}$ $\color{orange}{auto}$ 。

如果写 flex:1 1 auto , 则可简写为：flex:auto
如果写 flex:1 1 0 , 则可简写为：flex:1
如果写 flex:0 0 auto , 则可简写为 : flex:none
如果写 flex:0 1 auto , 则可简写为 : flex:0 auto—— 即 $\color{orange}{flex}$ 初始值。

/* 可以拉伸 可以压缩 不设置主轴基准长度 可以简写为 flex:auto */
flex: 1 1 auto;

/* 可以拉伸 可以压缩 设置基准长度为0,可简写为: flex:1 */
flex: 1 1 0;
           
/* 不可以拉伸 不可以压缩 不设置基准长度 ,可简写为: flex:none*/
flex: 0 0 auto;

/* 不可以拉伸 可以压缩 不设置基准长度,可简写为: flex:0 auto */
flex: 0 1 auto;

13.伸缩项目的显示排序

$\color{orange}{order}$ 属性定义伸缩项目的排列顺序。数值越小, 排列月靠前 , 默认为 $\color{orange}{0}$ 。(可以设为负值)

在这里插入图片描述

/* 默认伸缩项目排序值为0 */
        .inner1{
            order: 3;
        }
        .inner2{
            order: 2;
        }

        .inner3{
            order: 1;
        }

14.单独项目的侧轴对齐方式

通过 $\color{orange}{align-self}$ 属性，可以单独调整某个伸缩项目的对齐方式
默认值为 $\color{orange}{auto}$ ，表示继承父元素( 伸缩容器 )的 $\color{orange}{align-items}$ 属性

在这里插入图片描述

/* 单独伸缩项目侧轴对齐方式 */
.inner2{
  align-self: center;
        }

17.媒体查询

17.1媒体类型

在这里插入图片描述

需要 @media 媒体名{ }进行使用 , 在{ }大括号中写CSS样式。

在这里插入图片描述

17.2媒体特性

在这里插入图片描述

需要 @media （媒体属性：属性值）{ }进行使用 , 在{ }大括号中写CSS样式。

在这里插入图片描述

17.3 运算符

值	含义
$\color{orange}{and}$	并且
$\color{orange}{,}$ 或 $\color{orange}{or}$	或者
$\color{orange}{not}$	否定
$\color{orange}{only}$	肯定

在这里插入图片描述

17.4常用阈值

在实际开发中，会将屏幕划分成几个区间，例如：

在这里插入图片描述

17.5结合外部样式的用法

用法一：媒体查询写在元素标签的media属性中

<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">

用法二：利用CSS中媒体查询@media （媒体属性：属性值）{ }进行使用

@media screen and (max-width:768px){
    /*CSS样式*/
}
@media screen and (min-width:768px) and (max-width:1200px)

【注意】: 响应式布局在每个阈值中写不同的css样式显示不同的界面效果。

17.6响应式布局

李立超美图手机练习：https://www.bilibili.com/video/BV1XJ411X7Ud?p=145&vd_source=ab6543a00425151a57dda2378f81ea2e

18.BFC

18.1BFC定义

$\color{orange}{W3C}$ 上对 $\color{orange}{BFC}$ 的定义：

浮动、决定定位元素，不是块盒子的块容器( $\color{orange}{inline-blocks}$ 、 $\color{orange}{table-cells}$ 和 $\color{orange}{table-captions}$ ) , 以及 $\color{orange}{overflow}$ 属性的值除 $\color{orange}{visible}$ 以外的块盒，将为其内容建立新的块格式化上下文。
$\color{orange}{MDN}$ 上对 $\color{orange}{BFC}$ 的定义：

块格式化上下文（Blcok Formatting Context , BFC）是 $\color{orange}{Web}$ 页面的可视 $\color{orange}{CSS}$ 渲染的一部分，是块盒子的布局过程发生的区域也是浮动元素与其他元素交互的区域。
更加通俗的描述：

① $\color{orange}{BFC}$ 是 Block Formatting Context（块级格式上下文）, 可以理解成元素的一个“特异功能” (隐藏属性)

② 该”特异功能“ , 在默认的情况下处于关闭状态; 当元素满足了某些条件后，该”特异功能“被激活。

③ 所谓激活”特异功能“，专业点说是：该元素创建了 $\color{orange}{BFC}$ ( 又称：开启了 $\color{orange}{BFC}$ )

18.2开启了BFC能解决什么问题

【父元素】开启了 $\color{orange}{BFC}$ 后 , 其子元素不会再产生 $\color{orange}{margin}$ 塌陷问题。【解决父子元素外边距重叠】
元素开启了 $\color{orange}{BFC}$ 后 , 自己不会被其他浮动元素所覆盖。【清除浮动的覆盖】
【父元素】开启了 $\color{orange}{BFC}$ 后 , 就算其子元素浮动，元素自身高度也不会塌陷。【高度塌陷】

18.3如何开启BFC

根元素 <html></html>
浮动元素
绝对定位、固定定位的元素
行内块元素
表格单元格： $\color{orange}{table}$ 、 $\color{orange}{thead}$ 、 $\color{orange}{tbody}$ 、 $\color{orange}{tfoot}$ 、 $\color{orange}{th}$ 、 $\color{orange}{td}$ 、 $\color{orange}{tr}$ 、 $\color{orange}{caption}$
$\color{orange}{overflow}$ 的值不为 $\color{orange}{visible}$ 的块元素
伸缩项目
多列容器
$\color{orange}{column-span}$ 为 $\color{orange}{all}$ 的元素 ( 即使该元素没有包裹在多列容器中 )
$\color{orange}{display}$ 的值，设置为 $\color{orange}{flow-root}$ (副作用最小 )