https://github.com/dabeng/css-basics
https://github.com/dabeng/css-basics
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dabeng/css-basics
- Owner: dabeng
- License: mit
- Created: 2019-07-05T02:05:50.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-03-16T02:23:46.000Z (over 5 years ago)
- Last Synced: 2025-01-28T02:22:44.787Z (over 1 year ago)
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS
## Layout
### 多个块状元素的水平垂直居中
```css
#container{
display: flex;
justify-content: center; /* This defines the alignment along the main axis */
align-items: center; /* This defines the alignment along the cross axis */
}
```
equivalent tailwindwcss utility classes
```html
01
02
03
```
## Selector
### Priority
- ID 选择器， 如 #id{}
- 类选择器， 如 .class{}
- 属性选择器， 如 a[href="segmentfault.com"]{}
- 伪类选择器， 如 :hover{}
- 伪元素选择器， 如 ::before{}
- 标签选择器， 如 span{}
- 通配选择器， 如 *{}
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
### nth-child selelctor
比如我们有一个列表，包含10个以上的item：
```html
- e4rt
- 66ert
- i9etr
- fsdg
- gh
- gh
- fwr
- ue56
- 34s
```
为开头的前2个item和结尾的后2个item加红色
```css
li:nth-child(-n+2),li:nth-last-child(-n+2) {
color: red;
}
```
为中间的第4个～6个item加蓝色
```css
li:nth-child(n+4):nth-child(-n+6) {
color: blue;
}
```
## Resopnsive Design
### 举例说明响应式设计
```html
Left
Main Content
Right
```
```css
.left {
background-color:#2196F3;
padding:20px;
float:left;
width:20%; /* The width is 20%, by default */
}
.main {
background-color:#f1f1f1;
padding:20px;
float:left;
width:60%; /* The width is 60%, by default */
}
.right {
background-color:#4CAF50;
padding:20px;
float:left;
width:20%; /* The width is 20%, by default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
.left , .main, .right {width:100%;}
}
```
## Flexbox
### CSS Grid vs Flexbox
1. CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row).
2. A core difference between CSS Grid and Flexbox is that — CSS Grid’s approach is layout-first while Flexbox’ approach is content-first.If you are well aware of your content before making layout, then blindly opt for Flexbox and if not, opt for CSS Grid.
3. Flexbox layout is most appropriate to the components of an application (as most of them are fundamentally linear), and small-scale layouts, while the Grid layout is intended for larger scale layouts which aren’t linear in their design.
4. If you only need to define a layout as a row or a column, then you probably need flexbox. If you want to define a grid and fit content into it in two dimensions — you need the grid.
## Preprocessor
### Sass
### Less
### Stylus