mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-05-01 04:59:29 +08:00
269 lines
4 KiB
Markdown
269 lines
4 KiB
Markdown
---
|
||
title: CSS · 三种布局方式
|
||
slug: css-layouts
|
||
tags:
|
||
- CSS
|
||
created: 2022-01-13T10:07:00.000Z
|
||
summary: Float / Flexbox / Grid /
|
||
lastmod: 2022-05-07T05:30:20.613Z
|
||
---
|
||
|
||
课程：[Build Responsive Real-World Websites with HTML and CSS](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)
|
||
|
||
## Overview
|
||
|
||
|
||
|
||
## Box-sizing
|
||
|
||
|
||
|
||
> 未定义之前：content-box
|
||
|
||
### reset
|
||
|
||
```css
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
```
|
||
|
||
## Float Layout
|
||
|
||
- 浮动在页面之上，对周围元素没有影响
|
||
- 现在很少用了
|
||
|
||
### left
|
||
|
||
- 浮动到页面左边
|
||
|
||
|
||
|
||
```css
|
||
.author-img {
|
||
float: left;
|
||
}
|
||
```
|
||
|
||
> 此时图片和文本不在同一个层面上
|
||
|
||
### right
|
||
|
||
> 浮动到页面右边
|
||
|
||
|
||
|
||
```css
|
||
p {
|
||
float: right;
|
||
}
|
||
```
|
||
|
||
### ABSOLUTE POSITIONING VS. FLOATS
|
||
|
||
|
||
|
||
### Clear Float
|
||
|
||
- 当没有其他元素可以 clear float 时，在其后新建一个元素设置 clear
|
||
- 当存在需要清除的元素时，直接在该元素上清除
|
||
|
||
#### 方法 1: empty div
|
||
|
||
使用一个并列的空`<div>`元素来清除
|
||
|
||
```html
|
||
<head>
|
||
<h1>title</h1>
|
||
<h2>title</h2>
|
||
<div class="clear"></div>
|
||
</head>
|
||
```
|
||
|
||
```css
|
||
/*清除两者*/
|
||
.clear {
|
||
clear: both;
|
||
}
|
||
|
||
/*清除左边*/
|
||
.clear {
|
||
clear: left;
|
||
}
|
||
```
|
||
|
||
#### 方法 2:clearfix hack
|
||
|
||
原理和 empty div 的方式一样，但更简单，利用 pseudo element 在 parent element 后增加一个元素
|
||
|
||
```html
|
||
<head class="clearfix">
|
||
<h1>title</h1>
|
||
<h2>title</h2>
|
||
</head>
|
||
```
|
||
|
||
```css
|
||
.clearfix::after {
|
||
clear: both;
|
||
content: '';
|
||
display: block;
|
||
}
|
||
```
|
||
|
||
## Flexbox
|
||
|
||
|
||
|
||
|
||
|
||
> 加粗字体为默认状态
|
||
|
||
```css
|
||
.container {
|
||
display: flex;
|
||
align-items: center; /*水平居中*/
|
||
justify-content: center; /*垂直居中*/
|
||
}
|
||
```
|
||
|
||
### Flex container
|
||
|
||
- flex container takes the height of the tallest items
|
||
|
||
常用：
|
||
|
||
```css
|
||
.container {
|
||
display: flex;
|
||
align-items: stretch;
|
||
justify-content: flex-start;
|
||
}
|
||
```
|
||
|
||
### Flex items
|
||
|
||
```css
|
||
.items {
|
||
align-self: flex-start;
|
||
}
|
||
```
|
||
|
||
### Propetities
|
||
|
||
#### order
|
||
|
||
数字越大越靠后
|
||
|
||
#### flex-grow
|
||
|
||
数字越大占比越大
|
||
|
||
#### flex-basis
|
||
|
||
item’s width
|
||
|
||
#### shorthand
|
||
|
||
`flex:1` =
|
||
|
||
```css
|
||
flex-grow: 1;
|
||
flex-shrink: 1;
|
||
flex-basis: 0%;
|
||
```
|
||
|
||
## CSS Grid
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### grid container
|
||
|
||
```css
|
||
.container {
|
||
display: grid;
|
||
grid-template-columns: 250px 200px; /*两列*/
|
||
grid-template-rows: 200px 200px; /*两行*/
|
||
}
|
||
```
|
||
|
||
> 通常不定义 rows
|
||
|
||
#### Gap
|
||
|
||
用 gap 而不是 margin:
|
||
|
||
```css
|
||
.container {
|
||
/*gap:20px;*/
|
||
columns-gap: 30px;
|
||
row-gap: 20px;
|
||
}
|
||
```
|
||
|
||
#### align tracks inside containers
|
||
|
||
> when the content is smaller than the grid
|
||
|
||
```css
|
||
justify-content: center;
|
||
align-content: center;
|
||
```
|
||
|
||
### grid items
|
||
|
||
```css
|
||
.items: {
|
||
grid-column: 2/3; /*当前后数值相差只有1位时，可省去后面的数字*/
|
||
grid-row: 2/3;
|
||
|
||
/*占几个列/行时*/
|
||
grid-column: 1/3;
|
||
grid-row: 1/3;
|
||
/*或者*/
|
||
grid-column: 1 / span 3;
|
||
/*自动填充剩余空间*/
|
||
grid-column: 1/-1;
|
||
}
|
||
```
|
||
|
||
#### align items inside cells
|
||
|
||
```css
|
||
.container {
|
||
align-items: center;
|
||
justify-items: center;
|
||
}
|
||
```
|
||
|
||
```css
|
||
.item {
|
||
align-self: end;
|
||
}
|
||
```
|
||
|
||
### fr
|
||
|
||
- `1fr`:自动填充剩余空间
|
||
- 2:1:1:1 的四列
|
||
|
||
```css
|
||
.container {
|
||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
}
|
||
/*shorthand*/
|
||
|
||
.container {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
```
|
||
|
||
### implicit row
|
||
|
||
所定义的空间被用完后多出来的列
|