盒模型

1、盒子中的区域 div，但凡是块元素，都可以认为是盒子

  一个盒子中主要的属性you：width、height、padding、border、margin。

        width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。

        height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度

        padding是“内边距”的意思

        border是“边框”

        margin是“外边距”

<div class="box1"> <img src="logo.png" alt=""> </div>

css样式:

.box1{ 
   /* 盒子的实际宽度 === 左右边的border+padding+内容宽度 */ 
   background-color: lightblue; 
   /* 盒子内容的宽高度 */ 
   width: 720px; 
   height: 720px; 
   border: 1px solid lightskyblue; 
   margin: 0 auto; 
   padding:10px 2 0px 30px 40px; 
} 
.box1 img{ 
   width: 100%; 
}

当前盒子的实际宽度为：720+1+1=722px；

2、其中可以给盒子添加padding，margin属性，下面以padding为例：

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

小属性：

 padding-top: 30px;
 padding-right: 20px;
 padding-bottom: 40px;
 padding-left: 100px;

等价于：padding:30px 20px 40px 100px;

如果只写3个值：padding: 20px 30px 40px;

则是上、右、下、左和右一样：

如果只写2个值：padding: 30px 40px;

所以padding: 30px 40px;等价于： 

padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;

要懂得，用小属性层叠大属性：padding: 20px;

                                               padding-left: 30px;

错误写法（将会采取就近原则渲染）：padding-left: 30px;

                                                          padding: 20px;

3、border边框有三个要素：粗细、线型、颜色。颜色如果不写，默认是黑色。

代码：border: 1px dashed red;

其中dashed是线型，还有：

<p class="w w1">dotted</p> 
<p class="w w2">dashed</p> 
<p class="w w3">solid</p> 
<p class="w w4">double</p> 
<p class="w w5">groove</p> 
<p class="w w6">ridge</p> 
<p class="w w7">inset</p> 
<p class="w w8">outset</p>

css样式：

.w{ 
   width: 100px; 
   margin: 0 auto; 
   text-align: center; 
   margin-top: 10px; 
} 
.w1{ 
   border:1px dotted red; 
} 
.w2{ 
   border:1px dashed red; 
} 
.w3{ 
   border:1px solid red; 
} 
.w4{ 
   border:1px double red; 
} 
.w5{ 
   border:1px groove red; 
} 
.w6{ 
   border:1px ridge red; 
} 
.w7{ 
   border:1px inset red; 
} 
.w8{ 
   border:1px outset red; 
}

代码演示：

border属性能够被拆开，有两大种拆开的方式：

1） 按3要素:border-width、border-style、border-color

2） 按方向：border-top、border-right、border-bottom、border-left