空间平面知识
字体图标
优点：
灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便： 1. 下载字体包 2. 使用字体图标
1.引入方式
<link rel="stylesheet" href="./iconfont/iconfont.css">
2.使用方法
2.1 使用编码
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
span {
font-family: 'iconfont';
height:100px;
width: 100px;
color: blueviolet;
}
</style>
</head>
<body>
<span></span>
</body>
2.2 使用类名
<div class="box">
<span class="iconfont icon-gouwucheman"></span>
<span>购物车</span>
<span class="iconfont icon-jiantou9"></span>
</div>
2.3 在线链接
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3243645_8568gh9eemr.css">
</head>
<body>
<span class="iconfont icon-Dyanjing"></span>
<span class="iconfont icon-caidan"></span>
</body>
2.4 搭配伪元素
<style>
a::after {
/* 设置字体图标库 */
font-family: iconfont;
content: "\e60b";
margin-left: 4px;
}
</style>
</head>
<body>
<a href="#">购物车</a>
</body>
2.5 font-class实现原理
给对应的标签添加一个伪元素，这个伪元素设置content的属性，
属性值等于字体图标uncicode编码
平面转换
1. 位移
1.1属性：
trantransform: translate(水平移动距离, 垂直移动距离);
1.2 取值：
-
像素单位数值
-
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
1.3 技巧
-
translate()如果只给出一个值, 表示x轴方向移动距离
-
单独设置某个方向的移动距离：
```
translateX() & translateY()
```
**注意点**
1.marginh和定位的百分比单位都是相对与父元素的
2.位移translate百分比是相对于自身的
1.4 绝对定位元素居中效果
1.使用定位+内边距
```html
<style>
.father {
position: relative;
height: 400px;
width: 400px;
background-color: pink;
}
.son {
position:absolute;
left: 50%;
top: 50%;
/* margin-left自身宽度的一半
margin-top:自身高度的一半 */
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: green;
}
</style>
```
2.使用定位+位移
```html
<style>
.father {
position: relative;
height: 400px;
width: 400px;
background-color: pink;
}
.son {
position:absolute;
left: 50%;
top: 50%;
/* 位移 translate 百分比单位 相对于自身的宽度和高度; */
transform: translate(-50%,-50%);
height: 200px;
width: 200px;
background-color: green;
}
</style>
```
2. 旋转
属性： transform: rotate(deg角度);
取值正为顺时针，负为逆时针。
2.1 转换原点
属性：transform-origin
技巧： 1.默认原点是盒子中心点
2. transform-origin: 原点水平位置 原点垂直位置;
取值：
1.方位名词（left、top、right、bottom、center）
左上角
transform-origin：left top;
右下角
transform-origin：right bottom;
2.像素单位数值
3. 百分比（相对盒子自身尺寸计算）
**注意点：**多种转换效果：当位移和旋转同时出现时，两种的效果不一样
1.先位移后旋转
2.先旋转再位移 （旋转的时候，坐标系的位置也在旋转变化）
优先写法：
使用 transform复合属性实现多形态转换
transform: translate() rotate();
3. 缩放
属性： transform: scale(x轴缩放倍数, y轴缩放倍数)
技巧注意：
- 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
- transform: scale(缩放倍数);
- scale值大于1表示放大, scale值小于1表示缩小
4.渐变
属性：
background-image: linear-gradient(颜色1，颜色2);
渐变的方向：
方位名词
1 默认值 to bottom 从上到下
2 上到下 to top
3 右上角 to right top
使用方法：
background-image: linear-gradient(to top,red,green);
总结
1 .要给 背景图片添加
2 .设置 多种渐变色
3 .设置 多种渐变色 分层
4 .设置 渐变颜色方向
4.1 方位名词
4.2 100deg
5.过渡
display:none 渐变 背景图片 没有过渡效果
重要结论：
1.渐变是没有过渡效果的
2.背景图片的渐变效果不是很完善，浏览器的支持性不好，谨慎使用
3.display:none没有过渡
假如说我们想要实现鼠标移入图片切换的渐变过程
首先div里面包装两个图片标签
1.先让一个图片隐藏，另一个图片显示
2.div hover的时候再让另一个图片隐藏，另一个图片显示
3.定位加透明度来实现 透明度有过渡
重要的扩展
过渡也存在速度曲线
transition-timing-function: step();
transition: all 1s
过渡有4个属性
1.想要实现过渡的 css属性名 width高
transition-property: all;
2.过渡持续的时间
transition-duration
3.过渡的速度曲线
transition-timing-function: step();
4.延迟的时间
transition-delay
5.复合写法
transition: all duration step() delay;
6.混乱点
最容易混乱的地方是不知道有些东西该写什么地方，以下将罗列出来
-
transition这个过渡需要写在要被hover的那个元素的类里
-
transform-origin改变旋转原点的要写在被hover的那个元素的类里
-
旋转 ，位移，缩放，渐变都写在hover里面
空间转换
1.空间位移
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
1 默认情况下看不到元素在Z轴的变化
2 z轴位置与视线方向相同。
连写属性：
transform: translate3d(x, y, z);
2.透视
属性： perspective 添加给父元素
定义： 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
transform: translateZ(值)看不到的z轴的变化，需要给父元素写上透视
取值：一般取800~1000px。
效果：近大远小，近实远虚
3.空间旋转
属性：
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
transform: rotate3d(x, y, z, 角度度数)
作用：
用来设置自定义旋转轴的位置及旋转的角度
取值：
x，y，z 取值为0-1之间的数字
使用：
要让元素呈现立体3d,需要几个步骤
1. 给父元素添加transform-style: preserve-3d
2. 按需求设置子盒子的位置（位移或旋转）
4.空间缩放
2d缩放只能缩放平面图形的宽度和高度
3d缩放是对空间的物体做缩放（立方体），能缩放立体物体的宽度，高度和厚度
属性：
transform: scaleX(倍数); 缩放宽度
transform: scaleY(倍数); 缩放高度
transform: scaleZ(倍数); 缩放厚度——前后的两个面的距离
transform: scale3d(x, y, z); 同时对长宽高做缩放
5.动画
定义：
- 与过渡两个状态的变化过程不同，动画是多种状态的变化
- 使用animation添加动画效果
1.添加动画效果的方法
@keyframes 动画名称 {
from {}
to {}
}
@keyframes 动画名称 {
0% {}
10% {}
15% {}
100% {} //百分比是时间进度
}
2.使用动画
annimation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
注意点：
-
动画名称和动画时长必须赋值
-
取值不分先后顺序
-
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
3.动画的属性
属性 作用 取值 animation-name 动画名称 animation-duration 动画时长 animation-delay 延迟时间 animation-fill-mode 动画执行完毕时状态 forwards：最后一帧状态 backwards：第一帧状态 animation-timing-function 速度曲线 steps(数字)：逐帧动画 animation-iteration-count 重复次数 infinite为无限循环 animation-direction 动画执行方向 alternate为反向 animation-play-state 暂停动画 paused为暂停，通常配合:hover使用
使用steps实现逐帧动画
这个有一个特殊的记法
当用来的添加动画的精灵图移动时，向其移动自身的宽度，
而step()里面的次数是自身的宽度除以一个盒子的宽度得出
移动端
分辨率
屏幕尺寸指的是屏幕对角线的长度，一般用英寸来度量
分辨率分类
1. 物理分辨率是生产屏幕时就固定的，它是不可被改变的
2. 逻辑分辨率是由软件（驱动）决定的
视口
-
目标：网页宽度和设备宽度(分辨率)相同。
-
解决办法：添加视口标签。
-
视口：显示HTML网页的区域，用来约束HTML尺寸。
meta标签
<meta name="viewport"content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
1.meta标签对网页设置语言，设置seo关键字
-
name告诉meta标签要设置什么地方
-
content设置的内容
1.width=device-width 视口的宽度等于屏幕的宽度
2.initial-scale=1.0 设置网页打开的时候，缩放的倍数1.0没有缩放（有需要时缩放网页）
3.maximum-scale=1 假如允许缩放，最大的缩放倍数是1.0
4.minimum-scale=1 假如允许缩放，最小的缩放倍数是1.0
5.user-scalable=no 控制是否允许用户双击手指或捏合手势来缩放网页
**no 不允许 靠不同的厂商浏览器自动缩放会脱离开发者的控制
**yes 允许缩放 开发者自己编写js代码来控制做到不同浏览器同样的手势功能
多倍图
属性：srcset
用来在不同尺寸手机匹配适合自己屏幕的图片
多倍图的了解：
目前前端主流看待多倍图的解决方式
1.市场上的手机不会有1倍图的清晰度屏幕
2.各大it公司直接使用高清的3倍图或者2倍图即可
图片使用3倍 ->3倍清晰屏幕完美图片
图片使用3倍 ->2倍清晰屏幕 至多只能感受2倍清晰 ，
浪费了一点点流量去加载不能直接显示完毕的3倍图
图片使用3倍 ->1倍清晰屏幕手机淘汰很少
————————————————————
图片使用2倍 ->3倍清晰屏幕 只能感受到 2倍清晰
图片使用2倍 ->2倍清晰屏幕 完美
图片使用2倍 ->1倍清晰屏幕 手机淘汰 很少
3.前端在写代码的时候 还是和以前一样美工给什么图片
我们直接通过 src属性使用什么图片
srcset 属性很少用!!!
布局
百分比布局
-
百分比布局， 也叫流式布局
-
效果： 宽度自适应，高度固定。
flex布局
-
flex布局是一种浏览器提倡的布局模型
-
布局网页更简单、灵活
-
避免浮动脱标的问题
flex布局 = 百分比布局 = 流式布局 = 自适应
1.设置方式：
父元素添加 display: flex，子元素可以自动的挤压或拉伸。
在添加了display: flex之后，div得到子元素会发生一些改变
1.设置了flex的盒子称之为父项
2.盒子里面的子元素称之为子项
2.方向：
主轴方向：x轴方向，水平向右
侧轴方向：y轴方向，水平向下
添加flex布局的变化
1.不再区分块级，行内和行内元素，全部都可以设置宽高
2.子项是默认的宽度和宽高，宽度由内容撑开，高度等于父项的高
3.子项使用float,clear, vertical-align没有效果
使用定位，margin，transform都有效
4.默认情况下，子项的总宽度大于父项的宽度的话也不会换行，
只会压缩自身的宽度
<style>
.box {
/* position: relative; */
height: 300px;
width: 300px;
background-color: pink;
display: flex;
/* 使用过渡有效 */
/* transition: all 1s; */
}
span {
/* 使用定位有效 */
/* position: absolute;
left: 200px; */
/* 使用浮动无效 */
/* float: right; */
/* 使用外边距有效 */
/* margin-left: 200px; */
height: 200px;
width: 200px;
background-color: blue;
}
/* .box:hover span {
transform: translateX(-200px);
} */
</style>
</head>
<body>
<div class="box">
<!-- 子项宽度大于父宽度也不会换行 -->
<span>flexflex</span>
<span>flexflex</span>
<!-- <span>flexflex</span>
<span>flexflex</span>
<span>flexflex</span>
<span>flexflex</span>
<span>flexflex</span>
<span>flexflex</span> -->
</div>
flex布局的组成部分
-
弹性容器
-
弹性盒子
-
主轴
-
侧轴 / 交叉轴
在flex布局中，我们通过调节主轴或侧轴的对齐方式来设置盒子之间的间距
1.主轴
1.1我们要使用justify-content 调节元素在主轴的对齐方式
| flex-start | 左对齐 |
|---|---|
| flex-end | 右对齐 |
| center | 全部居中 |
| space-between | 两边靠紧，中间平均空 |
| space-around | 两边留相同小空，中间平均大空 |
| space-evenly | 左右全部平分 |
主轴的对齐方式 (父项)
- justify-content: flex-start
默认值, 起点开始依次排列 (左对齐)
- justify-content: flex-end 终点开始依次排列(右对齐)
- justify-content :center
沿主轴居中排列
- justify-content : space-around
弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 (两边留空，中间空大于两边)
- justify-content : space-between
弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 (左右对齐，中间留空相同)
-
justify-content : space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
(绝对平分)
设置主轴方向： (父项)
属性： flex-direction
| row | 默认值 从左到右 |
|---|---|
| row-reverse | 从右到左 |
| column(常用) | 从上到下 |
| column-reverse | 从下到上 |
主轴方向改变之后要注意的点
1. 默认的宽度等于内容撑开
2. 默认的宽度等于父项的高
3. flex：1设置子项的宽度
4. align-self设置子项在侧轴的对齐方式
2.侧轴
我们要使用 align-items调节元素在侧轴的对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 上对齐 |
| flex-end | 下对齐 |
| center | 垂直居中对齐 |
| stretch | 默认值，弹性盒子沿着主轴线被拉伸至铺满容器 |
侧轴的单行对齐方式 (父项)
-
align-items: flex-start 默认值, 起点开始依次排列
(上对齐)
- align-items: flex-end 终点开始依次排列 (下对齐)
- align-items: center 垂直居中对齐
侧轴的多行对齐方式****（同主轴）****
使用 align-content 调整元素侧轴的多行对齐方式
**注意点：**使用flex-wrap换行之后，成为了侧轴的多行对齐，此时使用 align-content
| flex-start | 上对齐 |
|---|---|
| flex-end | 下对齐 |
| center | 全部居中 |
| space-between | 两边靠紧，中间平均空 |
| space-around | 两边留相同小空，中间平均大空 |
| space-evenly | 上下全部平分 |
设置子项自己在侧轴的对齐方式 (子项)
属性：align-self
属性值：
flex-start
flex-end
center
换行（父项）
属性：flex-wrap
值： no- wrap 默认值 不换行
wrap 换行
注意点：换行的元素会平分父元素的高度，如果子元素设置了高度，
那些高度仍然存在。
设置浏览器对于内容不要换行：
white-space:nowrap
flex布局默认就是会换行，但是对于文字不行
第一行文字末尾省略号：
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
可以指定第n行省略号
display: -webkit-box;
overflow: hidden;
white-space: normal!important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
子项的知识点：
1.默认的宽度等于内容撑开
2.默认的宽度等于父项的高
3.flex：1 设置子项的宽度，父项剩余的宽度
响应式布局
根据屏幕宽度的不同，去使用不同的css(媒体查询)
媒体查询
- 隐藏
@media(max-width:400px){
.left {
display:none;
}
}
- 使用方法
1.当设备宽度为400px时，body背景颜色改变
@media(width:400px){
body {
background-color: pink;
}
}
- screen 的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前发现很多网站都会直接省略screen,因为我们可能不需要考虑用户去打印时 。
@media screen and (width:600px) {
body {
background-color: rgb(60, 71, 129);
}
}
/*可以直接这样写*/
@media (width:600px) {
body {
background-color: rgb(60, 71, 129);
}
}
3. 是当页面宽度大于600px小于800px的时候执行下面的CSS
@media screen and (min-width:600px) and (max-width:800px){
body {
background-color: rgb(207, 65, 100);
}
bootstrap3
介绍
- 响应式框架
- 下载bootstrap生产环境，封装了html, css, js官网下载
- 引入bootstrap.css jquery.js(不同版本) bootstrap.js
类
1. container 响应式版心类
- 是bootstrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中
- container类自带间距15px
2. contain-fluid 通栏类
- 是bootstrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%
3.row/col类
-
container 和contain-fluid fe分别使用 .row类名和 .col类名定义栅格的行和列
-
.row类自带间距-15px
栅格系统
-
本质是媒体查询+浮动
-
把网页默认分成12等分
- 设备屏幕
如果我们只设置较小屏幕，比它大的屏幕默认会沿用它的设置
移动适配
在写移动端时，会有不同尺寸的手机屏幕，当不同宽度的手机设备打开我们的网页时，我们就想让元素适配不同宽度的手机，在宽度小的手机设备中显示的小一些，在宽度大的手机设备中显示的大一些。但是我们平常的px像素单位是绝对长度单位，大小是被固定的，元素无法根据设备宽度大小进行放大缩小，所以我们就有了相对的长度单位vw, vh 和rem。
1.vw/vh
-
相对长度单位
-
相对于视口的高度和宽度
-
最简单容易的，也是未来的发展趋势
-
100vw = 屏幕宽度
100vh = 屏幕高度
-
1vw等于视口宽度的1%。
1vh等于视口高度的1%。
-
计算公式：
要适配的设备屏幕元素的大小 = 100vw/vh * 设计稿中元素的大小 / 设计稿设备的宽度
-
在vscode中下载 px2vw插件，就可以在输入像素后有提醒转化的vw数值,非常方便，不用计算,要在
配置里设置设计稿的宽度。
2.rem
-
是相对长度单位
-
rem单位是相对于HTML标签的字号计算结果
1.根标签HTML默认的字号16px
2.可以修改HTML标签默认的字体大小
-
1rem = 1HTML字号大小
-
10rem = 屏幕宽度
-
在vscode中下载 px to rem & rpx (cssrem) 插件，就可以在输入像素后有提醒转化的rem数值,非常方便，不用计算
-
rem的计算公式:
要适配的设备屏幕元素的大小 = 10rem * 设计稿中元素的大小 / 设计稿设备的宽度
-
需要引入配合手机淘宝团队研发的flexible.js
<script src="./flexible.js"></script>
为什么要引入flexible.js这个脚本呢？
因为在屏幕的宽度的改变中，我们使用vw单位可以直接让元素发生改变。
但是在rem中，要让使用rem单位的元素发生改变有两步，第一步是先让页面中的html标签的
的字体大小改变，然后才到第二步元素发生改变。但是rem无法直接让页面中的html标签的
的字体大小改变，后来的手机淘宝的团队就开发了flexible.js，就可以一路直通，所以一定要引入
flexible.js！
less
-
是一种高效的css预处理器
使用less的过程
- 新建的less文件 (后缀名就是less)
- 会按照less的语法要求，在less文件中编写代码
- 通过easy less vscode插件来编译less文件
- 会生成对应的css文件
- 在网页中直接引入编译好的css文件即可
less的语法
-
变量
-
会变化的数据
-
作用：把一些css的属性设置在一个地方，实现一改全改
-
-
固定语法：
- @+有意义的变量名（有语义的英文）：
@font-size:16px; @background-color:pink; .box { height: 200px; width: 200px; font-size: @font-size; background-color: @background-color; } .box2 { height: 100px; width: 100px; font-size: @font-size; background-color: @background-color; } -
less支持数学运算
-
加减乘除
-
-
混合mixin
-
语法格式：
-
.变量名 () {}
-
-
调用变量：
变量 ()
.color (){ color: brown; } p, span { .color(); }语法格式：
- .变量名 (@形参1，@形参2) {}
调用变量：
2.变量 (实参1，实参2)
.aaa(@a1,@a2) { background-images:rul('1.jpg'); backgrouund-size:100%; background-repeat:no-repeat; background-position:@a1,@a2; } div { .aaa(-300px,30px); } -
-
less嵌套
-
伪元素前要加&连接
-
后代选择器加>，变成子代选择器
a { > b {} } 结果： a > b {}
-
