CSS3页面布局方案

Web页面中的布局，在css3之前，主要使用float属性或者position属性进行页面中的简单布局，但是使用它们也存在一些缺点，比如两栏或者多栏中如果元素的内容高度不一致，则有底部很难对齐的问题。因此在css3中追加了一些新的布局方式，使用这些新的布局方式，除了可以修改之前存在的问题之外，还可以进行更为便捷，更为复杂的页面布局。

我们可以先来看看传统使用float或者position属性布局页面；如下HTML代码：

<div style="width:100%;overflow:hidden;" id="div-st">

    <h2 style="border-bottom:1px solid #333;">使用float属性或者position属性的布局缺点</h2>

    <div class="div1">

        <p><span style="color:red;">示列文字1：</span>相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>

    </div>

    <div class="div2">

        <p><span style="color:red;">示列文字2：</span>相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>

    </div>

    <div class="div3">页面中其他内容</div>

</div>

CSS代码如下：

.div1,.div2,.div3 {float:left;width:26em;}

div.div1 {margin-right:2em;}

div.div3 {width:100%;background-color:yellow;height:260px;}

实现效果如下：

使用float属性或者position属性的布局缺点

示列文字1：相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

示列文字2：相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

页面中其他内容

如果在上面中的类名为div1下加一张图片的话，那么上面的demo演示变成如下面的了！

使用float属性或者position属性的布局缺点

示列文字1：相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

示列文字2：相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。

页面中其他内容

如上所示：使用float属性或position属性进行页面布局时有一个比较明显的缺点，就是第一个div元素与第二个div元素是各自独立的，因此如果在第一个div元素中加入一些内容的话，将会使得两个元素的底部不能对齐，导致页面中多处一块空白区域。

使用多栏布局可以解决上面的问题。下面我们一步步来，如下：

1.首先我们先定义个div盒子.

HTML代码如下：

<div class="box">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下：

.box {width:600px;background-color:yellow;}

效果如下：

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

2.使用多栏布局的第一个属性：column-count,column-count属性为一个数字表示列数，不带单位，含义是将一个元素中的内容分为多栏进行显示。

HTML代码

<div class="box2">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下：

.box2 {width:600px;background-color:yellow;-moz-column-count:;-webkit-column-count:;}

效果演示如下：

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

3.使用多栏布局的第二个属性：column-gap,使用column-gap属性来设定多栏之间的间隔距离。

HTML代码如下：

<div class="box3">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下：

.box3 {width:600px;background-color:yellow;-moz-column-count:;-webkit-column-count:;-moz-column-gap: 60px;-webkit-column-gap: 60px;}

效果演示如下：

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

4. 使用多栏布局的第三个属性：column-rule,column-rule属性在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度，样式，颜色，该属性的指定方法与css中的border属性指定方法相同。

HTML代码如下：

<div class="box4">我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>

CSS代码如下：

