CSS 教程（2）-属性5-Positioning，Float，布局 - 水平 & 垂直对齐

1.Positioning(定位)
position 属性的四个值：
static
relative
fixed
-absolute
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。

• static 定位
  HTML元素的默认值，即没有定位，元素出现在正常的流中。
  静态定位的元素不会受到 top, bottom, left, right影响。
  下面的代码演示了，设置top等也是没有用的，还是在文档流中显示

        
      
        
Some more text
        
Some text0
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text

• fixed 定位
  元素的位置相对于浏览器窗口是固定位置。
  即使窗口是滚动的它也不会移动
  Fixed定位使元素的位置与文档流无关，因此不占据空间。
  Fixed定位的元素和其他元素重叠。

        
      
        
Some more text
        
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text

把浏览器缩小，能够体会出上面的话。

• relative 定位
  相对定位元素的定位是相对其正常位置。
  即使元素被移动了，但是元素的下一个元素还是在正常文档流位置，不会随被移动的元素而移动

这是一个没有定位的标题
这个标题是根据其正常位置向上移动

    注意: 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。

• absolute 定位
  绝对定位的元素的位置相对于最近的已定位父元素(指除static定位的三种定位之一)，如果元素没有已定位的父元素，那么它的位置相对于.
  absolute 定位使元素的位置与文档流无关，因此不占据空间。(如果不设置top，那么对于它上面的元素，它还是遵循文档流的，即top值好像是auto的类似)
  absolute 定位的元素和其他元素重叠。
  下面的代码很能说明问题

    


    


    
这是一个绝对定位了的标题
    
用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.
    
sdfsd
sdfsd
sdfsd
sdfsd
sdfsd
    
sdfsd
sdfsd
sdfsd
sdfsd
sdfsd
    
sdfsd
sdfsd
sdfsd
sdfsd
sdfsd
    
sdfsd
sdfsd
sdfsd
sdfsd
sdfsd
    
sdfsd
sdfsd
sdfsd
sdfsd
sdfsd
    
sdfsd
sdfsd
sdfsd
sdfsd
sdfsd
    
sdfsd
sdfsd
sdfsd
sdfsd
sdfsd
    
sdfsd
sdfsd
sdfsd
sdfsd
sdfsd
    
sdfsd
sdfsd
sdfsd
sdfsd
sdfsd

• 重叠的元素
  元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
  z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
  具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

• bottom属性定义及使用说明
  对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。position:absolute
  对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。position:relative
  注意：如果"position：static"，底部的属性没有任何效果。

• clip 属性
  clip属性，让你指定一个绝对定位的元素position:absolute，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。
  注意：: 如果先有"overflow：visible"，clip属性不起作用。

• overflow 属性
  visible 默认值。内容不会被修剪，会呈现在元素框之外。
  hidden 内容会被修剪，并且其余内容是不可见的。
  scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  inherit 规定应该从父元素继承 overflow 属性的值。

2.Float(浮动)

• 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
• 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 浮动元素之后的元素将围绕它。
• 浮动元素之前的元素将不会受到影响。
• 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。即把浮动的元素当成正常文档流元素处理了。

float是脱离文档流的，但是没有脱离文字流。所以文字可以浮在它的周围。

下面利用浮动，做一个菜单(注意，设置一个min-width这样，缩小浏览器的时候，不会导致菜单变形)

        
主页
        
新闻
        
联系我们
        
关于我们
      

    

一个能说明问题的例子：

    

        
div2
        
div3
    

上面的这个例子：mian的高度，靠div3把高度撑起来，因为它们两个都是未浮动的。而div3未浮动，所以被div2覆盖了部分，说明div2脱离了文档流，但是div3的文字在div2后面显示，说明div2没有脱离文字流。

如果让main浮动起来，那么它的高度会被div2撑起来。
如果让div3浮动而main不浮动，那么mian会是一直线，无法撑起高度了。并且div3会在div2后显示了。
如果mian浮动，div3不浮动，如果div3高度高于div2，也是可以把mian的高度撑起来的。

3.CSS 布局 - 水平 & 垂直对齐

• 元素居中对齐
  要水平居中对齐一个元素(如

  ), 可以使用 margin: auto;。
  设置到元素的宽度将防止它溢出到容器的边缘。
  元素通过指定宽度，并将两边的空外边距平均分配
  注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

• 文本居中对齐
  如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

• 图片居中对齐
  要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中

img {
    display: block;
    margin: 0 auto;
}

• 左右对齐 - 使用定位方式
  我们可以使用 position: absolute; 属性来对齐元素

• 左右对齐 - 使用 float 方式
  我们也可以使用 float 属性来对齐元素
  当像这样对齐元素时，对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

• 垂直居中 - 使用 line-height