# quick-css

**Repository Path**: hailony/quick-css

## Basic Information

- **Project Name**: quick-css
- **Description**: 用于快速布局的css样式库，简单易用。
包含：宽度、定位、弹性盒子、边距、颜色、文字等常用的样式
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-06-17
- **Last Updated**: 2021-09-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 宽度
- `w1 ~ w5` 可以快速设置元素的宽度为10% ~ 50%
- `w10` 设置元素宽度为100%（实际中不常用）

### 定位
- `pos-fmt` 格式化为绝对定位，并且生成BFC，使得当前元素填充满其`offsetParent`元素,

- `pos-ct` 水平居中（注：父元素要为非static定位）
- `pos-md` 垂直居中（注：父元素要为非static定位）
- `pos-mc` 垂直+水平居中（注：父元素要为非static定位）


### 弹性盒子
- `flex` 设置元素为弹性盒子
- `flex-md` 等效于 align-items: center;
- `flex-ct` 等效于 justify-content: center;
- `flex-dir-column` 等效于 flex-direction: column;
- `flex-sb` 等效于 justify-content: space-between;
- `flex-sa` 等效于 justify-content: space-around;
- `flex-mc` 同时设置 align-items: center;justify-content: center;
- `flex-item-1 ~ flex-item-4` 设置flex属性为1~4


### 边距
- `pd5、pd10、pd15` 设置左右的内边距
- `mg5、mg10、mg15` 设置上下的外边距


### 颜色
- `bg-指定颜色名称` 设置背景颜色
- `color-指定颜色名称` 设置文字颜色

### 文字
- `txt-ct` 居中
- `txt-left` 靠左
- `txt-right` 靠右
- `txt-justify` 两端对齐
- `single-text-overflow` 单行超出隐藏
- `multiple-text-overflow` 多行超出隐藏（2行）
- `font12 ~ font30` 设置12 ~ 30 之间的常用字体大小
- `font-wb` 加粗
- `font-wn` 设为常规字体