CSS的诞生

码农翻身 · 公众号 · 程序员 · 2017-08-21 20:00

正文

浮动和定位

盒子还只是在在文档流中按次序流动而已，想要做到漂亮的排版，还得让他们灵活地定位才行。

比如说有人想把一个盒子放到浏览器的最右边，不会随着页面滚动而滚动；

或者大盒子中套了一个小盒子，小盒子要相对于大盒子来定位；

或者两个盒子想罗列起来；

或者像报纸杂志那样分栏显示，左边是菜单，中间是内容，再加上一个右边栏；等等诸如此类的要求。

所以，一个盒子必须得能在常规的文档流中 重新定位 ，于是我给盒子添加了两个重要的属性： float 和 position 。

float可以让一个盒子脱离标准的文档流，一直往上飘，直到遇到父元素的边界。

当有多个盒子都在飘的时候，就可以按照次序形成分栏的效果了。

比如下面这3个

本来是从上往下依次往下流动的，如果给div2, div3加上float:left属性，他们就横着排列起来了：

对于position 来说，那就更加灵活了。如果不设置，那就是默认定位，在文档流中的位置不做改变。

可以设置为相对于盒子在原来文档流中的位置做定位（原来的位置没有被别的div占据）：

还可以设置成相对于某个父元素做绝对定位（下图中祖先元素就是橙色的框，div2原来的位置被div3占据了）。

唉，给大家说这么多琐碎的东西，我自己都有点烦了，总结下就是：我提供了各种各样的方式让你的盒子可以灵活的排列起来。

当然我必须得承认，这些布局对程序员们确实不那么友好，你没有办法通过拖拽的方式对这些盒子进行排版。

为了减少工作量，大量CSS框架在源源不断地推出，例如Bootstrap, Semantic UI, Pure.css , EZ-CSS。。。。。。这是后话了。

CSS

浮动和定位可以说是我搞出的最复杂的东西，其他的像背景了，字体了，文本了就简单得多，就不再啰嗦了。

当我告诉HTML我的定义工作基本搞定时，他提出了一个问题： “你这些选择器，盒子模型，浮动和定位，背景，字体之类定义，最终要放在哪儿啊？你不会还是想放在我这里吧？”

我想了想，必须得有最大的灵活度，程序员可以直接写到元素的标签中（叫行内样式），也可以写到html的