前端学习之盒系列模型

       盒模型的学习，一个盒子中的主要属性有5个：width，height，padding，border，margin；这五个属性在CSS中代表的主要含义，weight在CSS中表示的是内容的宽度，而不是盒子的宽度；height指的是内容的高度，而不是盒子的高度；padding是内边距的意思；border指的是边框，margin指的是外边框。

      在CSS中，宽度和真实占有的宽度不是一个概念，真实宽度=左border+左padding+width+右padding+右border；在CSS中，如果想要保持一个盒子的真实占有宽度不变，那么增加width就要相应的减去padding，增加padding就要相应的减去width；padding是内边距，有背景颜色，padding是4个方向的；分别为：padding-top,padding-right,padding-bottom,padding-left;在编写padding属性的时候，有两种方法，第一种是写小属性，例如：padding-left:20px; 
            padding-right:30px;
            padding-top:20px;
            padding-bottom:10px;

       第二种是写综合属性，综合属性用空格隔开，例如：padding:30px 20px 40px 100px；四个数字按顺序分别为：上、右、下、左；在写综合属性的时候，可以写四个属性值：padding:30px 20px 40px 100px；盒模型为：

                                                                   

三个属性值：padding:30px 20px 40px ，没有左边属性值，此时该值与右边属性值相同；盒模型为：

                                                                   

两个属性值：padding:30px 20px，此时下边的属性值与上边的属性值相同，左边的属性值与右边的属性值相同；盒模型为：

                                                                

一个属性值；padding:200px ；盒模型为

                                                              

在编写盒模型时，要懂得用小属性层叠大属性，例如：padding:20px;
                                                                                      padding-left:30px

盒模型为：

                                                              

上面为盒模型的基础知识，目前自己在自学习前端知识，是自己总结的，望大家多多指教！