奇妙的CSS之布局与定位

前言

关于布局与定位是Web前端开发里很是基础而又重要的部分。介绍相关知识的文章，很容易就能够找到。虽然，这方面的知识点不是不少，但咱们若是不弄清楚，在运用时候每每会出现预料以外的布局，这些“意外”有时候很使人苦恼。下面根据个人学习和编程经验来谈一下这方面的要点。

要想完美的实现本身的布局，那首先必定要把盒模型搞清楚。盒模型由内容区、内边距（padding）、边框（border）和外边距（margin）构成。这些属性值都是可选的，相互之间没有依赖关系，但在具体的布局时会须要设置某些属性。咱们平时设置的宽度和高度其实都是内容区的大小，而不是整个元素的大小。详细状况以下：

那么既然了解了盒模型，咱们怎么让元素按照咱们的意愿布局呢？接下来就来探讨一下这个问题。

其实浏览器在页面上摆放HTML元素时，它是采用文档流（flow）来实现的。就像瀑布同样从最上面的元素开始，自上而下进行元素显示，遇到块元素自动换行，默认每一个块元素会占浏览器窗口的整个宽度。而内联元素会在水平方向上自左向右显示，整体上从左上方流向右下方，在垂直方向上扩展外围元素。

边距折叠

关于流和盒模型咱们还须要了解，浏览器在并排显示两个内联元素时，这两个原时间的外边距是不会重合的，两者边框之间的距离是二者外边距之和；当两个块元素上下放置时，它们挨着的外边距会折叠起来，显示出来的外边距就是两者外边距里的最大值。当元素嵌套时，也会发生外边距折叠问题，其只会合并上边距和下边距，左右外边距并不合并。须要注意的是，若是外面的元素有一个边框，那么这两个元素的外边距就不会碰到一块儿，也就不可能发生折叠。咱们只须要记住：只要两个垂直边距碰到一块儿，它们就会折叠，即便是嵌套起来的也不例外。浮动元素因为已经不在文档流之中，它们的外边距是不会折叠的。

关于浮动咱们须要了解，浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。要想使元素浮动，必须为元素设置一个宽度（width）。虽然浮动元素不是文档流之中，可是它浮动后所处的位置依然是在浮动以前的水平方向上。因为浮动框不在文档的普通流中，因此文档的普通流中的块框表现得就像浮动框不存在同样，下面的元素填补原来的位置。有些元素会在浮动元素的下方，可是这些元素的内容并不必定会被浮动的元素所遮盖，对内联元素进行定位时，这些元素会考虑浮动元素的边界，会围绕着浮动元素放置。也能够把浮动元素想象成是被块元素忽略的元素，而内联元素会关注浮动元素的。       

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，不然全部框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 

position 属性

• static：元素框正常生成。块级元素生成一个矩形框，做为文档流的一部分，行内元素则会建立一个或多个行框，置于其父元素中。若是不为元素指定定位方式，会采用默认的静态定位方式。若是是静态定位，那么元素就放在正常的文档流中，由浏览器彻底决定元素的摆放。虽然你能够用float来浮动元素，但最终仍是由浏览器决定元素的最终放置。
• relative：元素框偏移某个距离。相对定位的元素会正常的流入页面，不过在页面上要进行偏移。
• absolute：元素框从文档流彻底删除，并相对于其包含块定位。包含块多是文档中的另外一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在同样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位（absolute），虽然也是从文档流中删除，但它与浮动是不一样的，它不会再和原来位置保持水平，而是由top,right,bottom,left等属性值肯定，这些值都是相对于其父元素的。并且流中的元素不管是块元素仍是内联元素都再也不关注绝对定位的元素，它们彻底不知道页面上有绝对定位元素的存在。因此在布局时为了避免被绝对定位元素遮盖文档流中的元素，最好给下面的元素设置恰当的外边距（margin）。绝对定位元素还有一个很意思的特性，那就是能够分层放置，能够用z-index属性来分层放置元素，这会指定它在一个虚拟z轴（垂直于页面）上的位置，并且越靠近你的元素z-index值越大。固然z-index属性并非绝对定位所专属的，相对定位和固定定位的元素也有这个属性。绝对定位时并不须要对元素设置宽度(width)，若是不指定宽度，则块元素会默认的占浏览器的整个宽度（包含margin-left和margin-right，并不只仅是内容宽度width）。

• fixed：元素框的表现相似于将 position 设置为 absolute，不过其包含块是视窗自己。也就是说，固定定位会把元素放在相对于浏览器窗口的一个位置上（不是相对于页面，html），固定定位的元素是不会随页面滚动而移动的。

上面已经介绍了布局定位须要用到的知识，那么咱们就能够按照本身的须要实现布局啦！使用HTML和CSS创建布局有不少种可使用的方法，好比浮动布局、凝胶布局、绝对布局和表格显示布局等。要想掌握布局与定位还须要本身多多实践，只有在编程中才能得到提升。先写这么多吧，之后有时间的话再把实例补充进来……