盒子模型（margin，padding，border，float，clear）

1.盒子模型（box model）

     content:内容                               
           内容区域设定：                          
           widht:宽度                        
           height:高度                       
           宽度和高度的设定可以是具体的数值（带单位）也可以是百分比设置;
           宽度和高度是设置内容的宽度和高度；不是整个盒子的宽度和高度; 
     padding：
           内边距的设定用来控制盒子中装载的内容到盒子的边缘（边框）之间的距离；
           盒子的内边距占据的是盒子里面的空间，最小为0,不允许出现负值；
    margin：
          外边距的设定用来控制盒子外围四周的距离，不属于盒子本身的范畴；
          外边距的主要用途是控制盒子的位置,所以可以出现负值；
    border：
          大部分的元素对象在默认情况下是没有边框的；
          要设定边框必须同时设定三个要素：宽度，样式和色彩；
          border:red 1px solid;

    复合属性:                       
           border-width:边框的宽度          
           border-style:边框的样式          
           border-color:边框的颜色          
   复合属性                      
           border-top-color:           
  具有方向性的符合属性可以在一个声明中设置所以方向的定义;
  方向性复合属性的值的缩写方法：
      1个值 ：4个方向        margin：10px 所以的4个边距都是10px；
      2个值：上下/左右     margin：5px 10px 上下边距5px，左右边距10px；
      3个值：上/左右/下  margin：5px 10px 15px 上边距5px,左右边距10px,下边距15px;
      4个值：上/右/下/左 margin：5px 10px 15px 20px 上边距5px,右边距10px,下边距15px，右边距20px;
2.盒子模型的计算
      标准盒子尺寸计算

      盒子自身尺寸：              
         内容的宽高+两侧内边距+两侧边框  
      盒子在页面中占位尺寸：
         内容的宽高+两侧内边距+两侧边框+两侧的外边距

    当盒子的宽度和高度无法确认数值的时候怎么办？                      
    设置一个边框为30px,宽度为浏览器的50% 的盒子不能实现；             
     解决办法：框架盒子                                 
     框架盒子
          直接将宽/高属性设定为盒子自身的调整尺寸，如果带有内边距或边框，则通过缩小内容的区域来实现
          box-sizing :盒子类型设置（css3）    
         值 content-box ：设置盒子为标准盒子类型(默认) 尺寸=widht/height+padding+margin+border
             border-box：设置盒子为框架盒子；尺寸=width/height
         1.实现一个两栏并列的网页布局（float）
         2.其中左列30%宽，右列70px
         3.两个盒子中的内容距离盒子边缘有一点的空白距离;
14.块状元素和行间元素
 1.块状元素（block）
  1.独占一行（该元素前后的其他内容都要换行）
  2.直接适合盒子模型的所有的css属性
     
 2.行间元素 （inline）
  1.宽度由装载的内容决定的,宽度设置无效
  2.由于受到行的限制，高度及上下方向的边距设置无效
   不同：
       块状元素可以嵌套块状元素，也可以嵌套行间元素；
       行间元素不能嵌套块状元素,只能嵌套行间元素;
       块状元素本身即是盒子，行间元素需要转换后变成"盒子";
 3. css：display属性
     值                     说明                            作用
   block           对象呈现为块状元素                          为了便于使用css盒模型属性
   inline          对象呈现为行间元素                          实现html块状元素和行间元素的互换
   inline-block    对象呈现为行间-块状元素                 实现同在一行中的元素能适用盒子模型属性
   none            对象呈现为“无”                  实现元素在页面中“消失”
 
  html标签都有自己的默认的display设置，块状元素：默认为block;行间元素默认为：inline;
  inline-block
    1.本身是inline元素，但视觉表现上是按照block效果呈现,及可以直接使用于盒子模型属性;
    2.典型的例子：<img><input>
    3.这类的html元素通常是代表页面中外部引入文件，或直接定义好的插件;
15.盒子模型思维构建网页布局
   1.盒模型思维：
     1.通过css的siplay属性，可以使所有html标签对象都变身完美的盒子
     2.通过各种“盒子”相互嵌套、并列，实现界面的布局
   2.构建网页布局的思路和步骤
     1.使用盒子模型思维进行页面或板块的分析
     2.html--使用符合布局语义的标签进行结构化;
     3.css---控制标签的尺寸和定位;

         
17.float属性
   1.将页面元素浮动起来（让块状元素左右排版），使其能够向左或向右排列;
      值：left 元素本身向左浮动
       right 元素本身向右浮动
       none(默认值)
    原理：
    浮动元素将脱离默认的文档流，漂浮在默认的文档流之上；
  浮动的元素会向左或向右移动,直到它的外边缘碰到父级元素或这个元素之前的另一个浮动的元素的边框为止;
  特点：一旦元素浮动起立了，就可以直接适用于css盒子模型属性;
           不管元素如何浮动，始终以父级容器或它前面同一层次并且并列的元素作为参考（和父元素对齐）;
      对内容的影响：
      尽管浮动的元素脱离了默认的文档流，但仍然会影响到默认文档流中的盒子里面的内容(图文),这些内容会给浮动元素留出占位;
  clear:
  作用：规定元素的某一侧不允许存在浮动元素（消除其他浮动元素对其产生的影响）
  值：
  both 两侧不允许存在浮动元素
  left 清除左侧的浮动元素
  right 清除右侧的浮动元素
  none 无清除效果 默认值
   设置了clear 的元素将不再向前一浮动元素对齐，换行重新开始；
   解决网页中的“塌陷”问题
    如果父元素只包含了浮动元素 ，那么在未设置高度时，则父元素高度塌缩为零;
     1.创建一个用来清除浮动的css样式类（.clearfix）
     2.针对包裹的全是浮动元素的父级容器使用
     .clearfix{zoom:1}//IE浏览器的专用属性（针对IE）
     .clearfix:after{//伪对象选择符 （在这个对象被浏览器渲染后添加一定的内容）
       content:".";//添加内容写在这里的属性值 这个属性是专门配合伪类对象,必须写;
       display:block;//将添加的内容转换为块级元素
       visibility:hidden;//可视化属性；控制元素是否可见;无论是否可见，保留物理空间；和display属性不同;
       height:0;//将添加进去的内容的高度设置为0；消除其占位；
       clear:both;//将添加去的内容作为清除浮动的对象，实现外围对象中由内容存在，因此可以自动判断高度;