CSS3 盒元素弹性空间分配

最新推荐文章于 2022-09-08 14:55:31 发布

wlwc0627

最新推荐文章于 2022-09-08 14:55:31 发布

阅读量866

点赞数 1

文章标签： box css3 布局

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

版权

CSS3新增了box-flex属性，用于定义盒元素内部的子元素是否具有空间弹性。

所谓空间弹性：当盒元素的尺寸发生变化时(放大或缩小)，被定义为有空间弹

性的子元素的尺寸也会相应的发生变化(放大或缩小)。

每当盒元素有额外的空间时，具有空间弹性的子元素会扩大自身大小来弥补这

一空间。

看下面的例子：实现一个三栏的网页

此时菜单栏的空间是根据自身的大小来确定的

/*其代码如下*/

<!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>