css3布局相关样式-盒布局

最新推荐文章于 2022-12-15 21:15:30 发布

Flee23

最新推荐文章于 2022-12-15 21:15:30 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/destiny1234544/article/details/106556460

版权

在使用css3时，我们需要对一个网页页面进行编排，需要使用到float属性或position属性，但是在使用这两个属性进行编排时无法使底部对齐，所以需要使用到我们的多栏布局，除了多栏布局还可以使用盒布局

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Float属性布局</title>
    <style>
        #centerboy{
            width: 1000px;
            margin: 0 auto;
        }
        div#left{
            float: left;
            width: 300px;
            padding: 10px;
            background-color: green;
        }
        div#right{
            float: right;
            width: 300px;
            padding: 10px;
            background-color: #ff39ca;
        }
        div#conter{
            float: left;
            width: 400px;
            background-color: #0064ff;
        }
        div#left,div#conter,div#right{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="centerboy">
    <div id="left">
        <h2>栏目列表</h2>
        <ul>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
        </ul>
    </div>
    <div id="conter">
        <p>孙鸿志系在全国工商行政管理会议现场被带走
            中纪委：发改委人员“调研”14天 其中12天旅游
            南水北调供水进京 与本地水“同水同价” 问答  专题
            吉林宝源丰致121死火灾宣判 公司董事长获刑9年
            云南致5死10伤砍人案侦破：20岁嫌犯精神异常(图)
            北京公交地铁明起实行新票价 7类人群可免费
            回顾2014互联网金融：一场疯狂抓钱的游戏
            iPhone 7无边框视频火爆 如何让用户喜欢这样的设计
            全国164.9万人今日参加考研 人数持续第二年下降
            威海村民举报检察长被拘 政法委先定性警方后立案
        </p>
    </div>
    <div id="right">
        <h2>推荐文章</h2>
        <ul>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
        </ul>
    </div>
</div>
</body>
</html>

上述代码将一个div分成left、right、center三个部分，并设置各个部分的样式和float浮动，得到下图的布局：
在这里插入图片描述
从效果图来看，很明显可以看出无法将页面底部对齐，所以我们可以使用多栏布局进行排版，但是在使用多栏布局中的column-count属性，每个栏目间的距离是固定的无法进行调节，盒布局可以根据实际情况自己进行调整。只需要把上述代码的float浮动去除，在div中添加（display: -moz-box;
display: -webkit-box;）就可以完成我们的盒布局，修改后的代码如下：
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Float属性布局</title>
    <style>
        #centerboy{
            width: 1000px;
            margin: 0 auto;
            display: -moz-box;
            display: -webkit-box;
        }
        div#left{
            /*float: left;*/
            width: 300px;
            padding: 10px;
            background-color: green;
        }
        div#right{
            /*float: right;*/
            width: 300px;
            padding: 10px;
            background-color: #ff39ca;
        }
        div#conter{
            /*float: left;*/
            width: 400px;
            background-color: #0064ff;
        }
        div#left,div#conter,div#right{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="centerboy">
    <div id="left">
        <h2>栏目列表</h2>
        <ul>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
            <li><a href="index.html">栏目名称</a> </li>
        </ul>
    </div>
    <div id="conter">
        <p>孙鸿志系在全国工商行政管理会议现场被带走
            中纪委：发改委人员“调研”14天 其中12天旅游
            南水北调供水进京 与本地水“同水同价” 问答  专题
            吉林宝源丰致121死火灾宣判 公司董事长获刑9年
            云南致5死10伤砍人案侦破：20岁嫌犯精神异常(图)
            北京公交地铁明起实行新票价 7类人群可免费
            回顾2014互联网金融：一场疯狂抓钱的游戏
            iPhone 7无边框视频火爆 如何让用户喜欢这样的设计
            全国164.9万人今日参加考研 人数持续第二年下降
            威海村民举报检察长被拘 政法委先定性警方后立案
        </p>
    </div>
    <div id="right">
        <h2>推荐文章</h2>
        <ul>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
            <li><a href="index.html">推荐文章</a> </li>
        </ul>
    </div>
</div>
</body>

使用盒布局后的效果如下图所示（底部已经完成了对齐）
在这里插入图片描述
以上就是css3中的盒布局。

Flee23

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3布局相关样式-盒布局

在使用css3时，我们需要对一个网页页面进行编排，需要使用到float属性或position属性，但是在使用这两个属性进行// A code blockvar foo = 'bar';// An highlighted blockvar foo = 'bar';<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Float属性布局&l
复制链接

扫一扫