今天是2019年6月21日，周五了。在这里写上一篇随笔，主要内容是css基础中的一些细节部分，话不多说，直接上！
一、背景渐变： background-image
- 线性渐变：linear-gradient（渐变方向，色标，色标，色标）
- 方向：
- 关键字：
- to top 从下往上
- to bottom 从上往下
- to left 从右往左
- to right 从左往右
- 角度：deg 角度同时针一样旋转
- 色标：颜色 0%
- 径向渐变：radial-gradient（【size at position】，色标，色标，）
- 备注：size：渐变路径；at：关键字；position：渐变圆心所在的位置
- 关键字：left right center；top bottom center
二、字体文本相关样式
- 字体属性：font-family
- 字体大小：font-size
- 字体加粗：font-weight
- 字体倾斜：font-style
- 小型大写：font-variant
- 综合属性：font：font-style font-variant font-weight font-size font-family
三、文本相关属性
- 文本颜色：color
- 文本对齐方式：text-align 值：left right center
- 文本修饰：text-decoration 值：
- none：无线条样式
- underline：下划线
- line-through：删除线
- overline：上划线
- 行高：一行文本所占的高度
- 格式：line-height：height（文本居中）
- 注意：一行文本，行高永远和元素的上边缘是重合的；当行高的高度大于文本的高度是，那么该文本会在行高范围内居中
- 首行缩进：text-indent
- 文本阴影：text-shadow
- offsetx offsety blur color
四、表格相关样式
- 属性：color font-size border width height
- 表格特有样式：
- border-collapse：边框合并
- border-seperate：边框分离 border-spacing：相邻单元格之间的距离，相当于cellspacing。
- 备注：两个值；第一个值代表的是水平距离，第二个值代表的是垂直距离
- 主体：border-collapse：seperate
- 表格布局：table-layout
- auto：默认的 自动表格布局，根据内容来自动分类td高度
- fixed：固定的 列宽度是由总宽度来平均分配的
五、td：vertical-align 垂直对齐方式
- 使用场景：
- 图文混排时，定义文字相对于图片的对齐方式
- td中设置单元格的垂直对齐方式
六、显示方式设置
- 属性：display
- 值：
- block 让元素变成快元素
- inline-block 让元素变成行内快元素
- 注意：行内块元素，只是可以设置宽高以及上下的margin；
- 使用场景：一个行内块元素需要设置宽高或者设置上下margin
- inline 让元素变成行内元素
- none 隐藏元素：元素消失后，不占据页面空间（脱离文档流）
- 注意：不要尝试给一个快元素变成行内元素，因为没有任何意义！
七、显示效果
- 定义：visibility：visible（可见）or hidden（隐藏）
- 备注：display：none和visibility:hidden异同
- 相同点：都是让元素消失
- 不同点：
- display：none 消失后脱离文档流，不占据页面空间
- visibility：hidden 消失后并没有脱离文档流，依然占据着页面空间
八、光标样式
- 属性：cursor
- 值：default（默认）
- pointer（小手）
- wait（等待）
- crosshair（十字光标）
- not-allowed（禁用）
九、列表项：list-style
- 有序列表：none（取消列表项的标志）
- 无序列表：disc（实心圆） circle（空心圆） square（实心方块） none（无列表标志）
- 列表项位置：list-style-position：inside： 内部outside： 外部
- 列表项图片：list-style-image url（路径）