大多数人想到在 Web 上进行计算时，他们会想到 JavaScript。考虑到 JavaScript 是 Web 的主要编程语言，这是有道理的，但是如果我告诉你，你可以只用 CSS 进行相当复杂的计算

下面我将选择进行划分为三大部分，对于基本选择器我就不说了，主要讲下伪类选择器，组合选择器及它们各自的使用场景。 下面讲讲nth-child()括号中的公式，这个算是这个选择器的亮点了。 上面这两我就不说了，相信大家都用烂了。主要说说下面这两个。 好了，在讲完这些选择器之后我们来…

标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。 PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。 margin这个属性，本质上描述的是兄弟和兄弟之间…

缺点：如果有文字出现，布局就会错乱，导致扩展性不好。 3、将未浮动的middle挤了下去。 此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来； 如果某一列内容过多，文字会溢出。解决方法：等高布局；

BFC 可以理解为建立一个布局容器，容器里按自己的方式来布局，且与容器外界的元素互不影响。 1.BFC里的布局跟常规流里的一样，例如盒子会在垂直方向排列。 2.属于同一个BFC里的盒子会产生margin重叠。 3.容器内元素的margin的左边，会与容器的border左边相接触…

本篇章主讲双栏布局和三栏布局的一些较为古老及实用的原理及实现。说它古老主要也是因为我们不会涉及 flex 这一类魔法一般的布局方式，虽然我也知道用 flex 就能轻松实现很多布局。 做这个文章，一方面也是自己做个学习记录，当做温习一番。另一方面，也希望能够帮助看到这篇文章的新手…

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

CSS网格布局是一个二维的基于网格的布局系统, 其目的在于完全改变我们设计基于网络的用户界面的方式。CSS一直用来布局我们的网页, 但是他从来没有做过很好的工作, 最开始我们使用表格,然后float, position和inline-block。但是这些本质上是css的hack…

这篇文章会介绍CSS中大部分布局方式以及技巧，包括但不限于浮动、定位、flex、grid。 先来看最常用的一种，利用margin属性设置外边距，当要居中当元素是display:block时可以用这种方法。 使用text-align,将元素当成文字直接居中。当要居中元素是inli…