一、书写顺序

1. 定位position
2. 浮动：display
3. 盒子模型：margin，border，padding，宽高背景色
4. 文字样式

二、三大特性

三、font

1. 文本格式化标签

1. 加 粗：b/strong
2. 下划线：u/ins
3. 倾 斜：i/em
4. 删除线：s/del

2. Font复合属性(简写，只能省略前两个)

1. font：style，weight，size，字体
2. font：style，weight，size/line-height，family

3. Font-style倾斜

1. 标签：em，I
2. css：font-style：italic(正常：normal)

4. Font-family字体

四、text

1. 缩进 text-indent: px(像素)/em(字符)
2. 内容(文本、span、a、input、img)水平对齐text-align: left / center / right
3. 文本修饰text-decoration：下划线underline，删除线line-through，上划线overline，无装饰线none

五、background

1. 平铺background-repeat：repeat，no-repeat，repeat-x，repeat-y
2. 位置background-position：水平(left,center,right)，垂直(top,center,bottom)

六、盒子模型

七、浮动

八、定位

1. 定位步骤：

1. 设置定位方式position: relative(相对)，absolute(绝对)，fixed(固定)，static(静态)
2. 设置偏移值：letf/right；top/bottom

2. 相对定位relative：自恋型

1. 相对于自己之前的位置进行移动（仍占有原来的位置）
2. 不改变标签的显示模式
3. 四个方向都存在时，以left/top为准

3. 绝对定位absolute：拼爹型

4. 先找已经定位的父级，若有则以父级(逐层查找父级)为参照物；若无则以浏览器窗口进行定位
5. 父级定位方式(一般选择relative)，不会影响子级【子绝父相】
6. 脱离标准流，不占位置
7. 改变标签的显示模式特点：行内块
8. 居中（margin: 0 auto失效！）：
   i. 方式一：left: 50%; margin-left: -0.5width; top: 50%; margin-top: -0.5height;
   ii. 方式二：left: 50%；top: 50%; transform: translate(-50%, -50%)

4. 固定定位fixed：死心眼型

1. 相对于浏览器进行定位
2. 脱标，不占位置
3. 具备行内块特点

5. 元素的层级关系

标准流 < 浮动 < 定位：后来者居上(前 < 后)

九、装饰

1. 垂直对齐方式

1. 基线：浏览器文字类型元素排版中存在用于对齐的基线
2. 行内和行内块标签按文字处理
3. vertical-align：baseline, top，middle， bottom

2. 光标类型

设置鼠标光标在元素上时显示的样式

1. 属性名：curso
2. 样式：default(默认，箭头)，pointer(小手，点击)，text(工字型，选择文字)，move(十字光标，移动)

3. 边框圆角

1. 属性名：border-redius
2. 顺序：左上 右上 右下 左下（没有看对角）
3. 【应用】画正圆：border-radius: 50%;
4. 【应用】胶囊按钮：border-radius: 0.5height(box);

4. Overflow:溢出部分显示效果

1. 属性名：overflow:
2. visible(默认,溢出可见)
3. hidden(溢出隐藏)
4. scroll(显示滚动条)
5. auto(自动选择是否显示滚动条)

5. 元素本身隐藏

1. 常见：（占位）visibility: hidden;或（不占位）display:none;
2. .nav li:hover img{}悬浮li，控制img的效果

6. 元素透明度：opacity: 0~1

十、项目实战样式

1. 精灵图：

• 作用：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
• 使用：
  1. 创建盒子，设置盒子的尺寸和小图尺寸相同（行内标签span，b，i…）
  2. 将精灵图设置为盒子(display: inline-block,block)背景图
  3. 修改背景图位置：background-position: 0 0;

2. 背景图片大小：background-size

1. 取值：px，%，contain(等比例缩放，背景留白)， cover(放大填满整个盒子，图片显示不全)
2. 连写background: color image repeat position/size

3. 文字阴影

4. 盒子阴影(连写，按顺序)：box-shadow

1. h-shadow：必须，水平偏移量，可负
2. v-shadow：必须，垂直偏移量，可负
3. blur：可选，模糊度
4. spread：可选，阴影扩大
5. color：可选，阴影颜色
6. inset：可选，设为内部阴影

5. 过渡:transition（配合hover）

1. 过渡的属性：all（width，height，background）
2. 过渡的时间：单位s

6. 骨架