web前端知识总结二（css（其他）+移动web网页开发）
文章目录
web前端知识总结二（css（其他）+移动web网页开发）字体图标平面转换-位移位移：绝对定位居中开门效果旋转转换原点多重转换 例：轮胎移动缩放布局层叠性渐变空间转换透视空间旋转左手法则立体呈现3D导航CSS3动画逐帧动画走马灯移动端视口二倍图百分百布局Flex布局/弹性布局justify-content主轴 align-content侧轴align-itemsalign-self伸缩比修改主轴方向实现盒子水平居中弹性盒子换行溢出省略号移动适配remrem媒体查询rem移动适配flexible移动适配Lessvscode插件less嵌套变量导入导出vw/vh响应式媒体查询link引入隐藏bootstrap插件使用插件使用字体图标
使用字体图标技巧实现网页中简洁的图标效果
字体图标展示的是图标，本质是字体
灵活性、轻量级、使用方便:1、下载字体包 2、使用字体图标
i class=“iconfont iconfont-location”
iconfont：https：///
上传矢量图： 设计师设计svg矢量图，上传iconfont网站 下载使用
平面转换-位移
transform：translate（） 水平移动距离，垂直移动距离
像素单位数值
百分比(移动自身宽高的百分比)
技巧：只给一个值，只往x轴方向移动
单个方向：translateX()&translateY（）
.father{width:500px;height:300px;margin:100px auto;border:1px solid #ccc;}.son{wdith:200px;height:100px;background-color:pink;transition:all 1s;}.father:hover .son{tramsform:translate(100px,50px);/translate(100%,50%);}
位移：绝对定位居中
position：absolute；left：50%；top：50%；transform：translate（-50%，-50%）；
开门效果
.box::before，.box::after{float：left；content：‘ ’；width：50%；height：600px；background-image：url(./iamges/fm.jpg);transition:all 0.5s;}.box:hover::before{transform:translate（-100%）;}.box:hover::after{transform:translaterX(100%);}
旋转
rotate实现旋转效果
transform：rotate
角度单位 deg度；正负值
img{width:250px;transition:all 2s;}img:hover{transform:rotate(360deg);}
转换原点
transform-origin： 水平位置 垂直位置；
默认盒子中心
left right top center bottom
像素单位数值 百分比
transform-origin：right bottom 右下角transform-origin：left top 左上角
多重转换 例：轮胎移动
transform：translate（） rotate（）两个位置不能换
缩放
transform:scale(x,y);transform:scale(缩放倍速);
布局
::after
层叠性
transform：translate()
transform：scale()
两个分开，上面那个不生效
要写在一个里面
渐变
使用background-iamge属性
设置盒子背景
background-image：linear-gradient{颜色1，颜色2transparent，rgba(0,0,0,0.6)}
.box .mask{position:absolute;left:0;right:0;opacity:0;width:300px;height:212px;background-image:linear-gradient{transparent,rgba(0,0,0,0.6)};}.box:hover .mask{opacity:1;}<div class=box><div class="mask"></div></div>
空间转换
transform 实现元素在空间内的位移、旋转、缩放
z轴与视线方向相同
transform：translate3d（x，y，z）； xyz取0-1数字
translateX translateY translateZ
像素 百分比
透视
perspective实现透视
添加给父级 取值:800—1200px 离屏幕的距离
近大远小
body{perspective：1000px；}.box{width：200px；height：200px；margin：100px auto；background-color：pink；transition：all 0.5s；}.box:hover{transform:translateZ(200px);正近 负远transform:translateZ(-200px);}
空间旋转
transform：rotateZ();
.box{perspective：1000px；}img{width:300px;transition:all 2s;}.box img:hover{transform:rotateX(60deg);向下翻转 围绕x轴transform:rotateZ(-60deg);平面旋转 围绕z轴transform:rotateY(60deg);向里翻转 围绕Y轴}
左手法则
判断旋转方向：左手握住旋转轴，拇指指正值方向，手指弯曲方向为旋转政治方向。。。
立体呈现
父元素使用transform-style：preserve-3d;
.cube{position:relative;width:200px;height：200px；margin：100px auto；transition：all 2s；transform-style：perserve-3d；}.cube div{left:0;top:0;width:200px;height:200px;}.front{background-color:orange;transform:translateZ(200px); 向我走近200px =与back距离200px}.back{background-color:orange;}.cube:hover{transform:rotateY(90deg);}<div class="cube"><div class=front><div class=back></div>
3D导航
li标签：添加transform-style：preserve-3d; 添加旋转属性
a标签定位 子绝父相 英文部分添加旋转和位移 中文部分添加位移
。nav li{position:relative;float:left;width:100px;height：40px；margin：100px auto；transition：all 2s；transform-style：perserve-3d；//看到立体//transform：rotate（-20deg） rotateY（30deg）;}.nav li a{position:absolute;left:0;top:0;display:block;width:100%;height:100%;text-align:center;text-decoration:none;color:#ccc；}.nav li a:first-child{background-color:green;transform:translateZ(20px);往前移}.nav li a:last-child{background-color:orange;//使一个a 变成像正方体上面transform:rotateX(90deg) translateZ(20px);旋转 向上移}鼠标移动立方体旋转 向下转.nav li:hover{transform:rotateX(-90deg);}
CSS3动画
定义动画@keyframes 动画名称{from{}to{}}@keyframes 动画名称{//动画时长占比0%{}10%{}50%{}100%}使用动画animation：动画名称 动画花费时长
例子：
.box{width:200px;height:100px;background-color:pink;animation:change 1s;}@keyframes change{from{width:200px;}to{width:600px;}}
animation:动画名称 动画时长 速度曲线：linear、steps(3)分布动画延迟时间 重复次数：数字、无限循环infinite动画方向：alternate 反向执行完毕时状态：backwards初始状态、forwards最后状态暂停动画：paused 配合：hvoer使用；
2个时间值 前一个表示动画时长 后一个表示延迟时间
background 复合属性：color image repeat attachment positionbackground-color：background-imagebackground-repeatbackground-attchmentbackground-position
animation-play-state；paused
逐帧动画
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
改变背景图位置
添加steps（）与精灵图小图个数相同 添加无限重复
.box{width:140px;height:140px;border:1px solid #ccc；background-image:url(./images/bg.png);animation:move 1s steps(12) infinite,run 1s forwards;}@keyframes move{from{background-position：0 0；}to{background-position:-1680px 0;}}@keyframes run{from{//动画开始状态和盒子的默认样式相同的，可用省略开始状态的代码transform:translateX(0);}to{transform:translateX(800px);}}
走马灯
<div class="box"><ul><li><img ></img></li><li><img ></img></li><li><img ></img></li><li><img ></img></li><li><img ></img></li><li><img ></img></li></ul></div>.box{width:600px;height:112px;border:5px solid #ccc;margin:100px auto;overflow:hidden;}.box ul{width:2000px;animation:move 5s infinite;}.box li{float:left;}@keyframes move{to{transform:translateX(-1400px);}}.box:hover ul{animation-play-state:paused;}
移动端
pc屏幕大，网页固定版心
手机屏幕小，宽度多数100%
屏幕尺寸：屏幕对角线的长度，英寸度量
硬件分辨率：物理分辨率
软件调节的分辨率：逻辑分辨率
iphone 6/7/8 物理分辨率750x1334 逻辑分辨率375x667 2：1
视口
使用meta标签设置视口宽带，制作适配不同设备宽度的页面
<meta name="viewport" content="width=device-width,initial-scale=1.0">
二倍图
能够使用像素大厨软件测量二倍图中元素的尺寸
为了高分辨率下图片不会模糊失真
百分百布局
也叫流式布局，宽度自适应，高度固定
.toolbar li{
float:left;
width：20%；
height：50px；
}
Flex布局/弹性布局
目标：能够使用Flex 布局模型灵活快速开发
父元素添加display:flex;
子元素自动拉伸 挤压
.box{display:flex;justify-content:space-between;}
浏览器提倡的布局模型
避免浮动脱标
搜索支持flex的浏览器
默认主轴：水平
默认测轴：垂直
justify-content调节元素在主奏的对其方式
调节主轴或侧轴的对齐凡是来设置盒子之间的间距
justify-content主轴 align-content侧轴
属性值
align-items
调节元素在侧轴的对齐方式
align-self
单独设置某个弹性盒子的侧轴对齐方式
.box div:nth-child(2){align-self:center;}
没有给宽度，根据内容延伸
伸缩比
子容器添加flex：值
只占用父盒子剩余尺寸
修改主轴方向
flex-direction改变元素排列方向
属性值
row行默认
column列 垂直
row-reverse行 从右到左
column列 从下向上
实现盒子水平居中
justify-content:center;align-items:center;
弹性盒子换行
换行显示
父级添加
flex-wrap：wrap；不换行 nowrap
+align-content：center 换行之后全部聚在一起居中+align-content：space-around 两侧的间隔是盒子之间的间隔1/2+align-content：space-between 两侧无间隔
溢出省略号
.orders .goods .txt{flex:1;width:0;溢出显示省略号因为弹性盒子的尺寸可以被内容撑开，不换行的文字可用这个盒子的尺寸}.order .goods .txt h5{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
移动适配
网页元素的宽高都要随着设备的宽度等比缩放
rem：目前多数解决方案
vw/vh：未来的解决方案
rem
屏幕宽度不同，网页元素尺寸不同（等比缩放）
相对单位
相对于html标签的字号计算结果
1rem=1html字号大小
html{font-size:20px}.box{width:5rem;height:3rem;}<div class="box">
rem媒体查询
设置差异化css样式
@media （媒体特性）{选择器{css属性；}}@media （width:320px）{html{font-size:32px;}}
rem移动适配
实现不同宽度的设备中，网页元素尺寸等比缩放效果
将网页等分成10份，html标签的字号为视口宽度的1/10；
视口宽度320px，根字号为32px@media（width：320px){html{font-size:32px;}}@media（width:375px){html{font-size:37.5px;}}@media（width：414px){html{font-size:41.4px;}}
计算公式 N=rem
N*37.5=68->N=68/37.5
尺寸=px/基准根字号
flexible移动适配
flexble.js 是手淘开发出的一个适配移动端的js框架
根据不同的视口宽度给网页中的html根节点设置不同的font-size
直接导入引用
Less
使用Less运算写法完成px单位到rem单位的转换
css不支持计算写法
使用Less语法快速编译生成css代码
除法需要添加小括号或./
.father{color:red;width:(68/37.5rem);.son{background-color:pink;}}
Less保存css自动生成相应代码
.father{color:red;width:1.8133333rem;}.father .son{background-color:pink;}
.less是一个css预处理器
注意浏览器不识别less代码，目前阶段，网页要引入对应的css 文件
vscode插件
Easy Less：less 文件自动生成css 文件
注释
单行 // ctrl+/
块注释 shift+alt+A
less嵌套
.父选择器{.子选择器{}}
&表示当前选择器，配合伪类或伪元素使用
&：hover
&.off
变量
定义变量：@变量名：值
使用变量：css属性：@变量名；
导入
less文件引入其他less文件
导入：@import“文件路径”； less文件可用省略后缀
导出
一、配置easyless插件，实现所有less文件相同导出css路径
在setting 设置
pile：{out：../css/}
二、单独导出路径
第一行+// out：./qqq/daqiu.css
// out:./qqq/dasd/
禁止导出：// out：false
vw/vh
不能混用
vw:viewport width
vh:viewport height
根据视口尺寸计算
1vw=1/100视口宽度
1vh=1/100视口高度
vw单位尺寸=px /（1/100视口宽度）
（68/3.75vw）
响应式
媒体查询
@media （媒体特性）{选择器{css属性；}}
max-width:768px = <=768 从大到小写
min-width :768px = >=768 从小到大写
完整格式 and only not @media 关键词 媒体类型 and（媒体特性）{选择器{css属性；}}
link引入
外链css 引入
<link rel="stylesheet" media="逻辑符 媒体类型 and（媒体特性)" herf="xx.css">
两个样式
<link rel="stylesheet" href="./one.css" media="(min-width:992px)"><link rel="stylesheet" href="./two.css" media="(min-width:12000px)">
隐藏
如果检查小于768 认为移动端 隐藏盒子
@media（max-width：768）{,left{display:none;}}
bootstrap
快速开发栅格系统布局响应式网页
默认12等份
<div class="container"><div class="col-lg-3 col-md-6">1</div><div class="col-lg-3 col-md-6">1</div><div class="col-lg-3 col-md-6">1</div><div class="col-lg-3 col-md-6">1</div></div>
.container 是bootstrap中专门提供的类名 默认指定宽度且居中自带15内间距
.container-fluid 宽度100%
.row类自带间距 -15px
<.container><class=row></div></div>
其他标签参考官方文档
插件使用
引入bootstrap样式
引入js文件：jq.js+bootstrap.min.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O4zj9XAF-1662725581311)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-090950846.png)]
| 超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 |
| -------- | -------- | -------- | -------- | -------- |
| 响应断点 | <768px | >=768px | >=992px | >=1200px |
| 别名 | xs | sm | md | lg |
| 容器宽度 | 100% | 750px | 970px | 1170px |
| 类前缀 | col-xs-* | col-sm-* | col-md-* | col-lg-* |
| 列数 | 12 | 12 | 12 | 12 |
| 列间隙 | 30px | 30px | 30px | 30px |
<div class="container"><div class="col-lg-3 col-md-6">1</div><div class="col-lg-3 col-md-6">1</div><div class="col-lg-3 col-md-6">1</div><div class="col-lg-3 col-md-6">1</div></div>
.container 是bootstrap中专门提供的类名 默认指定宽度且居中自带15内间距
.container-fluid 宽度100%
.row类自带间距 -15px
<.container><class=row></div></div>
其他标签参考官方文档
插件使用
引入bootstrap样式
引入js文件：jq.js+bootstrap.min.js
