### 彪哥

爱好前端

- HTML

- CSS

  - CSS教程和技巧收藏
    - Flex 布局教程：语法篇
    - CSS Grid 网格布局教程
    - 只要一行代码，实现五种 CSS 经典布局
  - flex布局语法
  - flex布局案例-基础
  - flex布局案例-骰子
  - flex布局案例-圣杯布局
  - flex布局案例-网格布局
  - flex布局案例-输入框布局
  - CSS3之transition过渡
  - CSS3之animation动画
  - 「布局技巧」图片未加载前自动撑开元素高度
  - 文字在一行或多行时超出显示省略号
  - 从box-sizing属性入手，了解盒子模型
  - 水平垂直居中的几种方式-案例
  - 如何根据系统主题自动响应CSS深色模式
  - 「css技巧」使用hover和attr()定制悬浮提示
  - CSS-function汇总
  - CSS给table的tbody添加滚动条

- 页面
- CSS

heBody
2020-08-11
目录

# CSS教程和技巧收藏

## # Flex 布局教程：语法篇

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
(opens new window)

## # CSS Grid 网格布局教程

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
(opens new window)

## # 只要一行代码，实现五种 CSS 经典布局

http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html
(opens new window)

- 空间居中布局

  > 不管容器的大小，项目总是占据中心点

- 并列式布局

  > 多个项目并列，如果宽度不够，放不下的项目就自动折行

- 两栏式布局

  > 一个边栏，一个主栏。边栏始终存在，主栏根据设备宽度，变宽或者变窄

- 三明治布局

  > 页面在垂直方向上，分成三部分：页眉、内容区、页脚。

- 圣杯布局

  > 最常用的布局，所以被比喻为圣杯。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。

编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
常用meta整理
flex布局语法

← 常用meta整理 flex布局语法→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式