各种盒子特效

盒子大小

height: 100px;
width: 100px;
box-sizing: content-box;
box-sizing: border-box;

box-sizing：用来设置盒子尺寸的计算方式

属性

• content-box：默认值，高度和宽度代表内容区的大小
• border-box：宽度和高度代表整个可见框的大小，设置边框宽度和内边距时内容区往里缩，当内边距超过盒子大小才会扩大

normal 默认值 从from到他哦
reverse 从to到from
alternate 从from到to 重复执行时反向执行轮廓与圆角

outline: 10px red solid

outline用来设置轮廓线，属性和border一样，区别就是不会影响布局

阴影

box-shadow: 10px 20px 50px rgb(0,0,0,.3);

设置元素的阴影

• 第一个值是水平偏移量，正值向右，负值向左

• 第一个值是垂直偏移量，正值向下，负值向上

• 第三个值，模糊半径

• 第四个值代表，阴影颜色

圆角

• 以圆画圆角

border-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/* 左上/右下 右上/左下  */
border-radius: 10px 50px;
/*  左上 右上、左下 右下*/
border-radius: 10px 30px 50px;
/* 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;

• 以椭圆画圆角

/* 第一个值代表水平半径a，第二个值代表垂直半径b */
border-radius: 10px/40px;

• 圆

/* 圆形 */
border-radius: 50%;

文本垂直对齐

vertical-align: middle;
vertical-align: 10px;

文本都是在基线(baseline)上面的，使用vertical-align设置对齐方式

值

• 正值向上移动，负值向下移动

• top：顶部对齐

• baseline：默认值，沿基线对齐

• bottom：底部对齐

• middle：在父元素里居中

主要是这个可以解决图片布局的问题，图片在默认情况下是有基线的，它在父元素里并不会把父元素占满，而是在基线之上，去除这个影响就可以使用这个属性，更改默认值就行了

文本溢出处理

当一行文本超过屏幕宽度或指定宽度时，设置处理方式

/*默认值*/
white-space: normal;
/*
	nowrap:不换行
	pre：保留格式
*/
/*超出后的范围隐藏*/
overflow:hidden;
/*显示省略号*/
test-over-flow: elipsis;

背景

background-clip:裁剪背景

• 值
  • border-box:默认值，背景会出现在边框下面
  • padding-box：背景不会出现在边框，出现在内容区和内边距
  • content-box：出现在内容区

background-orgin：背景偏移计算的原点

• 值
  • padding-box：默认值，position从内边距开始计算
  • content-box：从内容区计算
  • border-box：从边框计算

background-size：设置图片大小

• 第一个值代表宽度，第二个值代表高度
• cover：按照图片比例将元素铺满
• contain：图片比例不变，在元素中完整显示

简写注意

size必须写在position后面，使用/隔开

orgin和clip必须按照顺序来

background: center center / cover content-box content-box;

渐变

渐变就是将一个颜色向其他颜色进行过渡的效果，需要注意的是，渐变是图片，所以需要使用background-image设置

线性渐变

/* 表示从1px/red到30px/green开始渐变 ，默认从上到下*/
background-image: linear-gradient( red 1px,green 30px);
/* to right/left/top/bottom ,to right bottom */
background-image: linear-gradient(to right, rgb(145, 12, 12),green);
/* deg表示度，turn表示圈 */
background-image: linear-gradient(45deg,red,green);
/*平铺，从1-30像素的渐变平铺*/
background-image:repeating-linear-gradient(red 1px,green 30px);

径向渐变

使用的时候查api，不怎么常用

介绍一下基本语法

background-image:radial-gradient(大小 at 位置, 颜色 位置,颜色 位置);

过渡

/*指定属性，all代表所有属性*/
transition-property: height,width;
/*延迟时间*/
transition-duration: 1s,ms;

• 可以指定一个属性发生变化的切换方式

• 提升用户体验

过渡的时序函数

指定过渡的执行方式

transition-timing-function: ;

可选值

• ease 默认值，加速-> 减速

• linear 匀速运动

• ease-in 加速运动

• ease-out 减速运动

• ease-in-out 慢->加速->减速

• cubic-bezier() 使用贝塞尔曲线

  • https://cubic-bezier.com/#.49,.5,.48,.51

• steps() 分步执行过渡效果

  • steps(3,end);
  • 第二个值代表时间起始，默认值end表示时间结束，start表示开始时间执行

延迟

transition-delay: 2s;

• 延迟i执行

简写

• 第一个时间是持续时间

transition: 1s 2s ease all;

动画

与过渡类似(有它的所有属性)，但不需要用属性触发，是动态的

• 动画效果必须要设置一个关键帧，代表动画执行的步骤

