盒子隐藏
样式：
display：none；
背景系列
background属性。
background-color 设置元素的背景颜色。
background-img 将图片设置为元素的背景。
background-color
颜色的表示方法：
1.单词
red blue
2.rgb
red green blue 三原色 饱和度 0-255
3.16进制
0-9 a-f #ff0000
20=
f=15
255=15*15=ff
对于10进制来说 100=10*10
对于16进制来说 255=15*15=f*f ff
10=1*16=16
12=1*16+2=18
28=2*16+8=40
16进制的af等于10进制的多少？
10*16+ 15=175
所有的十六进制的颜色都是以#开头的。
所有的#aabbcc的形式，都可以简写为#abc。
常用的颜色：
#000 黑色
#fff 白色
#f00 红色
#222 深灰
#333 灰色
#ccc 灰色
背景图
将图片设置为背景。
background-image: url("图片的路径");
背景图片会铺满盒子的整个背景区域。
background-repeat:
repeat(平铺 默认值)
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
background-img
设置图片为背景。
background-size:设置背景图片的大小
属性值：px 单词
单词：
都会让图片等比例缩放。
cover 将盒子铺满背景图，但是不保证图片的完整显示。
contain 将图片完整的显示，不保证铺满盒子。
background-repeat 设置背景图片是否重复以及如何重复，默认为平铺满。
属性值：
repeat:平铺 默认值
no-repeat:不平铺
repeat-x 水平上平铺
repeat-y 垂直上平铺
background-position
规定插入的背景图在盒子中的位置。
默认从左上角开始显示背景图。
1.像素
background-position: 水平偏移量（正向右） 垂直偏移量（正向下）;
2.百分比
图片在左上角是 0% 0%
图片在右下角是100% 100%
代表的像素值：（盒子的宽/高-图片本身的宽/高）*百分比
也可以为负数。
3.单词
top
bottom
center
left
right
如果只有一个值，默认另外一个值为50%
应用场景：
1.网页的背景图
2.通栏banner
3.精灵图/雪碧图（音译）
提高网页的响应速度，减少服务器的压力。
使用技巧：
1.在h1中使用背景图，再将文字首行缩进溢出隐藏，有利于网站的SEO优化。
background-attachment;
设置图片是否随着页面的滚动而滚动
属性值：
fixed：背景会被固定，不会随滚动条滚动
scroll 默认属性，会随滚动条滚动。
精灵图：综合写法
color image repeat attachment position
background:red url("img/bs.jpg") no-repeat fixed 100px 200px;
background-origin 背景原点
padding-box 从内边距开始显示背景 默认值
border-box 从边框开始显示背景
content-box 从内容开始显示背景
background-clip 背景裁切
border-box 默认值 超过边框部分的背景，将被裁剪掉。
padding-box 超过padding部分的背景，将被裁剪掉。
content-box 超过内容部分的背景，将被裁剪掉。
text-shadow 文本阴影。
格式：
text-shadow: 水平偏移量 垂直偏移量 模糊度 阴影颜色;
盒子：
边框圆角
border-radis
属性值：px 百分比
border-radis：水平半径 垂直半径
border-radis:10px;
以10px为半径，画圆，以得到的弧度为边角。
可以按照四个角来设置：
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-radius: 左上 右上 右下 左下;
省略的角度，取对角的值。
半圆：
1.矩形
2.宽是高的2倍。
3.左上右上圆的半径为宽的一半
半径写法：
border-radius: 150px/200px; 水平半径/垂直半径
盒子阴影
box-shadow
格式： box-shadow:水平偏移 垂直偏移 模糊度 阴影大小 阴影颜色 内阴影/外阴影
线性渐变：
格式：
background-img:liner-gradient(方向,起始颜色...终止颜色);
方向：to left,to right,to top,to bottom
角度 deg
百分比写法
background-image: linear-gradient(45deg,yellow 0%,green 40%,cyan 70%,#ff6700 100%);
径向渐变
background-img：radial-gradient(辐射的半径大小 中心的位置，起始颜色，…终止颜色);
中心的位置：
单词
at center
at left
at top
at right
at bottom
px
按照左上角进行位移
w3c
会员：各大互联网巨头
它设定了整个平台的规则，监督整个过程。
现在学习的是css2.1 但是到css3时，就要考虑兼容性问题。
浏览器前缀
谷歌 苹果 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-
sass
过渡
transtion 过渡
之前：元素从一个状态到另一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。
css3新增了过渡这个属性，可以实现元素不同状态的平滑过渡。
transition-porperty：制定过渡的属性。all为指定所有属性都有过渡效果，必须。
transition-duration：制定过渡的时间单位可以说s或者ms，必须
transition-delay：制定过渡生效的延迟时间。
transition-timing-function:
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
过渡属性 完成时间 运动曲线 延迟时间
transition：all 3s linear 1s;
一般有数值/中间状态的属性才可以设置过渡，比如：width，height
缩放，位移，旋转，倾斜
transform 属性
缩放：
放大缩小。
格式
transform：scale(x,y);
x:代表水平方向的缩放倍数
y：代表垂直方向的缩放倍数。
如果只写一个值，代表等比例缩放。
不会改变真实宽高，也不会旁边的盒子造成影响
位移 translate
格式：
tramsform：translate（水平位移，垂直位移）
属性值：
px 正值：向右或向下。
百分比 是按照盒子本身的宽高。
只写一个值时，是水平位移
转：rotate
格式： transform：rotate（角度）
单位：deg
transform-origin: 变换原点
格式： transform-origin: 水平坐标 垂直坐标
px
百分比 按照盒子的宽高。50%=center
单词 left center等
transform 后面可以书写多个转换，但是书写顺序不同，效果不同。
对于
transform: translate(100px) rotate(90deg);
transform:rotate(90deg) translate(100px) ;
第一种会先位移，再旋转
第二种会先旋转，再位移。
倾斜 skew
格式：transform：skew（水平倾斜角度，垂直倾斜角度）
单位是deg，正值 顺时针，负值逆时针。
所有的转换属性，只能添加给块级元素，行内元素无效。
3D旋转：
transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度。
rorateX，X轴旋转
rorateY，Y轴旋转
rorateZ Z轴旋转
旋转的方向：左手法则
左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。
位移：
transform: translateX(); //沿着x轴移动
transform: translateY();//沿着Y轴移动
transform: translateZ();//沿着Z轴移动
transform: translate3d(x,y,z);
perspective 透视：
translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。
设置给变换盒子的父容器。
透视：
设置用户眼睛与屏幕的距离。
透视效果只是视觉上的呈现，不是真正的距离