1.font字体

a.font-size字体大小 默认谷歌浏览器是16px; em单位,是body字体大小的倍数
b.font-weight字体粗细bold(700)  normal(400)strong和b默认是加粗的,可以用font-weight:normal;去掉加粗效果
c.font-style字体风格italic  倾斜em和i标签默认是倾斜的,可以用font-style:normal去掉倾斜效果normal  正常/默认的
d.font-family 哪种字体连写顺序:font: font-style  font-weight  font-size  font-family1.位置有顺序, 前面2个必须是font-weight和font-style2.后面两个必须是先写font-size再写font-family3.前面2个可以省略,后面2个不能省略

2.外观样式

color文本颜色
1.颜色单词 red green blue pink
2.rgb表示法 rgb(100,245,211);
3.十六进制表示法

text-align文本水平对齐方式
left; 默认值,水平居左
center; 水平居中 文字/行内块/行内
这些元素可以在容器中水平方向居中，text-align:center是写在容器中的
right; 水平居右

line-height行高
1. w3c规定的行高和我们认为的行高其实值是一样的.
2. 如果要让文字在容器中垂直居中,就给容器设置一个line-height为容器的高度就ok.
3.行高单位
px;
2em; font-size的2倍;
3; 不给单位只有数字, 也是font-size的倍数
行高可以继承
px, 是多少就继承多少
2em; 用父亲的font-size计算出来行高是多少px,然后继承给儿子
3; 直接把这个数字继承过来,然后用自己的font-size来计算行高是多少像素
font连写的时候, font-size后面默认有一个字体行高.

text-indent首行缩进 em 缩进几个字 -999em; "隐藏"文字; 让文字跑出页面可视区

text-decoration文本的装饰
undeline; 下划线
overline; 上方的线
line-through; 穿透线/删除线 none; 默认,没有线
a标签默认是有一个下划线的,可以用text-decoration:none;去掉这个默认的下划线

去掉 li 标签前面的小圆点list-style:none

元素隐藏
visibility:hidden; 会占据原来的位置.
display:none; 不会占据原来的位置.

内容超出overflow
hidden; 内容超出隐藏
scroll;内容超出设置滚动条, 内容没有超出有滚动边
auto;自动设置
visible;默认可见.

鼠标样式cursor
pointer 小手
move 移动
wait 等待
help 帮助
text 输入文本
not-allowed 禁止

3.背景background

背景颜色 background-color:
颜色单词
rgba();a表示的是透明度,1不透明,0是透明,
0.5是半透明,还可以用transparent英文单词透明的 opacity:0.5;
区别: opacity会透明内容; rgba()不会透明内容
十六进制表示法
rgb

背景图片background-image: url(“背景图片路径”)
如果图片比盒子要大,默认显示图片的一部分
如果图片比盒子要小,默认水平和垂直都平铺

背景是否平铺 background-repeat:
repeat xy方向都平铺/默认值;
no-repeat; 不平铺
repeat-x; x方向/水平方向平铺
repeat-y; y方向/垂直方向平铺

背景图片位置background-position:
1套是px数值 100px 200px
x: left/center/right y: top:center/bottom

背景图片尺寸 background-size:
1.100px 100px
2.50% 50%;
3.contain;
a.图片大于容器：有可能造成容器的空 白区域,将图片缩小
b.图片小于容器：有可能造成容器的空白区域，将图片放大

4.cover;
a.图片大于容器：等比例缩小,会填满 整个背景区域，有可能造成图片的某些区域不可见 b.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出
固定背景图background-attachment : scroll; 默认值,背景图是随着内容滚动的. fixed;固定的

连写 background: pink url("./dog.png") no-repeat center center

背景渐变
线性渐变 background: linear-gradient(45deg,red,blue,yellow)
径向渐变 background: radial-gradient

4.外轮廓线outline

1.和设置边框一样的,来设置外轮廓线 outline-style outline-width outline-color 可以连写
2.不占位置, 在元素的四周,不一定是一个矩形
3.input标签 有默认的外轮廓线, 一般的情况下使用 outline:none; 去掉默认的外轮廓线

5.vertical-align:垂直对齐(只针对于行内元素/行内块元素)

top; 顶部对齐 middle; 中间对齐 bottom; 底部对齐 默认的 baseline; 基线对齐
文字和行内块元素默认就是基线对齐.

应用: 图片在盒子中默认底部有留白
留白产生的原因: 图片是行内块,垂直对齐又是基线对齐,所以有留白
解决方案
1.改变垂直对齐方式为 非基线对齐
2.改变图片的显示方式 display:block;

