css的各种样式

一，css的样式选择器

1.1 字体相关

font

• font-fanmily 字体的样式默认为黑体
• font-size 字体大小
• font-style 字体风格 斜体
• font-width 字体的宽度 默认为400

1.2 文本相关

text-transform

• capitalize 首字母大写
• lowercase 全部小写
• uppercase 全部大写
  text-align
• left 默认居右
• right 默认居左
• center 默认居中
  text-indent
• 缩进
• 2em 缩进两个字符
  text-decoration
• none 去除下划线

二，css 的背景选择

backgroup

• color 背景色
• image 图片插入 要使用url
• repeat 图片铺满 一般使用no-repeat
• position 位置
  分为 left
  top
  bottom
  right
  也可以使用像素点
• size 100%
• contain 场边完全展示，短边补空
• cover 短边完全展示 长边隐藏

三，列表的样式属性

list-type

• type circle 圆形样式
• position outside 外围
• position intside 内围
• image url 图片
• mone 没有任何样式

四，css包围盒

一个元素占用空间
border

• width
• style
• color
• 1px soilde red 设置盒子线的颜色
  padding
  内补 只有宽度
  外部 只有宽度
  padding与margin支持四种写法
• 一个数值 上下左右一样
• 两个数值 上下一致 左右一致
• 三个数值 上 左右一致 下
• 四个数值 上左下右

五，css中的display

• inline 行元素 一行可以出现多个元素
• block 块元素 自己独占一行，可以给宽高
• inline-block 行内块，多个快在一起，可以给宽高
• none 隐藏

六， css中的定位

1，static 静态定位 从左到右，从上向下排列
2， relative 相对定位
相对定位文档流静态定位 发生偏移
占用文档位置
left top
3，absolute
绝对定位
参考位置：外层第一个非static的标签发生偏移直到html
不占用文档流
left/top/right/bottom
4，fixed 固定位置
参考位置：浏览器窗口
5， sticky 粘性定位
没有到达位置之前一直在 选哪个党羽静态定位
到达粘性位置 相当于静态定位

七，弹性容器

display：flex

7.1 flex-direction

• row 默认
• row-reverse 主洲倒
• columu主轴向下
• columu-severse 倒

7.2 flex-wrap

• wrap 换行
• no-wrap 不换行
• wrap-severse

7.3 justify-content

• flex-start 主轴开始位置
• flex-end 主轴结束位置
• center 主轴居中
• space-between 中间有空白
• spac-aroud 两边都有空白

7.4 align-itmes

• flex-start 交叉轴起始位置
• flex-end 交叉轴结束
• center 居中
• 当交叉轴方向只有一行使用交叉轴

7.5 align-content

• flex-start 交叉轴起始位置没有空白
• flex-end 交叉轴结束位置
• center 居中
• 当交叉轴有多啊很难过使用交叉轴对齐