目录

一、盒子模型

盒子模型的概述

内容区域的宽度和高度

边框（border） 

二、浮动

浮动的作用及应用场景

清除浮动

三、定位

定位的概述

定位的基本使用

相对定位

绝对定位

 子绝父相

 固定定位

元素的层级关系

四、字体图标-Iconfont

字体图标-Iconfont的概述

字体图标的优点 

如何使用字体图标步骤 

五、平面转换

CSS3过渡概述

平面转换的概述

六、渐变

---

一、盒子模型

• 盒子模型的概述

解析：

1.CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域
（border）、外边距区域（margin
）构成，盒子模型如下图所示：

• 内容区域的宽度和高度

解析：

1.作用：利用width和height属性默认设置是盒子内容区域的大小

2.属性：width / height

3.常见取值：数字+px

• 边框（border） 

1.边框单个属性：

1.1、作用：给设置边框粗细、边框样式、边框颜色效果

1.2、属性如下图：

2.边框（border）- 连写形式
2.1、属性名：border
2.2、 属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red；

3.边框（border）- 单方向设置
3.1、 场景：只给盒子的某个方向单独设置边框
3.2、属性名：border - 方位名词
3.3、属性值：连写的取值

如：border-left：10px solid red；

4.内边距（ padding ）
4.1、作用：设置边框与内容区域之间的距离
4.2、属性名：padding
4.3、常见取值如下图：

记忆规则：从上开始赋值，然后顺时针赋值，如果没有赋值的，看对面的！ 

5.外边距（margin）
5.1、作用：设置边框以外，盒子与盒子之间的距离
5.2、属性名：margin
5.3、常见取值如下图：

记忆规则：从上开始赋值，然后顺时针赋值，如果没有赋值的，看对面的！

特别注意：若两个盒子都有外边距时取外边距大的值。

二、浮动

• 浮动的作用及应用场景

1、作用：网页布局
2、应用场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
3、属性名：float
4、 属性值：left 左浮动  right 右浮动

5、特点：
5.1、浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中
5.2、浮动元素比标准流高半个级别，可以覆盖标准流中的元素
5.3、 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
5.4、 浮动元素会受到上面元素边界的影响
5.5、浮动元素有特殊的显示效果

5.6、一行可以显示多个
5.7、可以设置宽高

特别注意：浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中。

• 清除浮动

1、含义：清除浮动带来的影响
2、影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
3、原因：子元素浮动后脱标 → 不占位置
4、 目的：需要父元素有高度，从而不影响其他网页元素的布局
5、方法：
5.1、直接设置父元素高度
5.2、 给父元素设置overflow : hidden

5.3、clear:both（在被影响的元素上使用）

三、定位

• 定位的概述

定位概述简介：
1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于盒子之间的层叠情况
定位应用场景：
1. 可以解决盒子与盒子之间的层叠问题，定位之后的元素层级最高，可以层叠在其他盒子上面。
2. 可以让盒子始终固定在屏幕中的某个位置。

• 定位的基本使用

1、设置定位方式
1.1、属性名：position
1.2、常见属性值如下图：

2、设置偏移值
2.1、 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
2.2、 选取的原则一般是就近原则 （离哪边近用哪个）

• 相对定位

1、 介绍：自恋型定位，相对于自己之前的位置进行移动
2、代码： position：relative
3、特点：

3.1、需要配合方位属性实现移动
3.2、相对于自己原来位置进行移动
3. 3、在页面中占位置 → 没有脱标

4、应用场景
4.1、配合绝对定位组CP（子绝父相）
4.2、用于小范围的移动

• 绝对定位

1、介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
2、 代码 position：absolute
3、 特点：

3.1、需要配合方位属性实现移动
3.2、默认相对于浏览器可视区域进行移动
3.3、在页面中不占位置 → 已经脱标

4、应用场景：

配合绝对定位组CP（子绝父相）

•  子绝父相

