css基础4

今天是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（路径）

未完，待续！