@keyframes test {
/* 开始位置，0% */
from{
width: 100px;
height: 100px;
}
/* 结束位置 ，100%*/
to{
width: 200px;
height: 200px;
}
}

• 然后添加动画属性

/* 执行的的动画关键帧 */
animation-name: test;
/* 持续时间 */
animation-duration: 2s;
/* 
	指定动画运行的方向
	可选值
		normal 默认值 从from到他哦
		reverse 从to到from
		alternate 从from到to 重复执行时反向执行
		alternate-reverse 从to到from 重复执行时反向执行
*/
animation-direction: alternate;
/* 
	动画执行次数
         	 可选值
          	  数字
          	  infinite 无限执行
*/
animation-iteration-count: infinite;
/*  延时*/
anmation-delay:2s;
/* 
	设置动画执行状态
	可选值
		running 默认值 动画执行
		paused 暂停
*/
animation-play-state: running;
/* 
	动画填充模式
	可选值
		none 默认 执行完回到原来位置
		forwards 执行后停到结束位置
		backwards 动画延时等待时，处于from的位置
		both 结合上面两个
*/
animation-fill-mode: none;

还有时序函数等等，和过渡一样

简写

• 注意延时和延迟时间顺序即可
  • 第一个代表延迟，第二代表延时

animation:1s 2s 2 alternate;

变形

transform: translateX(-100px);
transform: translateX(50%);
/*正值右 下，负值上左*/

通过css改变元素的形状或位置，不会影响布局

transform用来设置这种效果

平移

• translateX()
• translateY()
• translateZ(),需要设置视窗大小(perspective)才有用

例子：当元素大小确定时可以使用绝对路径 ，过度约束来居中

但是对于大小不确定的元素，需要变形比较方便，比如

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

旋转

transform: rotateY(1turn) translateZ(800px);

指定元素沿着x y z轴旋转的角度（单位deg，turn）

• rotateX()
• rotateY()
• rotateZ()

附一张坐标图

注意旋转和平移的顺序，旋转后坐标轴会变化

• 是否显示元素背面

backface-visibility: visible;
backface-visibility: hidden;

3d效果要使用transform-style: preserve-3d;

缩放

将元素进行缩放和放大

• scaleX() 水平缩放
• scaleY() 垂直
• scale() 双方向

原点

变形原点

transform-orgin:20px 20px;
/*默认值center*/

弹性盒

• flex（弹性盒）是CSS的布局手段，是用来代替浮动的

• 使元素具有弹性，让元素随页面的大小改变而改变

弹性容器

dispaly: flex;
dispaly: inline-flex;

设置上面两个其中一个属性就是弹性容器了

• flex-direction
  • row 默认值 弹性元素水平排列（左到右）
  • row-reverse 水平反向排列
  • column 纵向排列
  • column-reverse 纵向反向排列
• 主轴：排列方向就是主轴
• 辅轴：与主轴垂直的方向
• flex-wrap 设置元素是否换行
  • nowarp 默认，不换行
  • warp 沿辅轴方向换行
  • warp-reverse 沿辅轴反方向换行
• flex-flow warp和direction的简写属性
• justify-content 主轴上空白的分布
  • flex-start 主轴起边排列
  • flex-end 终边排列
  • center 主轴中居中排列
  • space-around 空白分配到元素两侧
  • space-between 空白均匀分配到元素间，两端没有
  • space-evenly 空白分配到元素单侧
• align-items 辅轴排列元素
  • stretch 默认 将元素长度设置为相同的值
  • flex-start 元素不会拉伸 沿辅轴起边对齐
  • flex-end 沿终边对齐
  • center 辅轴中居中对齐
  • baseline 基线对齐
• align-content 辅轴空白的分布
  • flex-start 辅轴起边排列
  • flex-end 辅轴排列
  • center 辅轴中居中排列
  • space-around 空白分配到元素两侧
  • space-between 空白均匀分配到元素间，两端没有
  • space-evenly 空白分配到元素单侧

弹性元素

• flex-grow 设置伸展系数
  • 定义了元素在多余空间的容器内怎么分布
  • 每个元素都设置时按照比例分配
• flex-shrink 收缩系数
  • 当容器不够放下子元素时子元素的变化
  • 1 默认值 等比例收缩
  • 数值越大代表收缩越厉害
• align-self 覆盖当前的align-items
• flex-basis 指定元素在主轴上的基础长度
  • 主轴横向则代表宽度
  • 纵向代表高度
  • 默认auto，根据元素自身
  • 指定数值则以数值为准
• flex 简写属性
  • flex grow shrink basis
  • initial(0 1 auto)
  • auto(1 1 auto)
  • none(0 0 auto)
• order 指定排列顺序
  • 根据指定值排列顺序