关于css布局

标签：

Box:是网页布局的对象和基本单位。box分为如下三类：

- block-level  块级
- inline-level 行级
- run-in css3中才有

BFC：块级格式化上下文。

BFC布局规则:

1.内部的Box会在垂直方向，一个接一个的放置。

2.Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin值会发生重叠。如：

    网页中有2个div；
    #div1{
        width:100px;
        height:100px;
        margin:20px;
    }
    #div2{
        width:100px;
        height:100px;
        margin:20px;
    }
    就设置的margin属性来看，这两个div上下应该距离40px，但是，显示的却是上下距离20px。

3.每个元素的margin box的左边，与包含border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动。

4.BFC的区域不会与float box重叠。

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

6.计算BFC的高度时，浮动元素也参与计算。

圣杯布局：

下面是标准的3列的布局模式代码，左边列的宽度是200px，右边列的宽度是150px ，中间的宽度是100%。

        <div id="container">
            <div id="center" class="column">
              　　   center
             </div>      
            <div id="left" class="column">
             　　   left
            </div>
            <div id="right" class="column">
              　　  right
            </div>
        </div>

        css中代码：
        #container {
      　　   padding-left: 200px;
        　　 padding-right: 150px;
        }
      　　  .column {
       　　  float: left;
        }
        #center {
      　　   width: 100%;
        }
        #left {
        width: 200px;
     　　    margin-left: -100%;
      　　   right: 200px;
        }
        #right {
       　　  width: 150px;
       　　  margin-right: -150px;
        }
        #footer {
        　　 clear: both;
        }

        

关于css布局

标签：

原文地址：http://www.cnblogs.com/ddzhao1989/p/4678000.html