多写多看
温故知新：
auto对上下外边距没有作用哒
id常用于布局，class倾向用于样式的实现
hr以后建议不要用,可以用边框来实现
选择器：#comment>div.topic>div.star5{}
=======================渐变========================
1、渐变(css3新提出来的)
1、什么是渐变
多种颜色变化的一个过程
分类：
1、线性渐变（重点）
2、径向渐变
3、重复渐变(线性,径向)
特点：
1、渐变都有填充方向(线性渐变)
2、色标(颜色，位置)
2、语法
属性：background-image
取值：
1、linear-gradient():线性渐变
2、radial-gradient():径向渐变
3、repeating-linear-gradient():重复线性渐变
4、repeating-radial-gradient():重复径向渐变
3、线性渐变
语法：background-image:linear-gradient(angle,color-point,color-point,...);
1、angle
渐变的方向或角度
取值：
to top : 从下向上填充渐变色
to right:从左向右填充渐变色
to bottom:从上向下填充渐变
to left:从右向左填充渐变色
(对角)
0deg : 0度->to top
90deg: 90度->to right
180deg:180度->to bottom
270deg:270度->to left
2、color-point
色标：表示颜色及其颜色出现的位置（位置可以省略）
ex
red 0% : 开始的时候是红色
blue 25%:25%的时候变成蓝色
red 0px : 开始的时候是红色
blue 25px:到25px的位置处，变为蓝色（位置可以用像素表示）
4、径向渐变
语法：background-image:radial-gradient([size at position],color-point,color-point);
1、size at position
size:表示圆的半径
position:圆心位置，取值可以为 数值，百分比，关键字
该参数可以省略的，圆心位置在元素的正中间
5、重复渐变
语法：
background-image:repeating-linear-gradient(同线性渐变);
background-image:repeating-radial-gradient(同径向渐变);
=================文本格式化=======================
1、字体属性
1、字体
属性：font-family
取值：value,value
注意：
字体取值中包含特殊符号和中文的话，要用 "" 引起来
ex:
font-family:Arial,"microsoft yahei";
2、字体大小
属性：font-size（常为12~16px）
3、字体加粗
属性：font-weight
取值：
1、normal：正常显示，大部分标记的默认值(加粗时使用这个值可以取消加粗)
2、bold : 加粗
3、无单位数值
400~900
400 : normal
900 : bold
4、字体样式
属性：font-style
取值：
1、normal 正常
2、italic 斜体
5、小型大写字母
作用：针对英文字符，将小写字符变成大写字符，但是大小与小写一样
Aa Bb Cc Dd
属性：font-variant
取值：
1、normal
2、small-caps（小写锁定）
6、字体属性
属性：font
取值：style variant weight size family;
ex:
font:bold 12px "Arial";
font:12px bold "arial";×
注意：
使用font简写属性的话，一定要加上 family的值，否则无效
2、文本属性
1、文本颜色
属性：color
2、文本排列
作用：控制元素中的文本、行内、行内块元素的水平对齐方式
属性：text-align
取值：left/center/right
3、文字修饰
属性：text-decoration
取值：
1、none
没有线条显示
2、underline
下划线
3、overline
上划线
4、line-through
删除线 --> <s></s>
4、行高
作用：指定一行文本的高度。如果行高高于文字本身大小，那么文本将在指定的行高范围内垂直居中显示
场合：1、控制一行文本垂直居中对齐(不适合多行文本，多行文本设置内边距来解决，上下一致)
2、设置行间距
属性：line-height
取值：数值，如：2px;
5、首行文本缩进
属性：text-indent
取值：value（以px为单位，不是字符哟）
6、文本阴影（模拟文字发光的效果）
属性：text-shadow
取值：h-shadow v-shadow blur color;
====================表格=========================
3、表格
1、表格常用属性
1、边距属性：padding
2、尺寸属性:width,height
3、文本、字体属性
4、背景属性：background ...
5、边框属性: border
6、垂直方向对齐：vertical-align
取值：top/middle/bottom
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，分离边框模式
2、collapse
合并
2、边框边距
属性：border-spacing
作用：控制相邻单元格之间的距离
取值：
1个值：水平和垂直间距相同
2个值：第1个值表示水平间距，第2个值表示垂直间距。两个值之间用空格隔开
注意：border-collpase的值必须为 separate时才能设置边框边距
3、标题位置
标题：<caption></caption>
默认位置：表格上方水平居中
属性：caption-side
取值：
1、top ：默认值
2、bottom : 标题位于表格之下
4、显示规则
作用：如何去布局一个表格,指定了表格显示单元格，行的算法规则, 又称为 表格布局
属性：table-layout
取值：
1、auto ：自动，自动表格布局(默认值)
列宽度是由内容来决定的
2、fixed ：固定，固定表格布局
列宽度有表格以及单元格所设定好的数据为主
auto与fixed的区别：
1、自动表格布局
1、单元格大小会适应内容
2、表格复杂时会比较慢
3、适用于不确定每列大小时使用
4、自定布局算法较慢，但是能反映传统的HTML表格
2、固定表格布局
1、列宽度取决于表格的宽度，列的宽度
2、会加速显示表格
3、固定表格布局算法比较快，但不够灵活