6.文本换行和裁剪

/* 文字换行,默认值 /
/ white-space: normal; /
/ 文字不换行 /
white-space: nowrap; / 文字超出 处理一定要配合 overflow:hidden /
overflow: hidden;
/ 超出的文字裁剪 /
/ text-overflow: clip; /
/ 超出的文字 用省略号显示 */
text-overflow:ellipsis;

7.盒子模型

1.盒子模型之边框border
border-width
border-color
border-style 默认值是none,所以不能不写
连写书写顺序
顺时针
上右下左
上 左右 下
上下 左右
常用方式:border: 1px solid red;

2.盒子模型之内边距padding
内容到边框的距离
顺序与border是一毛一样
垂直方向的padding设置对行内元素是没有效果的

3.盒子模型之外边距margin
盒子与盒子之间的距离
垂直方向的margin设置对行内元素没有效果
问题1：垂直塌陷：直排布的两个盒子,添加相对应的margin,距离不是相加,而是取最大值 避免就好
问题2：包含塌陷：存在父子关系的盒子,给子元素添加margin-top有可能会把父元素带跑
解决方案
1.给父元素设置上边框border-top
2.给父元素设置上内边距padding-top
3.工作中用:overflow:hidden;

标准盒子模型
外扩型 box-sizing: content-box 默认就是,加了padding和border后,大小会增加.;
一个块的总宽度= width + margin+padding+border
真实宽高 = content width/height + border + padding

怪异盒子模型
内减型 box-sizing: border-box
保证盒子大小不变,增加了padding或者border,自动的去减小内容.
一个块的总宽度 = width + margin(即width已经包含了padding和border值）
真实宽高 = content width/height

8.滤镜filter
定义了元素(通常是)的可视效果
属性值百度见

9.定义关键帧动画@keyframes 动画名称 {动画的内容}
一种是通过 from 和 to 定义两个动画状态的动画

@keyframes myfirst //动画名称
{from{transform:translate(0px,0px);}to{transform:translate(800px,0px);}
}

	一种是通过百分比来定义多个动画状态的动画

@keyframes myfirst{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

用animation来调用关键帧动画
语法:animation: myfirst/动画名称 1s/动画持续时间 ease/动画运动方式 500ms infinite/动画播放次数(无限次) alternate/在下一周期逆向返回

animation-play-state 设置动画是否正在运行或暂停。默认是 “running”,播放，暂停用"paused

10.3D变换transform

步骤1:在元素的父级设置属性transform-style:preserve-3d,指定为三维空间
步骤2:在元素的父级设置透视属性perspective:800px, 800为经验值
a.三维旋转rotateX、rotateY、和rotateZ
X轴的方向是从屏幕左往屏幕右，Y轴的方向是从屏幕上往屏幕下，Z轴的方向是从屏幕内指向屏幕外。
a.三维位移translateX()、translateY()、translateZ()
设置元素Z轴位移，正值就是向外位移,负值就是向内位移
c.同时旋转和位移
transform:translateZ(-100px) translateY(-100px) rotateX(90deg)从右往左依次变换

注意:透视属性值数值越小，元素的近大远小的反差就越大，反之就越小

在容器的父级容器上设置透视属性，而容器本身不设置透视属性，这样可以实现三维容器和容器中的盒子都进行近大远小的缩放，这样的三维效果看上去比较自然。

11.2D变换transform

旋转rotate
默认是正值按照顺时针转动,如果想逆时针转动,可以用负值,单位用deg ,是度数单位

设置旋转点transform-origin 默认旋转点在元素的中心点上
表示x轴向的位置，可以设置为 left center right 具体值(px) 百分比(相对于宽度)
表示y轴向的位置，可以设置为 top center bottom 具体值(px),百分比(相对于高度)

位移translate
表示x轴方向的位移值，可以设置为 具体值(px) 百分比(相对于自身宽度)
表示y轴方向的位移值，可以设置为 具体值(px) 百分比(相对于自身高度) 使用具体数值来设置位移，参照于左上角

缩放scale
x-scale 表示水平方向缩放比例，设置成一个数字
y-scale 表示垂直方向缩放比例，设置成一个数字

12.过渡动画transition
transition:all 1s ease/缓冲运动 linear/匀速运动
与伪类:hover配合使用

13.五大浏览器兼容
火狐(Firefox) 前缀-moz-
谷歌(Chrome) 前缀-webkit
Safari 前缀-webkit-
IE浏览器 前缀-ms-
Opera 前缀-o-