# CSS-Demo

**Repository Path**: LuckyFBB/CSS-Demo

## Basic Information

- **Project Name**: CSS-Demo
- **Description**: 记录一些简单的CSS处理
- **Primary Language**: CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-10-08
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CSS-Demo

#### 项目介绍
记录一些简单的CSS处理

#### [九宫格](https://gitee.com/LuckyFBB/CSS-Demo/tree/master/nine-grid)  
问题：一个九宫格，鼠标hover上之后，边框显示为红色。  
解题思路  
1.使用flex布局，flex-wrap:wrap自定义换行。  
2.使用box-sizing:border-box,改变盒模型，将border算入width中。  
3.使用css选择器改变第一列的左边距。  
4.使用z-index来控制高层级。

#### [三角形](https://gitee.com/LuckyFBB/CSS-Demo/tree/master/triangle)  
问题：CSS实现三角形---->梯形/四边形  
解题思路  
1.三角形---->重点让height/width为0，然后使用border，将不需要的部分设置transparent隐藏  
2.梯形---->在三角形的基础上设置一下width  
3.四边形---->设置height/width，使用transform:skew()设置倾斜的矩阵