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. 【 js 基础 】【读书笔记】作用域和闭包

    一.编译过程 常见编译性语言,在程序代码执行之前会经历三个步骤,称为编译. 步骤一:分词或者词法分析 将由字符组成的字符串分解成有意义的代码块,这些代码块被称为词法单元. 例子:  var a = 2 ...

  2. 老男孩教育python全栈第九期视频

    失效了在下面评论即可,会及时更新.python9期已全部更新完 链接: https://pan.baidu.com/s/1VV8_ZyVasK05iKd7QMxO-A 密码: 9zau

  3. django-templates过滤器

    常用内置过滤器: 过滤器会更改量或便签参数的值: title过滤器: {{ django|title }} 在下列context中 {'django': 'the web framework for ...

  4. Entity FrameWork(实体框架)是以ADO.NET Entity FrameWork ,简称为EF

    Entity FrameWork(实体框架)是以ADO.NET Entity FrameWork ,简称为EF Entity FrameWork的特点 1.支持多种数据库(MSSQL.Oracle.M ...

  5. 洛谷P3586 [POI2015]LOG(贪心 权值线段树)

    题意 题目链接 Sol 显然整个序列的形态对询问没什么影响 设权值\(>=s\)的有\(k\)个. 我们可以让这些数每次都被选择 那么剩下的数,假设值为\(a_i\)次,则可以\(a_i\)次被 ...

  6. css翻译名词术语

    原文 本书译法 其它译法(未采用) CSS - 层叠样式表.级联样式表.样式单 cascade 层叠(机制) 级联 fallback 回退(机制.措施.方案) 后备.回落.降级 selector 选择 ...

  7. 【代码笔记】iOS-My97DatePicker日历

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  8. <Android 基础（三十一）> ObjectAnimator

    简介 ObjectAnimator,是ValueAnimator的子类,支持利用目标视图的属性来实现动画效果.构造ObjectAnimator的时候,将会提取对应的参数来定义动画对象和对象属性.合适的 ...

  9. 在JavaScript文件中用ajax方法实现省市区的三级联动

    1.JavaScript Document $(document).ready(function(e) { 加载三个下拉列表 $("#sanji").html("< ...

  10. windows 服务的安装与卸载

    卸载服务 Cmd 执行 Sc delete axXinkong(服务名称) 安装服务