CSS3 盒布局

来源：互联网发布：免费的crm软件编辑：程序博客网时间：2024/05/20 20:46

盒布局是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>

代码分析：

若不设置类名为container内部的属性，此时的排列方式应该是

从上到下。若设置其为盒布局，则改变了原有的文档流动方式，使

用盒布局默认的文档流动方式。

开启盒布局只是盒布局的第一步。

box-oriet:用于定义盒元素的内部布局方向，有五种可能的取值：

horizontal、vertical、inline-axis、block-axis、inherit，分别表示

在水平线上从左到右排列元素，从上到下编排元素，横向编排(默认)，

垂直编排，以及继承父元素的box-orient的值。

box-orient属性在开启盒元素时设置。

此外还有box-direction属性，box-ordinal-group属性，分别用于

定义盒元素内部的布局顺序和内部子元素的显示位置。

阅读全文

0 0