1.文本样式
color:设置文本颜色
text-align:设置文本对齐方式
center
left
right
letter-spacing:字间距/字母间距
word-spacing:单词间距,有空格就设置,中文看空格.
line-height:行高(第二行的行高=第一行底部到第三行顶部)
text-indent:一般30px就2个
text-decoration:文本装饰
underline:下划线
overline:上划线
line-through:删除线
不添加任何修饰：none
添加多个文本修饰：underline overline line-through(通过空格键隔开)
text-transform:大小写转换
uppercase:全部大写
lowercase:全部小写
capitalize:每个单词以大写开头
text-shadow:创建文本阴影(水平偏移量px,垂直偏移量px,模糊程度px,阴影颜色),模糊程度px值高越模糊.
2.设置字体样式
font-style:字体样式italic,oblique斜体
font-size:设置字体的大小 尽量用偶数
font-weight:设置字体的粗细,bolder最粗
font-family:设置文字字体,楷体,隶书等等
font简写属性: style weight size family(空格)顺序必须按这个格性之后 把行
间距letter-spacing放font属性后边,不然会覆盖.
3.边框与背景
border-width:边框宽度
border-style:边框样式
none没有边框
dashed虚线
solied实线
double双线
groove槽线
dotted圆点线边框
inset内嵌 outset外凸
ridge 脊线边框
bolder-color:边框颜色
简写形式border:width style color 没有先后顺序
单独设置某一条边框
border-top/bottom/left/right-width/style/color
简写形式:border-top{width,style,color}
应用圆角边框
/* radius 共有几个值。8个值！！！ */
border-radius: 100px 10px 10px 10px/10px 10px 10px 10px;
(x半径,y半径,xy相同时写一个就好了)
border-top/bottom-left/right-radius
简写:border-radius
设置元素背景
background-color:背景颜色（只能跟颜色）
background-image:url()背景图（只能跟图片）
background：后面既可以跟颜色跟图片 平铺 位置（可同时填写）
background-repeat:设置背景图片是否平铺
no-repeat（不平铺） repeat-x(x方向平铺) repeat-y(y方形平铺)
background-position:背景图片 引入坐标（x轴为正 y轴为负）
可用px/left
background-size:100%（背景图片的宽设为盒子的宽 多余的隐藏（删除））
background-size:cover(背景图片的高设为盒子的高 多余的隐藏（删除）)此两个不可同时出现
创建盒子阴影
box-shadow 用于向方框添加阴影： 0px（x轴上的阴影部分） 0px（y轴上的阴影部分） 15(模糊程度) red(颜色) 为盒子四周都有阴影
4.其他样式
1.表格
表格
border-collapse相邻单元格边框处理,合并表格=collapse
border-spacing:相邻单元格间距
2.列表
列表
list-style-tyle:列表前边的标记样式 圆点,方点等等
list-style-image:列表图像标记
简写:list-style:none 取消列表的所有属性 去除小数点等样式
3.透明度
opacity:设置透明度(0-1之间取值)
背景图片透明度 一般用 background:rgba();
4.光标形状
cursor:设置光标形状,当光标放在某个div上边,设置等待状,手形状等等.
cursor:pointer;手指 auto 光标
5.盒子模型
1.设置一定尺寸的元素
1). width:设置元素宽度
2). height:设置元素高度
2.设置内边距
padding-top/bottom/right/left
padding:简写形式
3.设置外边距(边框到浏览器边缘或者到下一个盒子的距离)
margin-top/bottom/left/right
margin:简写形式
4.设置最小和最大尺寸(宽度设置为百分比时,扩大或缩小浏览器或者换了大屏或小屏显示器之后,防止元素错位或溢出)
min-width:最小值
min-width:设置最小宽度为多少 用于原来宽为浏览器100%（内有图片或背景），缩小后，有滚动条（即此时页面宽度比浏览器大），滚动条向右拉，图片右侧存在间隙，即用此方式解决，将浏览器最小宽度(min-width)设为版心（一般这样设置）
max-width:最大值
6.处理元素内容溢出
overflow-x/y:x或y轴溢出
overflow:简写形式: scroll设置滚动条(溢出处理方式)
hidden隐藏 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
7.改变元素类型
1).元素类型分为:
inline行内元素:在页面中不可设置宽高,也不会独占一行,b,span
inline-block行内块级元素:不能独占一行,但能设置宽高.img元素
block块级元素:独占一行,可以设置宽高,p,div元素
2).改变元素类型display:
元素类型可以相互转换,转化之后元素性质也随之改变
div一般不转化为行内元素,会丢掉,不能设置高
3).隐藏元素: display:none
8.浮动和阻止元素堆叠
浮动:float:left/right
消除元素堆叠在一起: clear:both(左右都消除)
9.定位position
1.定位position
static：默认,元素为普通元素,文档流定位,从上到下
固定定位：position:fixed；相当于浏览器窗口来定位(固定在窗口上了，不会随着滑轮的移动而移动)（类似于悬浮窗口）
绝对定位：position:absolute；相对于有定位的父级元素来定位的(固定在了父级上的一个位置 会随着父级的移动而移动)
相对定位：position:relation;相对于原来没有定位时的位置来移动
单位:% px
z-index:1(数值)
2.定位布局
top/bottom/left/right
10.z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
元素可拥有负的 z-index 属性值。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）
11.transtion过渡
1.transtion过渡属性
transition-property 规定设置过渡效果的 CSS 属性的名称
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
2.一般写作
transtion:all 0.3s ; all表全部属性 0.3表示时间
3. transition-timing-function 规定速度效果的速度曲线。
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
12.变形
transform: 指定如何变形
transform: scaleX/Y(1.5) 缩放转换 缩放1.5倍 scale3d(x,y,z) 也可
scaleX(x) scaleY(y) scaleZ(z)
transform: rotate(360deg) 旋转360度 deg代表度数,配合过渡时间 效果很好
rotate3d(x,y,z,angle)定义3D旋转
transform: skew(X轴角度,Y轴角度) 倾斜的角度
transform: translate(X轴距离,Y轴距离) 移动的距离
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
13.动画
动画
animation: box1_img 5s（执行时间） infinite（反复）;
@keyframes box1_img{
0%{
left: -300px;
opacity: 0;
transform: rotate(0deg);
}
30%{
left: 500px ;
opacity: 1;
transform: rotate(360deg);
}
70%{
left: 500px ;
opacity: 1;
transform: rotate(360deg);
}
100%{
left: -300px;
opacity: o;
transform: rotate(0deg);
}
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒
animation-timing-function 规定动画的速度曲线。
animation-delay 规定动画何时开始。
animation-iteration-count 规定动画被播放的次数。
animation-direction 规定动画是否在下一周期逆向地播放。
animation-play-state 规定动画是否正在运行或暂停。
animation-fill-mode 规定对象动画时间之外的状态。
14.媒体查询
媒体查询
引用link
做一个media的css
方法一
@media screen and (max-width:800px){
.box{
background:green；
}
}
方法二
media="screen and (max-width:800px)"在link上写
15.滤镜
Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能
grayscale 灰度 值为0-1之间的小数
sepia 褐色 值为0-1之间的小数
saturate 饱和度 值为num
hue-rotate 色相旋转 值为angle
invert 反色 值为0-1之间的小数
opacity 透明度 值为0-1之间的小数
brightness 亮度 值为0-1之间的小数
contrast 对比度 值为num
blur 模糊 值为length
drop-shadow 阴影
16.单行与多行出现省略号
单行文本出现省略号(例如作业22)
overflow:hidden;
white-space:nowrap;（文本不换行）
text-overflow:ellipsis;
多行文本时出现省略号的方式
overflow: hidden; overflow：hidden对于溢出到padding的文字不会隐藏
text-overflow:ellipsis
/* 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性，比如下面的两个 */
-webkit-line-clamp: 3;
/* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式，这里是垂直 */
-webkit-box-orient: vertical;
vertical
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
