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

·  阅读 112

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



分类:
阅读
标签: