特别声明, 本文根据 @Rachel Andrew 的Getting Started With CSS Layout一文整理.
在过去几年中, CSS 布局已经发生了巨大的变化, 现在我们开发网站的方式也发生了巨大变化. 现在我们有需要可选的 CSS 布局方式来开发我们的网站, 这也就要求我们对这些方式能作出正确而双合适的选择. 在这篇文章中, 将会介绍各种 CSS 布局的基本使用方式以及使用的目的.
如果你还是 CSS 方面的新手并且又想了解什么才是最好的布局方式, 那么这篇文章正是你所需要的. 如果你是一位比较有经验的开发者, 想要了解一些关于 CSS 布局的最新知识, 那么这篇文章值得你花费一点时间去阅读. 当然, 这篇文章并没有涉及 CSS 布局相关技术的细节, 不然, 围绕这个主题都可以写一本书了. 不过, 文章会对各种 CSS 布局做一个基本的概述, 同时会给大家提供相关链接来进一步加强相关技术的学习.
正常文档流
如果你选择没有用任何 CSS 来改变页面布局的网页, 那么 html 元素就会排列在一个正常流 (Normal Flow) 之中. 在正常流中, 元素盒子 (任何一个 HTML 元素其实就是一个盒子) 会基于文档的写作模式一个接一个地排列(根据不同的文档写作模式, 排列方向不一样). 这就意味着, 如果你的写作模式是水平的(句子是从左到右或从右到左写), 正常流会垂直地一个接一个排列页面的块级元素. 如果你是在一个垂直方向的写作模式下, 句子是垂直方向书写的, 那么块级元素会水平方向排列.
正常流是一种最苦的布局: 当你的文档应用了 CSS, 创建了某些 CSS 布局, 这些块就做了一个正常文档流之外的事.
通过页面结构来发挥正常文档流的优势
通过确保书写的页面具有良好的结构(HTML 结构), 如此一来就可以最大程度复用正常文档流所带来的优势. 试想一下, 如果浏览器中没有正常流, 那么你创建的 HTML 元素都会堆积在浏览器的右上角. 这就意味着, 你必须指定所有的 HTML 元素的布局方式.
有了正常流, 哪怕是 CSS 加载失败了, 用户仍然能阅读你的页面内容; 同时, 一些不使用 CSS 的工具 (例如屏幕阅读器) 会按照元素在文档中的位置来读取页面内容. 另外从可用性角度来看, 这无疑是非常有帮助的, 同时也让开发者轻松了一些. 如果你的内容顺序和用户预期的阅读顺序一致, 那就不需要为了将元素调整到正确的位置而做大量的布局调整. 当你继续往下阅读, 将会发现, 使用新的布局方式是如何让页面布局达到事半功倍的.
因此, 在思考如何布局之前, 你需要认真思考你的文档结构, 以及你希望用户以何种顺序来阅读文档中的内容.
脱离正常文档流
一旦页面有一个良好的结构, 你就需要去决定如何利用它并将它变为我们需要的布局结构. 这会涉及到脱离正常文档流(后续会详细阐述这部分). 我们有许多布局的 "神器" 可用, 其中第一个要介绍的就是 float, 它是一个描述什么是脱离正常文档流的非常好的例子.
- .item {
- float: left
- }
- .clear {
- clear: both;
- }
- .container {
- overflow: auto;
- }
- .container {
- display: flow-root;
- }
- CSS Page Floats
- The Clearfix: Force an Element To Self-Clear its Children
- float
- clear
- CSS Floats 101
- BFC
- Float
- flow-root
- .item {
- position: relative;
- bottom: 50px;
- }
- .item {
- position: absolute;
- top: 20px;
- right: 20px;
- }
- .item {
- position: fixed;
- top: 20px;
- left: 100px;
- }
- .item {
- position: sticky;
- top: 0;
- }
- CSS Positioned Layout Module Level 3
- Positioning
- position: sticky;
- .container {
- display: flex;
- }
- flex-grow
- flex-shrink
- flex-basis
- .item {
- flex: 1 1 200px;
- }
- .container {
- display: grid;
- grid-template-columns: 200px 200px 200px;
- grid-template-rows: 200px 200px;
- }
- .item {
- grid-column-start: 1;
- grid-column-end: 3;
- grid-row-start: 1;
- grid-row-end: 3;
- }
- .item {
- grid-column: 1 / 3;
- grid-row: 1 / 3;
- }
- .item1 {
- grid-area: a;
- }
- .item2 {
- grid-area: b;
- }
- .item3 {
- grid-area: c;
- }
- .container {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- grid-template-areas:
- "a a b b"
- "a a c c";
- }
- .container {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- grid-template-areas:
- "a a b b"
- "a a c .";
- }
- CSS Grid Layout Module Level 2
- CSS Grid Layout
- Grid by Example
- Layout Land
- Styling Empty Cells With Generated Content And CSS Grid Layout
- Using CSS Grid: Supporting Browsers Without Grid
- Naming Things In CSS Grid Layout
- Awesome CSS Grid
- Grid Layout tutorial
- CSS Grid Layout Collection from Codepen
- CSS Grid Layout and Accessibility
- HTML Source Order vs CSS Display Order
- .item {
- display: none;
- }
- Box model
- CSS Display Module Level 3
- Vanishing Boxes With display: contents
- How display: contents; Works
- justify-content
- align-content
- place-content
- justify-items
- align-items
- place-items
- justify-self
- align-self
- place-self
- row-gap
- column-gap
- gap
- CSS Box Alignment Module Level 3
- CSS Box Alignment
- Box Alignment in CSS Grid Layout
- The New Layout Standard For The web: CSS Grid, Flexbox And Box Alignment
- Box Alignment Cheatsheet
- CSS Grid and The Box Alignment Module
- Grid, Flexbox, Box Alignment: Our New System for Layout
- .container {
- column-width: 300px;
- }
- .container {
- column-count: 3;
- }
- .container {
- column-width: 300px;
- column-count: 3;
- }
- h3 {
- column-span: all;
- }
- Using Multi-Column Layouts
- CSS Multi-column Layout Module Level 1
- .card {
- page-break-inside: avoid;
- break-inside: avoid;
- }
- .container h2 {
- page-break-after: avoid;
- break-after: avoid;
- }
- Column Breaks
- CSS Fragmentation Module Level 3
来源: https://juejin.im/entry/5b481624e51d4519575a043f