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. Vue计算属性的用法

    计算属性是个很好玩的东西,在这里面可以对数据模型进行操作,·也可以使用getter,setter方法.使用的话也是非常的简洁明了 这里写个例子 <!DOCTYPE html> <ht ...

  2. POJ2195&&HDU1533(KB11-D 最小费用最大流)

    Going Home Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23515   Accepted: 11853 Desc ...

  3. 实例化Flask的参数 及 对app的配置

    Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? 它能给我们带来怎么样的方便呢? 首先展示一下: from ...

  4. python的深浅拷贝以及fromkeys的用法

    1.join()的用法:使用前面的字符串.对后面的列表进行拼接,拼接结果是一个字符串 # lst = ["alex","dsb",'wusir','xsb'] ...

  5. 【代码笔记】iOS-计算时间差

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  6. 配置ArcGIS Server使用LDAP身份认证

    1.登陆ArcGIS Server Manager,修改站点的安全设置.选择用户和角色来自现有企业系统(LDAP或Windows域). 2.选择LDAP存储类型. 3.填写LDAP用户存储连接信息.主 ...

  7. HDFS 2.7.4中hdfs-site.xml参数未配置引发的一些异常

    生产上部署了HDFS 2.7.4,最近遇到了一些异常,记录下来备忘: 一.dfs.datanode.directoryscan.throttle.limit.ms.per.sec DataNode运行 ...

  8. Python使用MySQLConnector/Python操作MySQL、MariaDB数据库

    使用MySQL Connector/Python操作MySQL.MariaDB数据库   by:授客 QQ:1033553122 因目前MySQLdb并不支持python3.x,而MySQL官方已经提 ...

  9. WebView动态注入JavaScript脚本

    Demo地址:https://gitee.com/chenyangqi/YouMeDai 背景介绍 在Android与JavaScript交互一文中学习了原生和JS交互,但是如果我们想和别人开发好的w ...

  10. Python+Selenium笔记（六）：元素定位

      (一)  前言 Web应用以及包含超文本标记语言(HTML).层叠样式表(CSS).JS脚本的WEB页面,基于用户的操作(例如点击提交按钮),浏览器向WEB服务器发送请求,WEB服务器响应请求,返 ...