CSS3 盒布局

最新推荐文章于 2022-10-29 19:58:35 发布

wlwc0627

最新推荐文章于 2022-10-29 19:58:35 发布

阅读量475

点赞数

文章标签： css3 box 布局

本文链接：https://blog.csdn.net/actorWen/article/details/78788180

版权

本文介绍了CSS3中的盒布局，这是一种新型的布局方式，相较于传统浮动布局更为灵活且使用简便。文章通过实例演示了如何使用盒布局实现三栏网页的设计，并讲解了相关属性如display、box-orient等。

摘要由CSDN通过智能技术生成

盒布局是CSS3发展的新型布局方式。

相比于传统的浮动布局，盒布局更加灵活，使用方法也相对简单。

开启盒布局的方法，就是把display属性值设为box或inline-box。

开启盒布局时，可同时设置如下；

display: -webkit-box; /*兼容webkit内核*/
display: -moz-box; /*兼容Gecko内核*/
display: box; /*定义为盒子显示*/

看下面的例子：一个简单的三栏网页

从左至右依次排列三个栏目：菜单、内容、工具

此例可使用浮动布局的方式来实现。

此处我们使用盒布局来实现这一效果，看如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20171213 开启盒布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
/*开启盒布局*/
display: -webkit-box; /*兼容webkit内核*/
display: -moz-box; /*兼容Gecko内核*/
display: box; /*定义为盒子显示*/
}
.container div{
color: #fff;
font-size: 15px;
padding: 10px;
line-height: 20px;
}
.container div ul{
margin: 0;
padding-left: 20px;
}
.container>div:first-child{ /*选中菜单栏所对应的div元素，并设置其样式*/
background-color: #f63;
}
.container>div:nth-child(2){/*选中内容栏所对应的div元素，并设置其样式*/
background-color: #390;
width: 200px;
}
.container>div:last-child{
background-color: #039;
}
</style>
</head>
<body>
<div class="container">
<div>
<h2>菜单</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>活动沙龙</li>
<li>研发小组</li>
</ul>
</div>
<div>
<h2>内容</h2>
<p>盒布局是CSS3发展的新型布局方式，它比传统的浮动布局方式更加完善，更加灵活，而使用方法却极为简单。</p>
<p>开启盒布局的方法，就是设置display的属性为box(或inline-box)。</p>
</div>
<div>
<h2>工具</h2>
<ul>
<li>天气预报</li>
<li>货币汇率</li>
</ul>
</div>
</div>
</body>
</html>