20.CSS盒模型【上】

                                         第十六章  CSS盒模型【上】

一、元素尺寸

      属性                   值                    说明              CSS版本

   1、width          auto、长度值或百分比     设置元素的宽度            1

   2、height         auto、长度值或百分比     设置元素的高度            1

   3、min-width      auto、长度值或百分比     设置元素最小宽度          2

   4、min-height     auto、长度值或百分比     设置元素最小高度          2

   5、max-width      auto、长度值或百分比     设置元素最大宽度          2

   6、max-height     auto、长度值或百分比     设置元素最大高度          2

     //设置元素尺寸

     div{

        width:200px;    //可以设置百分比。

        height:200px;   //高度设为百分比没用，因为没有参照物。

        /*width:auto;*/     }

        /*height:auto;*/    } //auto为默认值，width在auto下是100%的值，height在auto下是自适应。

     }

    解释：设置元素的固定尺寸

  

     //限制元素尺寸

     div{

        min-width:100px;

        min-height:100px;

        max-width:300px;

        max-height:300px;

     }

     解释：这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制他的最大值和最小值。

二、元素内边框

          属性                 值                    说明          CSS版本

   1、 padding-top       长度值或百分比          设置顶部内边距       1

   2、 padding-botter    长度值或百分比          设置底部内边距       1

   3、 padding-left      长度值或百分比          设置左边内边距       1

   4、 padding-right     长度值或百分比          设置右边内边距       1

   5、 padding           1～4个长度值或百分比    简写属性             1

      //设置四个内边距

      div{

         padding-top:10px;         }

         padding-botter:10px;      } == padding:10px;

         padding-left:10px;        }

         padding-right:10px;       }

         /*padding: 10px 20px;*/             // 上下的内边距为10px，左右的内边距为20px

         /*padding: 10px 20px 30px;*/        // 上边距10px，左右20px，下边距30px;（因为拗口，所以不常用）

         /*padding: 10px 20px 30px 40px;*/   // 顺序为 上右下左；

      }

三、元素外边距  (属性同上)

         属性                 值                    说明          CSS版本

   1、 margin-top       长度值或百分比          设置顶部内边距       1

   2、 margin-botton    长度值或百分比          设置底部内边距       1

   3、 margin-left      长度值或百分比          设置左边内边距       1

   4、 margin-right     长度值或百分比          设置右边内边距       1

   5、 margin           1～4个长度值或百分比    简写属性             1

四、处理溢出（当设置了内容尺寸且内容过大时，就会产生溢出的问题，溢出主要有两个方向，右侧和底部。我们可以通过overflow系列的样式来控制它）

         属性         值             说明            CSS版本

   1、overflow-x    溢出值    设置水平方向的溢出值      3

   2、overflow-y    溢出值    设置垂直方向的溢出值      3

   3、overflow      溢出值    简写属性                  2

        溢出处理主要有四种处理值

       值                        说明

   1、auto        浏览器自行处理溢出内容，如果有溢出内容，就显示滚动条，否则就不显示滚动条

   2、hidden      如果有溢出内容，直接减掉

   3、scroll      不管是否溢出，都会出现滚动条，但不同浏览器显示发那个是不同

   4、visible     默认值，不管是否溢出，都显示内容