1.单位
- px 像素 1em 1em---1个字符 2em---2个字符（自动适应用户所使用的字体） % 百分比
2.文本
- color文本颜色 red #f00 letter-spacing字符间距 2px -3px em line-height行高 14px 1.5em 120% （一般用于垂直居中） text-align对齐 center、left、right 、justify（两端对齐） text-decoration装饰线 none（去掉超链接下划线） overline（装饰线在文本的上方） undeline line-throuhg（装饰线作为删除线贯穿文本之中。（一般用于商品打折）） text-indent首行缩进 2em
3.字体
font-family 字体系列 font-size 字号 14px 120% font-style 斜体 italic font-weight 粗体 bold
font:斜体 粗体 字号/行高 字体 font:italic bold 16px/1.5em '宋体'
4.CSS背景
- background-color background-image：url（"logo.jpg"） background-repeat：repeat repeat-x repeat-y no-repeat background：颜色 图片 repeat
5.超链接的四种状态
- 1.a:link 普通的，未被访问的链接 2.a:visited 用户已访问的链接 3.a:hover 鼠标指针位于链接的上方悬停 3.a:active 链接被点击的时刻
6.无序列表ul有序列表ol共用样式
- list-style 所有用于列表的属性设置于一个声明中 list-style-image：url（"images/bulletl.gif"） 为列表项标志设置图像 list-style-position 标志的位置 list-style-type 标志的类型、
7.CSS表格
table{ width:500px; height:200px; }
border 属性 table,td,th{ border:1px solid #eee;(1个像素宽，实线，灰色) } border-collapse属性{ border-collapse:collapse;(合并默认的表格样式) }
__:nth-child(old | even) 奇偶选择器 tr:nth-child(old){ background-color:#eaf2d3;(表格方便观看，隔行显示不同的颜色) }
8.盒子模型
overflow属性：当内容溢出盒子框时，overflow属性取值 hidden：超出部分不可见 scroll：显示滚动条 auto：如果有超出部分，显示滚动条
border属性 border-width：px、thin（细）、medium（中）、thick（粗） border-style：dashed（一个个横线）、dotted（点）、solid（实线）、double（双实线） border-color：颜色 border：width style color
-
水平分割线
.line{ height: 1px; width: 500px; border-top: 1px solid #ccc }
对浏览器的默认设置清零 *{ margin:0； padding:0； }
margin:1px; margin:1px 1px 1px 1px;（上右下左） margin:1px 2px ; margin:1px 2px 1px 2px; margin:1px 2px 3px; margin:1px 2px 3px 2px;
margin的合并：垂直方向合并，水平方向不合并；（合并后显示大的）
图片、文字水平居中：text-align:center;
div水平居中：margin:0 auto;(浏览器自动计算)
9.CSS 定位机制概述
文档流folw：默认的一种情况，不需要额外设置。从上到下，从左到右依次，像写字一样。只是有的元素单独占一行。
浮动定位float：水平并排排列，左右排列，大盒子拆分若干列时。
层定位position：希望当前网页元素像图层一样前后层叠在一起。
10.文档流定位
-
元素分类：block、inline、inline-block
元素类型转换：display属性
（1）block元素特点：独占一行，元素的height、width、margin、padding都可设置 常见的block元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<form> 将inline元素a转换为block元素，从而使a元素具有块状元素特点。 a{ display:block; } （2）inline元素特点：不单独占用一行，width、height不可设置，width就是它包含的文字或图片的宽度，不可改变。 常见的inline元素：<span>、<a> 显示为inlin元素：display：inline； （3）inline元素之间有一个间距问题。 （4）inline-block元素特点：不单独占一行，但元素的height、width、margin、padding都可设置。 最常见inline-block元素是：<img>
11.浮动定位
- div实现横向多列布局 float属性：left、right、none（不浮动） clear属性：both，清除左右两边的浮动。 left和right只能清除一个方向的浮动 none是默认值，只在需要移除已指定的清除值时用到。
12.层定位
position属性： static：默认值 没有定位，元素出现在正常的流中，top、bottom、left、right、z-index无效 fixed：固定定位 相对于浏览器窗口进行定位，top、bottom、left、right、z-index有效 relative：相对定位 相对于其直接父元素进行定位，top、bottom、left、right、z-index有效 absolute：绝对定位 相对于static定位以外的第一个父元素进行定位，top、bottom、left、right、z-index有效
z-index：值大在上面。
-
区别1：
相对定位：relative 定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。
[图片上传失败...(image-b2efae-1595788397108)]
绝对定位：absolute 定位为absolute的层脱离正常文本流，但与relative的区别：其在正常流中的原位置不再存在。
。[图片上传失败...(image-a393c-1595788397108)]
区别2： relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式。[图片上传失败...(image-9e5af4-1595788397107)]
对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。
[图片上传失败...(image-c913c5-1595788397107)]
对于absolute定位的层，如果其父层中都未定义absolute或relative，则其将相对于body进行定位。[图片上传失败...(image-b4571-1595788397107)]
-
relative+absolute
相对定位和绝对定位通常结合在一起来使用。
[图片上传失败...(image-190587-1595788397107)]
13.圆角边框与阴影
-
border-top-left-radius 左上角的形状
border-top-right-radius 右上角的形状
border-bottom-left-radius 左下角的形状
border-bottom-right-radius 右下角的形状
border-radius：水平值 垂直值
-
圆角边框
border-radius：50%；
-
阴影box-shadow
box-shadow：水平偏移 垂直偏移 模糊距离 颜色
10px 10px 5px #888(灰色)
14.CSS3 文字与文本
-
text-shadow（文本阴影）
text-shadow：水平偏移 垂直偏移 阴影大小（可省略） 颜色
2px 2px 4px #000
-
word-wrap属性：允许长单词、url强制进行换行
word-wrap：break-word;
-
@font-face 规则
[图片上传失败...(image-c138fb-1595788397107)]
常见4种字体格式：.ttf .svg .woff .eot
15.2D 变换
2D转换方法：对元素进行旋转、缩放、移动、拉伸
-
旋转transform:rotate()
transform:rotate( deg);
-
缩放transform:scale()
transform:scale(x,y);
0~1,缩小；>1放大。
16.过渡与动画
过渡transition：将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”。[图片上传失败...(image-7d6ba4-1595788397107)]
transition-timing-function属性取值：[图片上传失败...(image-56f1fc-1595788397107)]
-
animation 动画
（1）定义动画：@keyframes规则 （关键帧
（2）调用动画：animation属性：animation-name animation-duration animation-timing-function
动画名字 时长 方式
[图片上传失败...(image-4afa-1595788397107)]
17. 3D变换
transform-style:perserve-3d
-
transform属性
rotateX（） rotateY（） rotateZ（）
角度deg
-
perspective透视属性 px 近大远小
px越小，表示离舞台越近；px越大，表示离舞台越远；
