css盒子

css盒子

一，盒子尺寸

前端开发在写布局的时候常常会碰到这样一种情况，我们希望设置一个元素的宽度为100%，但是他仍然有内边距或外边距的应用。在使用传统的盒模型时，CSS使用父元素的宽度计算百分比宽度，然后再加上外边距和内边距。换句话说，100%宽度的元素加上内边距和外边距就会产生溢出现象。因此，我们可以将box-sizing设置为border-box,而不是原来默认的content-box，这样就可以改变计算尺寸的方式，边框，内边距，外边距都将计算在内。但是这种用法在IE8以前的版本是不支持的，除非你打算放弃兼容这些让人厌恶的IE浏览器。用法如下：

.border-box{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

二，弹性盒模型

这个东西是我们日夜期待的特性，因为我们总希望我们的块能够在宽度和高度上自动延伸。因此CSS3引入了弹性盒模型的概念，如果你用过或者懂得EXT，那么这里的用法你将会感觉相当熟悉。首先，我们的父元素需要设置为BOX状态：

.hbox{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-align:stretch;
    -webkit-box-pack:left;

    display:-moz-box;
    -moz-box-orient:horizontal;
    -moz-box-align:stretch;
    -moz-box-pack:left;
}
.vbox{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-align:stretch;

    display:-moz-box;
    -moz-box-orient:vertical;
    -moz-box-align:stretch;
}

父容器设置完成后，我们就可以在子容器中相应的设置其所占据的空间了，用flex就可以非配其空间大小,如果已经有一个固定的宽度或高度值，则将它的flex设置为0：

#sidebar{
     -webkit-box-flex:0;
    -moz-box-flex:0;
    box-flex:0;
    width:200;
}
#content{
    -webkit-box-flex:1;
    -moz-box-flex:1;
    box-flex:1;
}