css盒子模型

今天谈谈我对盒子模型的理解。刚接触到盒子模型的时候那是一年前了，那时候在网上看视频学习，视频中的老师一讲到盒子模型的时候声音显得特别大，说明了盒子模型的重要性，今天就简单的谈谈盒子模型吧！

如果把上图看作是HTML里的一个标签div,<div>content</div>.我们就从这一句简单的代码来分析盒子模型。首先div里面的content就是图片中红色区域,content到border之间的区域称为padding，也就是内边距，border就是一个盒子的边框，边框外面还有个外边距margin。

图1-1

.div1{
    width:80px;
    height:80px;
    border:5px solid red;
    padding:20px;
}
.div2{
    width:80px;
    height:80px;
    border:7px solid yellow;
    padding:0px;
}

图1-1:第一个红色div标签我给了它padding:20px;第二个黄色div标签给了它padding:0px;从图中明显可以看出2个div边框离文本的距离大小不同，也发现了2个div大小也不一样（padding撑开了容器），这就是padding，简称内边距。

图1-2

.div1{
    width:80px;
    height:80px;
    border:5px solid red;
    margin:20px;
}
.div2{
    width:80px;
    height:80px;
    border:7px solid yellow;
    margin:0px;
}

图1-2:图上面那条绿色作为基点，第一个红色div给了margin:20px;大家可以看到红色div到绿色的线有了一定的距离，红色div离黄色div也有一定的距离，这个距离就是margin:20px，简称外边距。

图1-3

.div1{
    width:80px;
    height:80px;
    border:3px solid red;
}
.div2{
    width:80px;
    height:80px;
    border:10px solid yellow;
}

图1-3:第一个红色div边框的宽度为3px，第二个黄色div边框为10px，边框宽度同样也会撑开容器大小。

最后来讲下margin,padding,border参数。

margin:

margin: 10px;（上、下、左、右各10px。）
margin: 10px 20px;（上、下10px；左、右20px。）
margin: 10px 20px 30px;（上10px；左、右20px；下30px。）
margin: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）
margin-top:10px;(上:10px;)
margin-right:10px;(右:10px;)
margin-bottom:10px;(下:10px;)
margin-left:10px;(左:10px;)

padding:

padding: 10px;（上、下、左、右各10px。）
padding: 10px 20px;（上、下10px；左、右20px。）
padding: 10px 20px 30px;（上10px；左、右20px；下30px。）
padding: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）
padding-top:10px;(上:10px;)
padding-right:10px;(右:10px;)
padding-bottom:10px;(下:10px;)
padding-left:10px;(左:10px;)

border:

border:1px solid red;(第一个参数边框宽度，第二个边框类型，第三个边框颜色)
border-top
border-right
border-bottom
border-left
(上，右，下，左依次控制单边边框)