css实现左中右三栏布局的几种方法1

1.首先讲一下css的盒子模型-最近用的比较多的一个属性box-sizing

   1.1盒子模型

       

如图所示，盒子模型由content,padding,border,margin四个部分组成，其中margin不计算到元素的宽和高中。

关于元素的宽和高有两种计算方式。见1.2.

1.2 元素的宽和高有两种计算方式（box-sizing）

   第一种：box-sizing：content-box;

   这种元素计算方式的意思是我们在css样式中定义的宽和高仅为元素内容的宽和高，不包括padding和border的值，比如我们定义一个div区域宽度共为800px，

• padding-left:30px
• padding-right:55px
• border-left:5px;
• border-right:10px;
  

   那么元素内容的宽度应为700px,具体见代码段1和图片2

<style>
    div{
        box-sizing: content-box;
        /*注意这里宽度定义*/
        width:700px;
        height: 300px;
        padding-left:30px;
        padding-right:55px;
        border-right: 10px rosybrown solid;
        border-left: 5px darkcyan solid;
        background-color: yellow;
    }
</style>

                                                   代码段1

                          图片2

第二种：box-sizing:border-box;

这种元素计算方式的意思是我们定义的宽和高包括padding和border的值，在和上图padding与border值一样的情况下，见代码段2与图片3.

<style>
    div{
        box-sizing: border-box;
        /*注意这里宽度定义*/
        width:800px;
        height: 300px;
        padding-left:30px;
        padding-right:55px;
        border-right: 10px rosybrown solid;
        border-left: 5px darkcyan solid;
        background-color: yellow;
    }
</style>

                                                代码段2

                         图片3