1、场景：让子元素相对于父元素进行自由移动
2、 含义：
2.1、子元素：绝对定位
2.2、父元素：相对定位
3、子绝父相好处：
3.1、父元素是相对定位，则对网页布局影响最小

•  固定定位

1、介绍：死心眼型定位，相对于浏览器进行定位移动
1.1、 代码：position：fixed
2、特点：
2.1、需要配合方位属性实现移动
2.2、相对于浏览器可视区域进行移动
2.3、在页面中不占位置 → 已经脱标
3、应用场景：
3.1、让盒子固定在屏幕中的某个位置

• 元素的层级关系

1、场景：改变定位元素的层级
2、属性名：z-index
3、属性值：数字
4、数字越大，层级越高

5、作用：防止该元素被覆盖

四、字体图标-Iconfont

• 字体图标-Iconfont的概述

解析：

1、字体图标展示的是图标，本质是字体。
2、处理简单的、颜色单一的图片。

• 字体图标的优点 

1、灵活性：灵活地修改样式，例如：尺寸、颜色等
2、轻量级：体积小、渲染快、降低服务器请求次数
3、兼容性：几乎兼容所有主流浏览器
4、使用方便：
4.1、下载字体包
4.2、使用字体图标

• 如何使用字体图标步骤 

1、这是阿里的矢量图标库链接：https://www.iconfont.cn/如下图所示：

2、登录（GitHub账号或者阿里账户，没有先注册） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地（也可使用在线链接，看个人情况）如下图下载

3、 使用字体图标：可使用i标签或者span标签引入

3.1.1、Unicode编码：

3.1.2、引入样式表：iconfont.css
3.1.3、 复制粘贴图标对应的Unicode编码 如下所示：

<span>&#xe603;</span>

3.2、类名

 3.2.1、引入字体图标样式表：<link rel="stylesheet" href="./fonts/iconfont.css">

3.2.2、调用图标对应的类名，必须调用2个类名：

 iconfont类：基本样式，包含字体的使用等
 icon-xxx：图标对应的类名 如所示：<i class="iconfont icon-duanxin"></i>

五、平面转换

• CSS3过渡概述

解析：

1、CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flas***或JavaScript。
2、CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

3.要实现这一点，必须规定两项内容：

3.1、指定要添加效果的CSS属性

3.2、指定效果的持续时间。

 这是演变该p宽变成300px的过程定义为2s：使用transition

p{transition: width 2s;-webkit-transition: width 2s; /* Safari */}p:hover{width:300px;}

• 平面转换的概述

一、位移：

解析：

1、平面转换：

1.1、 改变盒子在平面内的形态（位移、旋转、缩放）
1.2、 2D转换
2、平面转换属性：transform
3、语法：transform: translate(水平移动距离, 垂直移动距离);
4、取值（正负均可）
4.1、 像素单位数值
4.2、 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
使用小技巧：
1、translate()如果只给出一个值, 表示x轴方向移动距离
2、单独设置某个方向的移动距离：translateX() & translateY()

 二、旋转：

1、语法：transform: rotate(角度);
注意：角度单位是deg
2、技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

3、作用：旋转元素

三、转换原点

1、语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
2、取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）

3、作用：（就是改变原点的位置）

 四、多重转换

1、多重转换技巧：transform:translate() rotate();先位移后旋转

2、多重转换原理
2.1、 旋转会改变网页元素的坐标轴向
2.2、 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

五、缩放

1、语法
transform: scale(x轴缩放倍数, y轴缩放倍数);
2、使用技巧：
2.1、一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
2.2、transform: scale(缩放倍数);
2.3、scale 绝对值大于1表示放大, scale绝对值小于1表示缩小，-减号代表方向

六、渐变

解析：

1、渐变是多个颜色逐渐变化的视觉效果

2、语法：

background-image: linear-gradient(

                /* 颜色1，颜色2 */

            );

效果如图：