本文思维导图，欢迎补充 本文首发于我的个人网站：http://cherryblog.site 前言 温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现方法太多，所以本文主要是介绍 flex 布局和 grid 布局，以及 C…

什么是BFC BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。 视觉格式化模型 视觉格式化模型(visual formatting m…

block，inline 和 inline-block 的区别以及实际应用

CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己的使用场景。在这节课中我们会通过不同的案例——可复用的布局和针对单元素的布局——来介绍每种方法。 定位的其中一种方法就是使用flo…

现在我们已经熟悉了HTML和CSS。了解了它的基础。现在我们来更深入的了解元素在页面中的呈现和大小。 在这节课中，我们将会讨论什么是盒子模型，它的工作模式是怎样的。我们也会在课程中学习一些新的CSS属性，并且将介绍三种长度单位。 在了解盒子模型之前，我们先来了解一下元素是如何显…

css 的盒模型和定位是 css 中的难点，有很多人对此不理解或者理解的不透彻，那么，这篇文章将带你理解什么是 css 盒模型和定位

我们初步了解了HTML和CSS，现在让我们深入挖掘HTML并了解哪些元素构成了这种语言。 建设网站前，我们需要了解什么元素适合排版什么内容。这对于理解元素如何展示在页面中以及元素的语义化都有非常重要的意义。 在工作中使用适当的元素排版需要长时间的实践，但接下来的学习中我们将会合…

“理论不懂就实践，实践不会就学理论”，非常赞同 bluedavy 的这句话。实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。这时就不要再用 “就是这样的” 的借口来搪塞自己，我们需要重新认识它。

FC 的全称是：Formatting Contexts，是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。