CSS盒模型

深入了解盒模型

什么是盒模型呢？这个问题对于刚入门学习前端的朋友是需要完全理解掌握的。以下由我来为你简单的介绍盒模型是什么？以及盒模型布局时需要注意的事项有哪些？
盒模型由网页设计中的几个属性组成：内容（content），内边距（padding），边框（border），外边距（margin）。图片模型见下图。

一、组成

Content：内容区域，盒子模型的中心。里面可以是文本图片等多种类型，内容区常用属性有Height（高），Width（宽）。

Padding：内边距，也叫内填充。内容区域距离边框（Border）的范围，属性有五种设置方式：padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。设置padding属性值大小时需要注意会撑开盒子大小，整个所占内容会更大

Border：边框，是内填充和内容区域的边界。边框的属性有border-style（边框类型）、border-width（边框宽度）和border-color（边框颜色） 以及综合了以上三类属性的快捷边框属性 border。

Margin：外边距，是一个盒子的外围区域，让盒子与盒子不会紧贴在一起。外边距的属性有五种 ，即margin-top（外边距上方）、margin-bottom（外边距下方）、margin- left（外边距左方）、margin-right（外边距右方）以及综合了以上四种方向的快捷空白边属性margin。

二、使用方法：

Padding（内填充）用法：

 1.内容与边框的距离大小

 2.内容定位，设置内容在盒子的位置
  
 3.padding属性值不包括在内容大小内，设置时会把盒子撑大
    注意：设置内容大小属性时： 
     - 在宽度上减掉padding左右的宽度
     - 在高度上减掉padding上下的宽度
     - 在盒子无宽高数值时，无影响

 4.可以单独设置某一个方向的内边距大小：
     padding-top(right/bottom/left):  数值；
                 
 5.设置padding属性：
      一个数值  四个方向       
      两个数值  上下  左右 
      三个数值   上   左右  下
      四个数值： 上  右 下 左    （顺时针）

一个div盒子内包含一个一个内容区域的p标签区域，设置pdding后盒子的填充变化

.box{/* 先固定宽高300px （未减padding值）*/            
    width: 300px;            
    height: 300px;            
    background: yellow;            
    /* 使用简写四个属性模式分别为 上填充50px 右填充40px 下填充30px 左填充20px */
    padding: 50px 40px 30px 20px;            
    /* 设置padding属性后 宽度会增加左右填充大小 */            
    /* 设置padding属性后 高度度会增加左右填充大小 */           
     /* 要保持原来显示区域大小，设置宽高需要减掉相应数值  即宽240px 高220px */
     }        
.box p{            
     width: 300px;            
     height: 300px;
     /*内容区域绿色*/            
     background: green;        
     }

Border（边框）属性：

 常用设置：border：1px solid red  （宽度，边框线类型，颜色）
 1. border-width:边框大小 1px（1像素）

 2.border-color:边框颜色
          
 3.border-style:边框类型
      solid （实线） 
      dashed （虚线） 
      dotted （点状线） 
      double （ 双线) 
       none (没有线条)
 4.单独给一个方向边框设置：  
       border-left（right/top/bottom）:50px solid blue；
       border-width/color/style : 属性值
            一个值：四周都添加边框
            两个值：上下    左右
            三个值：  上    左右    下
            四个值：  上 右 下 左    （顺时针）
                                    
 5.边框设置为透明：   transparent  透明       
   内容为空无大小时，边框仍然显示，可设置边框一端或几端透明形成形状

边框属性设置实例：

 .box{            
/* 盒子宽为200像素，高为200像素 */            
width: 200px;            
height: 200px;            
/* 上边框为50像素 实线 红色 */            
border-top: 50px  solid  red;           
 /* 左边框为20像素 虚线 蓝色 */            
 border-left: 20px  dashed  blue;           
  /* 右边框为30像素 点状线 绿色 */           
   border-right: 30px dotted green;            
   /* 下边框为40像素 双线 黄色 */            
   border-bottom: 40px double  yellow; }

margin用法：

1.盒子与盒子之间间隔距离大小 

2.板块定位 几个盒子的距离大小

3.margin属性不改变盒子大小     

4.设置margin：一个数值  四个方向         

             两个数值  上下  左右 

            三个数值   上   左右  下

            四个数值： 上  右 下 左    （顺时针）

   注意： margin数值可以为负值
   
   （1）两个上下板块元素设置margin-top和 margin-bottom时 只会显示最大的数值

   （2）父子元素不能给第一个子元素设置margin-top数值，会给父级设置margin-top值

两个div盒子间距设置：

.box1{         
    width: 150px;         
    height: 150px;
    /*添加左浮动*/
    float: left;         
    background: darkred;   
   }     
.box2{         
   background: darkturquoise;
   /*添加左浮动*/         
   float: left;         
   width: 150px;         
   height: 150px;         
   /*左边距50px*/         
   margin-left: 50px;        
  }