.box4 {width:600px;background-color:yellow;-moz-column-count:;-webkit-column-count:;-moz-column-gap: 60px;-webkit-column-gap: 60px;-webkit-column-rule: 5px dashed #000;-moz-column-rule: 5px dashed #000;}

效果演示如下：

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

下面我们综合来看下 "使用多栏布局方式" 的demo如下：

HTML代码如下：

<div style="width:100%;overflow:hidden;" id="div-nd">

    <h2 style="border-bottom:1px solid #333;">使用多栏布局方式</h2>

    <div class="div1-nd">

        <img src="http://m3.img.srcdd.com/farm4/d/2015/0228/21/88B00EB1D65E0890DDB5E032BA892AC2_B500_900_110_110.jpeg"/>

        <p><span style="color:red;">示列文字1：</span>相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>

        <p><span style="color:red;">示列文字2：</span>相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。相对来说比较长的示列文字。</p>

    </div>

    <div class="div3-nd">页面中其他内容</div>

</div>

CSS代码如下：

div.div1-nd {/*width:52em;*/-moz-column-width:26em;-webkit-column-width:26em;-moz-column-count:;-webkit-column-count:;}

div.div3-nd {width:100%;background-color:yellow;height:260px;}

效果演示如下：

效果请点击demo

使用多栏布局如上图，虽然解决了两块元素对齐的问题，但是我个人觉得2块区域并不是独立的，第一块内容到了第二块内容上来了。

使用float属性或position属性时的缺点---盒布局

在css3中，除了上面的多栏布局之外，还可以使用盒布局解决前面所说的使用float属性或position属性时左右两栏或多栏中底部不能对齐的问题.

1. 比如我们先来看下传统的demo，HTML代码如下：

<div class="container">

    <div class="left-sidebar">

        <h2>左侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

    <div class="contents">

        <h2>内容</h2>

        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>

    </div>

    <div class="right-sidebar">

        <h2>右侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

</div>

CSS代码如下：

.left-sidebar {float:left;width:200px;padding:26px;background-color:orange;}

.right-sidebar {float:left;width:200px;padding:26px;background-color:limegreen;}

.contents {float:left;width:240px;padding:26px;background-color:yellow;}

.container {width:100%;overflow:hidden;}

演示如下：

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

2. 在css3中，通过box属性来使用盒布局。使用盒布局如下：

HTML代码如下：

<div class="container2">

    <div class="left-sidebar2">

        <h2>左侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

    <div class="contents2">

        <h2>内容</h2>

        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>

    </div>

    <div class="right-sidebar2">

        <h2>右侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

</div>

CSS代码如下：

.container2 {display:-moz-box;display:-webkit-box;}

.left-sidebar2 {width:200px;padding:26px;background-color:orange;}

.right-sidebar2 {width:200px;padding:26px;background-color:limegreen;}

.contents2 {width:280px;padding:26px;background-color:yellow;}

demo演示如下：

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

盒布局与多栏布局的区别：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。

3. 使用自适应窗口的弹性盒布局，假如我想左右两侧固定，中间自适应，可以使用box-flex属性.

比如HTML代码如下：

<div class="container3">

    <div class="left-sidebar3">

        <h2>左侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

    <div class="contents3">

        <h2>内容</h2>

        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>

    </div>

    <div class="right-sidebar3">

        <h2>右侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

</div>

CSS代码如下：

.container3 {display:-moz-box;display:-webkit-box;}

.left-sidebar3 {width:200px;padding:26px;background-color:orange;}

.right-sidebar3 {width:200px;padding:26px;background-color:limegreen;}

.contents3 {-moz-box-flex:;-webkit-box-flex:;padding:26px;background-color:yellow;}

demo演示如下：

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

4. 改变元素的显示顺序--可以通过box-ordinal-group属性来改变各元素的显示顺序，可以在每个元素的样式中加入box-ordinal-group属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大来显示这些元素。

比如如下HTML代码：

<div class="container4">

    <div class="left-sidebar4">

        <h2>左侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

    <div class="contents4">

        <h2>内容</h2>

        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>

    </div>

    <div class="right-sidebar4">

        <h2>右侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

</div>

CSS代码如下：

.container4 {display:-moz-box;display:-webkit-box;}

.left-sidebar4 {width:200px;padding:26px;background-color:orange;-moz-box-ordinal-group:;-webkit-box-ordinal-group:;}

.right-sidebar4 {width:200px;padding:26px;background-color:limegreen;-moz-box-ordinal-group:;-webkit-box-ordinal-group:;}

.contents4 {-moz-box-flex:;-webkit-box-flex:;padding:26px;background-color:yellow;-moz-box-ordinal-group:;-webkit-box-ordinal-group:;}

demo演示如下：

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

5.  改变元素的排列方向--使用弹性盒布局的时候，我们可以很简单地将多个元素的排列方向从水平方向修改为垂直方向，或者从垂直方向修改为水平方向，在css3中，使用box-orient来指定多个元素的排列方向

HTML代码如下：

<div class="container5">

    <div class="left-sidebar5">

        <h2>左侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

    <div class="contents5">

        <h2>内容</h2>

        <p>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</p>

    </div>

    <div class="right-sidebar5">

        <h2>右侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

</div>

CSS代码如下：

.container5 {display:-moz-box;display:-webkit-box;-moz-box-orient:vertical;-webkit-box-orient:vertical;}

.left-sidebar5 {padding:26px;background-color:orange;-moz-box-ordinal-group:;-webkit-box-ordinal-group:;}

.right-sidebar5 {padding:26px;background-color:limegreen;-moz-box-ordinal-group:;-webkit-box-ordinal-group:;}

.contents5 {-moz-box-flex:;-webkit-box-flex:;padding:26px;background-color:yellow;-moz-box-ordinal-group:;-webkit-box-ordinal-group:;}

demo演示如下：

内容

我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人

指定水平方向与垂直方向的对齐方式

使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中文字，图像及子元素水平方向或垂直方向的对齐方式。如下表

属性值排列方向box-pack属性值的含义box-align属性值的含义

start horizontal 左对齐，文字，图像或子元素被放置在元素最左边 顶部对齐，文字，图像或子元素被放置在元素最顶部
center horizontal 中对齐，文字，图像或子元素被放置在元素中部 中对齐，文字，图像或子元素被放置在元素中部
end horizontal 右对齐，文字，图像或子元素被放置在元素最右边 底部对齐，文字，图像或子元素被放置在元素最底部
start vertical 顶部对齐，文字，图像或子元素被放置在元素最顶部 左对齐，文字，图像或子元素被放置在元素最左边
center vertical 中对齐，文字，图像或子元素被放置在元素中部 中对齐，文字，图像或子元素被放置在元素中部
end vertical 底部对齐，文字，图像或子元素被放置在元素最底部 右对齐，文字，图像或子元素被放置在元素最右边

1. 如下demo，在div元素下放置一个文字，让其水平垂直居中，如下：

HTML代码：

<div class="center1">我是来测试居中的</div>

CSS代码：

.center1 {width:200px;height:200px;background-color:pink;display:-moz-box;display:-webkit-box;-moz-box-align:center;-webkit-box-align:center;-moz-box-pack:center;-webkit-box-pack:center;}

demo演示如下：

我是来测试居中的

2. 下面是测试图片水平 垂直居中的如下demo。

HTML代码如下：

<div class="center2">

    <img src="http://m3.img.srcdd.com/farm4/d/2015/0228/21/88B00EB1D65E0890DDB5E032BA892AC2_B500_900_110_110.jpeg"/>

</div>

CSS代码如下：

.center2 {width:400px;height:400px;background-color:pink;display:-moz-box;display:-webkit-box;-moz-box-align:center;-webkit-box-align:center;-moz-box-pack:center;-webkit-box-pack:center;border:5px solid red;}

demo演示如下：

CSS3页面布局方案的更多相关文章

  1. CSS3 & 页面布局

    相关链接 视频链接: CSS3 & 页面布局 CSS3与页面布局学习总结(一) CSS3与页面布局学习总结(二) CSS3与页面布局学习总结(三) CSS3与页面布局学习总结(四) CSS3与 ...

  2. 有了这套flex页面布局方案，页面什么的，那都不是事。

    一.CSS3弹性盒子弹性盒子是CSS3的一种新布局模式.CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局 ...

  3. app开发，H5+CSS3页面布局小tips

    1.inline-block使用后带来的间隔影响 2.竖线的处理 3.ssh公匙 4.星星组件的巧妙用法 5.api.js的$api对象与 安卓原生引擎的api对象,均相当于jQuery的$对象 6. ...

  4. HTML5-03 页面布局

    概述 HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局.但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法 ...

  5. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  6. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  9. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

  1. java锁的简化

    java使用单独的锁对象的代码展示 private Lock bankLock = new ReentrantLock(); //因为sufficientFunds是锁创建的条件所以称其为条件对象也叫 ...

  2. TCP 回顾

    报文 状态 从wiki上搬运过来 重要参数 RTT(Round Trip Time) 即链路传输延时,从数据发送到达对端并受到对端ack的一次来回时间.由于TCP是依赖报文确认机制来实现传输的可靠性的 ...

  3. 解决ios10以上版本缩放问题

    <script type="text/javascript"> /*解决ios10以上版本缩放问题 20171102*/ window.onload=function ...

  4. JS 回调函数、立即执行、for块作用域、try/catch、let、垃圾收集 p3

    限于时间关系,加上有些倦意,简单的记录下一些要点: 1.回调函数:就你把函数当成参数传给另一个函数,这个函数在某个时间段会执行这个函数.

  5. 用node.js模拟服务器和客户端

    服务器 代码 var net = require("net") var server = net.createServer(); server.listen(12306," ...

  6. 【代码笔记】iOS-Transition动画

    一,工程图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIVi ...

  7. centos安装lamp

    http://bbs.qcloud.com/thread-1316-1-1.html 启动MySQL http://www.cnblogs.com/starof/p/4680083.html 修改密码 ...

  8. easyui+webuploader+ckeditor实现插件式多图片上传

    需求:在ckeditor编辑器上实现多图片上传并要求另外单独选择ckeditor上传的图片作为封面 页面效果说明: 动态效果图: 第一步:页面布局 <html xmlns="http: ...

  9. js的style.display小问题

    在元素添加class样式隐藏display:none; 使用console.log(xx.style.display);//空值

  10. Leaflet.draw 无法编辑multipolygon类型多边形 解决方法

    问题说明 在做面要素的编辑的时候,当对multiploygon类型的面要素进行编辑的时候,出现如下错误: TypeError: Cannot read property 'lat' of null 通 ...