牛腩新闻发布系统——盒子的浮动与定位

      浮动和定位的相关知识，是设计精美网页的必要前提之一。在学习浮动与定位之前，我们先了解一下相关知识“标准流”。

      一、标准流

      标准流，是指在不适用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列的。我们把这些元素分为以下两类：

      块级元素（block level）：占据着整个矩形区域，以块的形式表现出来，并且跟统计的兄弟块依次竖直排列，左右撑满。如<li>、<ul>、<div>都是块级元素。

      行内元素（inline）：各个字母之间横向排列，到最右端自动折行。本身不占有独立的区域，仅是在其他元素的基础上指出了一定的范围。如<a><p>标记。

      

      了解了标准流的概念，接下来继续学习盒子的浮动与定位。

      二、盒子的浮动

      基本属性：

      float属性：默认为 none，即标准流。通过设置 float 属性的值为 left 或 right，元素会向其父元素的左侧或右侧靠近，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来确定。

      clear 属性：作用是为了消失由于使用 float 后，浮动的盒子对其他盒子的影响。clear 的值有 left、right 和 both，分别表示消除左边的影响、消除右边的影响和消除左右两边的影响。

      在标准流中，我们知道，块级元素在水平方向上会自动伸展，在其父元素中占满一整行；而在竖直方向和其他元素依次排列不能并排。但使用浮动方式后，会发生改变。

      

      如图所示：box1、box2、box3为块级元素，文字为行内元素

      图1为标准流下个元素的排列：box占满整行，竖直排列，文字横向排列，行满后自动折行。

      图2设box1为左浮动，脱离标准流，他原来的位置由标准流的box2填补。浮动的盒子box1不再伸展，其宽度为容纳内容的最小宽度。

      图3设box2也为左浮动，由图可知，box1和box2间有空白，是由两者的margin构成。

      

      图4为box1、box3左浮动，box2右浮动：行内元素自动填充到空白位置，而且可以通过设置浮动，调整box的位置。

      图5，用clear：both清除浮动，实现文字的排版。

      三、盒子的定位

       广义的"定位"：泛指一个网页排版中的定位操作，使用任何 CSS 规则来实现。

       狭义的"定位"：通过设置 CSS 中的属性 position 来进行定位。

       position的属性：

       1）static：默认的属性值，按照标准流（包括浮动方式）进行布局。

       2）relative：称为相对定位，使用相对的盒子的位置常以标准量的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。
       相对定位仍在标准流中，它对父块和兄弟块盒子没有任何影响。

       3）absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。
       绝对定位从标准流中脱离，并且以它的"最近"的一个"已经定位"的"祖先元素"为基准进行定位。没有已经定位的祖先元素，则以浏览器窗口为基准进行定位。

       4）fixed：固定定位，与绝对定位类似，以浏览器窗口为基准进行定位，拖动浏览器窗口的滚动条时，位置保持不变。

      当position的属性为relative、absolute和fixed时，通过设置left、right、top和bottom来制定偏移量，达到页面要实现的定位效果。

      浮动与定位的基本知识很简单，但应用时，需要我们仔细的设计与精确的计量，才能准确定位，达到预期的页面效果。我们要多多实践，在实际应用中熟练掌握这些知识。