CSS 定位之一切都是框

还记得上一篇讲的浮动吗？我们现在已经知道了，浮动是一种用于布局的属性，但是在CSS 中要实现定位不只是浮动这么简单。But，在介绍定位之前，一定要在脑子里形成一个观念。

一切都是框

CSS 的盒子模型让我们能够把元素看成是一个一个的框，这些框主要分为块框和行内框两类。

块框（块元素）

我常常把div 元素及其之间的内容称为一个块，这意味着div 元素显示一块内容，也就是“块框”，能显示块框的元素还有 p 、h1（标题元素）等元素。

行内框（内联元素）

span、strong 等元素的内容显示在行之中，即“行内框”。实际上，每个行内元素都会生成一个行内框。简单来说，行内框就是行内元素的边框，它不会实际显示出来，在没有padding 等其他因素影响时，行内框就等于内容区域。

行内元素并不遵守盒子模型，在浏览器中占据的高度只由元素的大小决定，它是无法用CSS 来改变的，也就是说设置margin、padding 是没有用的，唯一能改变的就是为行内元素设置行高。比如：

加上了padding 之后，虽然表面上看，撑起了行内框的高度，使得边框更高了，但事实上并没有改变行内元素本身的高度，所以内边距部分会和上面的元素重叠在一起。

无名块框

在块框中，有这样一种情况，如下所示。在div 中，即使部分文本没有定义称段落，也会被当成段落看待。在这样的情况，这样一行文本就形成了一个“无名块框”。

行框

还有一个与“行内框”仅差一字的概念，叫做“行框”。它是给某个行一个虚拟的矩形框，也不会实际显示出来。行框的高度等于本行之内所有元素中行内框最大的值。有多行内容的时候，每行都有自己的行框。

块框和行内框的转换

由于无名块框和行框是无法应用样式的，所以display 属性在这时候就发挥作用，使这些框可以转换为行内元素和块元素。

《css浮动——构建布局的必备属性》

中已对该属性详细介绍过，这里不讲啦。

总结

这一篇文章只向大家介绍一个在学习前端必须要建立的理念——一切都是框。把元素当成框来看待，自然对其布局会有“套路”般的认知。而我自认为，学习一项新技能，其实就是先学套路。好啦，下一篇我们再介绍CSS 定位机制的组成。

不介意的留个赞吧！