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-topborder-rightborder-bottomborder-left(上，右，下，左依次控制单边边框)