一、定位position
布局方法：文档流、浮动、层布局（定位）
- 三种定位：相对定位、绝对定位、固定定位
定位元素的层级设置： 设置了定位的元素可以通过z-index属性调整层级关系，默认值都是0，数字越大层级越高，数字相同，层级跟标签的顺序有关，标签越靠后层级越高
1、相对定位（子绝父相）
-
position:relative;
-
不脱离文档流，在文档中原本的位置依然为其保留
-
偏移参考位置： 元素本身在文档流内原本的位置
2、绝对定位
-
position:absolute;
-
脱离文档流，在文档中原本的位置不保留
-
偏移参考位置(定位父级)： 离绝对定位元素最近的一个带有position属性的祖先元素，如果不存在这样的元素就是参考body定位
3、固定定位
-
position:fixed;
-
固定定位的元素会脱离文档流，在文档流中原本的位置不保留
-
偏移参考位置: 浏览器的可视区
定位偏移属性偏移属性：
left : 正右,负左
right ： 正左,负右
top ： 正下,负上
bottom： 正上,负下
left/top和right/bottom通常使用一个，如果同时使用left/top生效
脱离文档流的元素不会自动占满一行，宽度默认是由内容撑开
4、静态定位
-
position:static;
-
没有定位，偏移属性失效（left/right/top/bottom）
-
层级(z-index)也失效
二、圆角
1、简写属性
border-radius:10px; 四个角圆角半径统一
border-radius:10px 20px; 左上和右下 右上和左下
border-radius:10px 20px 30px; 左上 右上和左下 右下
border-radius:10px 20px 30px 40px; 左上 右上 右下 左下
border-radius:50%;---是个圆
2、分解属性
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 80px;
三、变形 transform
简写属性
transform:rotate(-30deg) scale(0.5,2);
1、旋转
transform:rotate(30deg); 正数顺时针，负数逆时针
2、缩放
transform:scale(n); 水平和垂直同时缩放 n 取值 0-1之间缩小 , n>1 就是放大
transform:scale(n-x,n-y); n-x：水平方向的缩放值,n-y垂直缩放值
四、关键帧动画
1、定义动画的关键帧
@keyframes move-动画名称{
0%{}
25%{}
50%{}
75%{}
100%{}
}
2、调用动画
简写属性
animation: move 3s linear infinite alternate;
动画属性
animation: animation-name animation-duration animation-iteration-count animation-timing-function animation-delay animation-direction;
-
animation-name: 调用的动画名称
-
animation-duration:整个动画过程需要的时间 s(秒)/ms(毫秒)
-
animation-iteration-count:动画执行的次数 n/infinite（无限次）
-
animation-timing-function: 动画速度曲线
-
ease 慢-快-慢
-
linear 匀速
-
ease-in 慢-快
-
ease-out 快-慢
-
ease-in-out 慢-快-慢
-
cubic-bezier(.08,.73,.42,.93) 贝塞尔曲线 https://cubic-bezier.com/
-
-
animation-delay: 动画延迟时间 s/ms
-
animation-direction: 动画的方向 alternate(轮流反向)
-
animation-fill-mode: 动画结束位置 forwards(停在终点)
五、过渡动画
过渡使用场景：一般用于元素正常状态和鼠标移入状态（:hover）属性变化时，出现平滑过渡效果
动画属性
transition:transition-property transition-duration transition-timing-function transition-delay;
-
transition-property:过渡的属性名 ，all(所有变化的属性都过渡)
-
transition-duration:过渡的时间 s/ms
-
transition-timing-function: 过渡的速度曲线，取值同关键帧动画
-
transition-delay：过渡延迟时间 s/ms
多个属性过渡
transition: width 2s linear,height 4s ease,...;
- 使用示例
情况1
.box{
width: 100px;
transition:all 0.5s linear;<!-- 鼠标脱离时的过渡 -->
}
.box:hover{
width: 200px;
transition:all 2s linear; <!-- 鼠标悬停时的过渡 -->
}
情况2
.box{
width: 100px;
<!-- 鼠标脱离时没有过渡效果 -->
}
.box:hover{
width: 200px;
transition:all 2s linear; <!-- 鼠标悬停时的过渡 -->
}
情况3
.box{
width: 100px;
transition:all 0.5s linear;<!-- 鼠标悬停和脱离时都有过渡，并且效果相同 -->
}
.box:hover{
width: 200px;
}
- 关键帧动画和过渡动画的区别
| 关键帧动画 | 过渡动画 |
|---|---|
| 动画可设多个状态 | 动画只有两个状态（开始和结束） |
| 可多次（无限次）运行 | 触发一次运行一次 |
| 不可自动执行,需伪类触发 | 不会反复运行 |
六、阴影
1、 盒子阴影
属性
box-shadow:x-shadow y-shadow blur spread color inset;
- x-shadow : 必需，水平阴影位置 ，正数向右偏移，负数向左偏移
- y-shadow : 必需，垂直阴影位置 ，正数向下偏移，负数向上偏移
- blur : 可选，阴影的模糊距离
- spread: 可选，阴影的扩展尺寸
- color: 可选，阴影的颜色
- inset: 可选，不设置表示外阴影，设置inset表示内阴影
多组阴影
box-shadow:x-shadow y-shadow blur spread color inset,x-shadow y-shadow blur spread color inset, ... ;
2、 文字阴影
text-shadow:x-shadow y-shadow blur color;
- x-shadow : 必需，水平阴影位置 ，正数向右偏移，负数向左偏移
- y-shadow : 必需，垂直阴影位置 ，正数向下偏移，负数向上偏移
- blur: 可选，阴影的模糊距离
- color:可选，阴影的颜色 默认和文字颜色相同
多组阴影：x-shadow y-shadow blur color,x-shadow y-shadow blur color,...;
七、三角和箭头
1、小三角
实现思路：把盒子宽高设置为0,保留一个边框的颜色，其他边框设置为透明
.box{
width: 0px;
height: 0px;
border: 50px solid;
border-color: red transparent transparent;
}
2、小箭头
实现思路：实现两个三角，通过定位让两个三角部分重叠，上一层三角颜色设置成和背景相同的颜色
<div class="arrow1"></div>
.arrow1{
position: relative;
width: 0px;
height: 0;
border: 50px solid;
border-color: red transparent transparent;
margin-top: 10px;
}
.arrow1::after{
position: absolute;
left: -50px;
top: -55px;
content: '';
width: 0px;
height: 0px;
border: 50px solid;
border-color: #fff transparent transparent;
}
八、透明兼容
1、rgba() 模式颜色： 可以给文字和背景设置颜色(IE低版本不兼容)
给元素设置背景透明时，不会影响里面的内容
2、opacity:0-1; 0完全透明，1不透明，0.X半透明(IE低版本不兼容)
元素整体透明，元素本身以及里面的内容全部透明
3、filter:alpha(opacity=50) IE低版本浏览器专用透明滤镜，效果等同于opacity属性，0代表完全透明，100代表不透明
九、居中技巧
1、父级尺寸未知，子元素尺寸已知
.outer{
position:relative; /*父元素相对定位*/
}
.inner{
width:300px;
height:200px;
position:absolute; /* 子元素绝对定位*/
left:50%; /*盒子偏右*/
top:50%; /*盒子偏下*/
margin-left:-150px; /* 设置为子元素宽度的一半（负值），往左移*/
margin-top:-100px; /* 设置为子元素高度的一半（负值），往上移*/
}
2、父级尺寸和子元素尺寸都可以未知
.outer{
position:relative; /*父元素相对定位*/
}
.inner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:300px;
height:200px;
}
十、浮动和定位对比
布局方法：文档流、浮动、层布局（定位）
- 文档流：指的是元素按照本身的属性进行排列，块元素从上往下垂直排列，行内元素从左往右
- 文本流：元素在页面出现的先后顺序
| 浮动（水平布局） | 定位（层布局） |
|---|---|
| 通常用来实现水平得多列布局（左右、左中右、四列、五列） | 通常用来实现元素之间固定的位置关系，或者有覆盖关系的 |
| 所有元素（块级、行内、行内块）都可浮动 | 所有元素（块级、行内、行内块）都可定位 |
| float:left/right; 会使元素脱离文档流 | position:absolute/fixed;会使元素脱离文档流 |
| 浮动元素脱离文档流,不脱离文本流（文字、图片、表单元素不会被浮动元素覆盖） | 定位的元素既脱离文档流，又脱离文本流 |
- 脱离文档流的元素特点
| 不再区分行内和块级 |
|---|
| 默认宽高都是由内容撑开 |
| 能设置宽高，所有盒模型属性 |
十一、css精灵图（雪碧图）
英文叫法 CSS sprites , “css贴图定位”或“css图像拼合”。
原理： 把一些小图片拼在一张图片上，通过背景引入，用背景定位调整显示的图标。
适合一些小图标，不适合大图背景。
| 优点 | 缺点 |
|---|---|
| 减少网页http请求次数，提高页面性能 | 必须要规定好容器的尺寸 |
| 减少图片命名困扰 | 背景定位的值也必须精确计算 |
| 更换风格方便 | 相对比较麻烦 |
十二、PS操作
1、移动工具 ：用来定位图层，或者移动图层
2、历史记录 : 用来返回前面一些操作
- 撤回 ctrl+z 撤回多步 ctrl+shift+z
- 直接返回初始状态 F12
3、吸管工具： 用来取页面的色值
4、标尺工具：用来量尺寸
5、放大镜工具： 用来放大或者缩小画布
- ctrl+ 加号 放大
- ctrl+ 减号 缩小
- 按住alt + 鼠标滚轮 向上滚动放大 向下滚动缩小
6、抓手工具：用来移动整个画布
- 按住空格键 + 鼠标左键按下拖拽
7、文字工具：添加文字图层，或者选取文字图层，查看文本样式信息
8、保存切片：
- 存储为web所用格式，快捷键：ctrl+alt+shift+s
- 设置切片格式和品质
- 切片选项：
- 所有切片（划分的切片 + 整个页面剩余的部分）
- 用户切片（指的是自己划的切片）
- 选中的切片 （指定部分切片保存）
9、ctrl+T ： 自由变换工具，改变图层大小
1、网页中的常见图片格式
-
jpg 色彩丰富，文件相对小,有损压缩，反复保存质量下降 使用场景-广告/商品图/照片
-
gif 支持动图,文件小 只支持256种颜色 色彩简单的小图标icon/动图
-
png 支持透明,简单图尺寸较小 色彩丰富的图片尺寸大，不支持动图，适用透明图片
-
webp 支持透明、动画,文件小、质量高 浏览器兼容性不好 只能在支持它格式的设备上显示
2、切透明图标
-
方法一：
-
定位到图层-去掉显示为透明、最下面图层6 layer0也隐藏
-
切片-存png24半透明/全透明 png8是全透明
-
-
方法二：
- 复制小图标，新建粘贴 去掉背景即可看透明图标—ctrl a全选+ctrl c复制+ ctrl n新建时是选择设置为透明
3、制作精灵图
-
复制小图标（ctrl a +ctrl c) 复制图层 （ctrl j）–点击图层-混合选项-颜色叠加–设置图标颜色
-
图层编组 ctrl+G
-
合并图层 ctrl+E
4、静态大banner图优化
-
从重要内容使用img标签，修饰的图案使用背景图片这个原则，需要把中间部分切成图片 ，两边剩余的部分作为大背景图
-
中间部分可以再划分成几个小切片，为了防止网络情况不好大图请求超时