Css布局系列-上下两栏应用场景

浏览数：27 / 时间：2015年06月09日

今天讲讲上下两栏布局的应用场景，在此之前稍微提一下box-sizing这个属性。该属性有三个值分别为content-box|border-box|inherit。

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

通常我们设置的高宽度其实是指内容的高宽度，是没有将边框的高宽度算在内的。如果设置box-sizing：content-box就是只包含盒子内容的高宽度，边框的高宽不包含在内，默认就是这种算法（图1）。如果想将边框包含在我们设置的高宽度之内，设置box-sizing：border-box就可以（图2），这样你就会看内容的高宽度变成180*180，其计算公式：

内容的宽度=宽度-（边框的宽度*2+padding*2）；内容的高度=高度-（边框的高度*2+padding*2）；

技术分享

（图1）

技术分享

（图2）

这个属性就提到这了，如果想详细了解可以自已去搜，也欢迎大家一起来讨论。上下栏的应用场景其实有很多，前面布局系列综合应用中上下两栏布局就是个示例。面板其实也是一个，这个我平常工作用得最多，到处都是面板。还有extjs、ligerui面板组件其实也是这个样子的。请看效果图：

技术分享

现对面板布局与实现原理进行分析：

面板通常分为标题栏、内容栏两部份；
对标题栏的高度进行固定，内容栏让其随内容的撑高而伸高也就是外撑；
内撑就是面板最外层容器的高度减去标题栏的高度等于内容栏的高度，如果内容太多内容栏就会出现滚动条。

至于什么时候用到外撑什么时候用到内撑这个就看具体需求具体分析。

外撑效果图：

技术分享

代码：

<style type="text/css">
*{margin: 0;padding: 0;}
 body{font-size: 14px;}
.container{position: relative;border: solid 1px red;width: 400px;box-sizing: border-box;margin-left: 20px;margin-top: 20px;text-align:justify;text-justify:inter-word;}
.header{height: 30px;line-height: 30px;background-color: rgb(218,255,241);}
.content{background-color: #ccc;}
</style>
</head>
<body>
    <div class="container">
        <div class="header"> 外撑面板</div>
        <div class="content">
            我是内容栏我是内容栏
        </div>
    </div>
</body>
</html>

内撑效果图：

技术分享

代码：

<style type="text/css">
*{margin: 0;padding: 0;}
body{font-size: 14px;}
.container{position: relative;border: solid 1px red;width: 400px;height:400px;box-sizing: border-box;margin-left: 20px;margin-top: 20px;text-align:justify;text-justify:inter-word;}
.header{height: 30px;line-height: 30px;background-color: rgb(218,255,241);}
.content{background-color: #ccc;position:absolute;top:30px;left:0;right:0;bottom:0;}
</style>
</head>
<body>
    <div class="container">
        <div class="header"> 内撑面板</div>
        <div class="content">
            我是内容栏我是内容栏
        </div>
    </div>
</body>
</html>