pc端1
ul里面的li写文字默认是换行显示的 不需要换行显示需要加
white-space: nowrap;
文本超出部分显示省略号（一行内容超出）
.pic .text {
/* 溢出时候显示省略号
弹性盒子能够靠内容撑开 给盒子设置宽度为0 */
flex: 1;
width: 0;
}
.pic .text h6 {
font-weight: 400;
/* 强制使内容在一行显示 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 溢出文本省略号显示 */
text-overflow: ellipsis;
}
本超出部分显示省略号（两行内容超出）
p{
display: -webkit-box;
overflow: hidden;
white-space: normal!important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
去掉图片默认的间隙
img {
display: block;
max-width: 100%;
}
字体图标
使用字体图标技巧实现网页中的简洁的图标的效果
展现的是图标 本质是字体 能够处理简单的、颜色单一的图片
优点：灵活性（灵活修改样式、尺寸颜色等）、轻量级（体积小、渲染快、降低服务器请求次数）、兼容性、使用方便
1.使用字体图标-unicode编码：引入link找到 iconfont.css 设置文字字体 font-family:'iconfont'
2.*一般都是用这种方式类名：引入字体图标样式 调用图标对应类名，必须调用两个类名：iconfont iconXXX
上传矢量图：
1.拿到SVG矢量图 2.iconfont网站上传SVG图标 3.去除颜色提交 4.加入购物车统一下载使用。
使用在线图标地址：在线地址的代码发在link里面 ，类名写好两个类名
font-class字体图标原理：对应的标签 添加一个伪元素 这个伪元素设置content属性 属性值等于 、\unicode图标
平面转换-2d转换
位移
transform ：translate(水平移动距离，垂直移动距离)；（trf:t快捷方式）
取值：像素单位，百分比（相对于自身盒子尺寸）
盒子居中
单闭合标签不能使用伪元素：img、input等闭合标签
方案一：父元素相对定位，子元素绝对定位 给一个位置 一个外边距为自身宽高的-50%（只有translate百分比是相对于自身的）
方案二：
transform: translate(-50%,-50%);
控制元素只在一个方向上位移，方式有两种：transform：translateX(Y)(数值);
双开门
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
/* 溢出隐藏 */
}
.box{
position: relative;
margin: 50px auto;
width: 1366px;
height: 600px;
background-image: url(../03-渐变/images/car.jpg);
}
/* 用定位找到两个子元素的位置 ,子元素的宽度为父元素的一半*/
.left,
.right{
position: absolute;
top: 0;
width: 50%;
height: 100%;
transition: all 1s;
background-image: url(../03-渐变/images/twocar.jpg);
/* 加一个过渡效果 */
}
.left{
/* 盒子本身的尺寸是背景图的一半 */
left: 0px;
}
.right{
right: 0px;
/* 设置背景图片的位置，找右侧图片 x轴方向移动一整个盒子的距离*/
/* background-position: 100% 0; */
background-position: right;
/* 找到背景图片的最右侧 默认为左上 改为右边就行*/
}
.box:hover .left{
transform: translateX(-100%);
}
.box:hover .right{
transform: translateX(100%);
}
旋转
语法：transform：rotate（角度deg）;值是正数就是顺时针选择，负数是逆时针旋转
默认情况下以自己的中心点旋转
转换旋转原点：transform-origin属性改变原点：原点水平位置 原点垂直位置；
方位名词（left top top bottom）;像素 百分比（相对于自身盒子尺寸）
多重转换不能分开写 只能写复合属性 不然会覆盖 ，位移和旋转同时出现 需要先位移再旋转
缩放
使用scale改变元素尺寸
transform：scale(x轴缩放倍数 y轴缩放倍数)；等比例缩放加一个值
渐变
渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景（装饰图片背景的功能）
background-image: linear-gradient(
green 20%,
blue 50%,
yellow 100%
);
方位名词 to bottom从上到下；to top从上到下，to right top右上角
background-image:linear-gradient(
to right top,pink,red
);
角度
background-image: linear-gradient(
0deg ,skyblue, pink
);
背景透明色 transparent
background: linear-gradient(transparent, rgba(0,0,0,.8));
opacity透明度（整体变透明）
动画特效需要用平面位移性能更高
渐变：渐变没有过渡效果 ； display:none 渐变 背景图片 没有过渡效果
图片背景渐变效果不完善慎用 如果需要用一个盒子div包裹两个图片 两个盒子定位到同一个位置
div hover再让一个图片隐藏 另一个图片显示
<style>
div{
position: relative;
width: 350px;
height: 274px;
background-color: blue;
}
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.one{
opacity: 1;
}
.two{
opacity: 0;
}
.one:hover{
opacity: 0;
}
.two:hover{
opacity: 1;
}
</style>
</head>
<body>
<div>
<img class="one" src="./images/pic1.png" alt="">
<img class="two" src="./images/pic2.png" alt="">
</div>
立方体
1 控制多个面先定位 重叠在一起
2 3d变换 构造立方体
1 上： y轴的负方向 移动高度的一半 沿着x轴渲染90deg
2 前： z轴的正方向 移动高度的一半
3 a标签开启 3d 立体空间
4 a标签鼠标移入
让a标签 沿什么轴 旋转 x 轴
伪元素鼠标悬浮 .box:hover::after 这样写**
| 动态的调试谷歌浏览器中的px的时候 | |
|---|---|
| 1 直接按下 箭头上下键 1个px 给你 微调 | |
| 2 直接按下 alt+箭头上下键 0.1个px 给你 微调 | |
| 3 直接按下 shift+箭头上下键 10个px 给你 微调 | |
| 4 直接按下 ctrl+箭头上下键 100个px 给你 微调 |
pc端2
空间转换-3d转换
z轴眼睛到电脑屏幕的方向即前后，x轴是左右方向，y轴上下方向
复合属性transform:translate3d（x, y ,z）
因为电脑是个平面 所以z轴效果看不到，如果想要看的到z轴效果 需要给父级添加一个perspective属性，一般取值为1000px
perspective实现透视效果也称视距（人多眼睛到被观察物体之间的距离 要给被观察的物体的父元素使用） 取像素值 一般在800-1200px，能实现近大远小
旋转： 使用rotate实现空间旋转效果 ：
左手法则：左手握住旋转轴 ，拇指指向正直方向，手指弯曲方向为旋转正值方向（普通的旋转相当3d于沿z轴旋转）
动画
利用animation添加动画效果，动画的本质是快速切换大量图片时在人脑中形成具有连续的效果 单位是帧
定义动画
@keyframes 动画名词{
from{}
to{}
}；
使用动画：animation：动画名称 动画花费时长；(多种效果时候用百分比 百分比是时长)；
动画复合属性：
animation：动画名称！ 动画时长！ 速度曲线time-function（linear直线；steps（分部）） 延迟时间（默认状态） 重复次数（infinite无限循环） 动画方向（alternate先正再反向，reserve先反再反） 执行完毕时状态（backwards最初的状态 forwords最后的状态（加了执行完毕的状态后需要把重复次数的无限循环去掉 反向也去掉））；
@keyframes size {
10% {
width: 600px;
}
50% {
width: 500px;
height: 200px;
}
100% {
width: 800px;
height: 300px;
}
}
a:hover .box{
animation-name: size;
animation-play-state: paused;
/* 鼠标点击后停止播放 */
}
配合精灵图做动画的一定是逐帧动画，基本上都是补间动画
animation-timing-function: steps(N);
将动画过程等分成N份
1.准备显示区域：设置盒子尺寸就是一张小图的尺寸，背景图为当前精灵图的尺寸，设置精灵图N就是小图的个数
2.定义动画：改变背景图的位置（移动的距离就是精灵图的宽度）
3.使用动画： 添加曲线step（N）
animation: move 1s steps(12) infinite,
run 10s forward;
/* 定义两个动画效果需要一个动画名称属性结束后加，下一个动画名称加属性 */
如何知道浏览器对样式有没有兼容性caniuse网站，谷歌浏览器对于大图结合背景效果的时候不稳定
走马灯案例：
1 两个大盒子 1 外层盒子 设置 宽度和高度 2 里层盒子 用来存放多张图片（里面要存放多少张图片 设置宽度为多少！！ ） 3 设置动画 1 设置内层盒子的位移 等于 真实的那几张图片的位移！ 2 设置动画无线滚动！！ -->
过渡存在四个属性：tranisition property:
移动端
移动端特点：打开谷歌调试工具 。
手机的逻辑分辨率 即屏幕的宽高单位是px
手机的设备分辨率 屏幕中一共拥有的物理像素点。屏幕中显示图像最小的单位
**PPI：**屏幕清晰度
多少清晰度对应多少倍图
理想视口 ：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 理想视口 viewport视口 设置视口 视口的宽等于手机屏幕的宽 initial-scale=1.0 打开网页时候 放大倍数 user-scalable=no 控制是否允许 用户双击 手指 捏合的手势来缩放网页-->
移动端布局：1.不会定版心 2.元素的大小
flex布局（弹性布局）
设置方式：父元素添加display：flex
设置flex后的父项子项默认属性：
1.父项设置flex布局 子项默认有和父项一样的高度 宽度由内容撑开
2.子项设置浮动没有效果
3.子项设置定位 margin translate 没有影响
4.flex子项不会自动换行 如果元素多就缩小自身宽度让都在一行显示 ，如果需要换行显示需要加flex-wrap：wrap；属性
主轴对齐方式justify-content
主轴：=x轴=水平方向 默认情况是水平方向
1.justify-content: flex-start; 左侧对齐
2.justify-content: flex-end; 右侧对齐
3.justify-content: center；居中对齐
4.justify-content: space-between; 先两侧再中间
5.justify-content: space-around; 均分但是左右间隔小于中间间隔
6.justify-content: space-evenly; 绝对平均
flex换行显示：
flex-wrap：wrap；（默认值nowrap）
侧轴：y轴=垂直方向单行显示：
1.align-items：flex-start 上对齐
2.align-items：flex-end 下对齐
3.align-items：center 垂直方向居中对齐
侧轴：y轴=垂直方向多行显示：
即加了flex-wrap：wrap；后的父项使用
1.align-content：flex-start 上对齐
2.align-content：flex-end 下对齐
3.align-content：center 垂直方向居中对齐
4.align-content: space-between; 先两侧再中间
5.align-content: space-around; 均分但是左右间隔小于中间间隔
6.align-content: space-evenly; 绝对平均
设置主轴的方向：
主轴是哪个方向 跟着设置justify-content 和 align-content
1.默认的主轴方向是行排列从左到右 flex-direction: row；
2. flex-direction: row-reverse; 一行排列从右向左排列 3.flex-direction: column; 一列排 从上到下
4. flex-direction: column-reverse; 一列排 从下往上
子项
**默认效果：**1.宽度由内容撑开；2.高度等于父项高度；3. flex: 1;设置子项的宽度；4.align-self设置子项在侧轴上对齐
flex：设置子项占父项宽度（高度）的比例： flex: 2;
设置子项自身在侧轴上对齐方式：align-self: center（flex-start，flex-end）;
span:nth-child(3) {
flex: 2;
background-color: yellowgreen;
align-self: center;
}
改变对齐方式为conlum：默认效果 1 .高度由内容撑开；2.宽度等于父项宽度；3. flex: 1;设置子项的高度；4.align-self设置子项在主轴上对齐
移动端、pc端
.box {
display: flex;
margin: 100px auto;
width: 900px;
height: 600px;
background-color: pink;
flex-direction: column;
}
span {
width: 200px;
/* height: 100px; */
flex: 1;
align-self: center;
background-color: skyblue;
}
span:nth-child(3) {
flex: 2;
background-color: yellowgreen;
align-self: flex-start;
}
移动端适配
px是绝对长度 尺寸是固定的 不适合开发移动端 移动端用vw vh简单。
为了让屏幕不同的手机看到的元素等比例放大或者缩小，移动适配重点在单位上。
要适配手机屏幕（100vw）/设计稿的宽度=要适配屏幕中div宽度/设计稿中div的宽度。（设计稿中宽度和div宽度是已知的，适配手机屏幕是100vw：适配的手机div的宽可以计算）
*适配的手机宽度=要适配手机屏幕（100vw）设计稿中div宽度/设计稿的宽度
vw、vh单位
vw是相对长度单位 相对于屏幕的宽度 （需要找到参照物）
100vw=屏幕的宽度
1vw=屏幕的宽度/100
vh是相对长度单位 相对于屏幕高度 （需要找到参照物）
100vh=屏幕高度
calc
calc运算符 运算符两侧都加空格
div{
width: calc(50vw - 300px);
height: 30vh;
background-color: pink;
}
比如设计稿尺寸是375 有两个盒子；
盒子1：宽度100px 高度50px；字体大小40px
盒子2：宽度200px 高度100px；字体大小20px
做屏幕适配：
.dd{
width: calc(100vw * 100 / 375) ;
height: calc(100vw * 50 / 375) ;
background-color: pink;
font-size: calc(100vw * 40 / 375);
}
.dl{
width: calc(100vw * 200 / 375) ;
height: calc(100vw * 100 / 375) ;
background-color: rgb(73, 208, 218) ;
font-size: calc(100vw * 20 / 375);
}
rem
屏幕的大小改变->影响了字体大小的变化->进而影响rem的尺寸
rem相对长度单位：大小相对于页面跟标签字体大小（设置 rem大于等于12）
参照物是跟标签字体大小，跟标签的字体大小默认是16px，那么1rem=16px（谷歌默认字体大小是16px）
10倍跟标签字体大小就等于屏幕的宽度，即10rem=屏幕的宽度
1rem等于设计稿的宽度/10
配置rem和vw方法
快速使用vw：配置"px2vw.width": 375,通过插件可以快速生成vw数值
快速使用remrem调用js文件 并且配置 "cssrem.rootFontSize": 37.5,（1rem等于设计稿的宽度/10 所以是37.5）
less：
变量：
语法：@+变量名称：数值；
less是一种提高编写css效率的技术=》css预处理器（less scss stylues技术名词）
1.新建XXX.less文件 2.按照less语法要求在less文件中编写代码 3.通过easy less vscode插件编译文件 4.会生成对应的css文件 5.在网页中引入之间编译好的css文件
运算：
默认的css不支持运算，需要使用calc（），less支持运算：使用easyless做除法运算需要加（）
混合：
语法：定义变量名称 .X（）{P变量值} 使用： .X（）；
.theme(@t1,@t2){
background-position: @t1,@t2;
background-image: url(../day6/b站/images/download.png);
}
div{
.theme(40px,30px)
}
响应式、媒体查询
**响应式：**只写一套代码，可以在pc端运行也可以在移动端运行
**媒体查询：**根据屏幕宽度不同 去使用不同的css
语法：
@media screen and (width:450px){
body{
background-color: blueviolet;
}
}
媒体查询区间：
媒体查询区间不同效果不同
div {
width: 100%;
height: 26.6667vw;
background-color: brown;
margin-top: 8vw;
}
@media screen and (min-width: 400px) {
div {
width: 100%;
}
div::before {
content: "宽在400px一下四行排列";
}
}
@media screen and (min-width: 400px) and (max-width: 500px) {
div {
float: left;
width: 33%;
margin: 2.6667vw;
height: 26.6667vw;
background-color: blueviolet;
}
div::before {
content: "宽在400px-500px下两行排列";
}
}
@media screen and (min-width: 500px) {
div {
float: left;
width: 20%;
margin: 1.3333vw;
height: 26.6667vw;
background-color: hotpink;
}
div::before {
content: "宽在500px下一行排列";
}
}
</style>
bootstrap
1.<!-- 先引入bootstrap.css样式 -->
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
2.<!-- 再引入jquery.js样式 -->
<script src="./lib/jquery.js"></script>
3.<!-- 最后引入bootstrap.js -->
<script src="./lib/bootstrap/js/bootstrap.js"></script>
bootstrap核心栅格系统
语法：
- .container默认版心居中 .container-fluid全屏
- 栅格系统默认一行放12个 以列个数划分，
- 如果一行超过12个元素会和浮动一样自动换行显示
- 栅格系统自动设置了让较大屏幕去沿用较小屏幕的设置
- 栅格系统核心是媒体查询是一个容器 方便在不同宽度下表现不同的代码格式
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">1</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">2</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">3</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">4</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">5</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">6</div>
</div>
bootstrap将屏幕分成四种：
| 屏幕分类 | 屏幕尺寸 | 英文属性名 |
|---|---|---|
| 大屏幕 | 1200 | lg |
| 中等屏幕 | 992-1200 | md |
| 小屏幕 | 768-992 | sm |
| 最小屏幕 | <768 | xs |
