盒模型的理解

 

盒模型的理解

盒模型是网页布局的基石，从盒子的内部倒盒子的外部，分别为：内容（图片、文本、视频、小盒子...）、内填充（补白）【相当于盒子里面的泡沫】、盒子本身（border）和外边距。

  关于盒模型具体的css属性，有：内填充padding属性和外边距margin属性

  下面是关于padding属性和margin属性的用法：

一、Padding用法：

                1、padding是长在 内容 和 盒子之间的距离

                2、padding是长在盒子里面的

                3、padding的作用：主要控制子元素在盒子内部的位置关系

                4、padding是添加在父元素上面

                5、padding可以把盒子撑大

                         如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding

                         注：如果一个盒子没有固定大小（被内容撑开），添加padding 不用减

                6、单一方向上设置padding值：

                                                                 padding-left

                                                                 padding-right

                                                                 padding-top

                                                                 padding-bottom

                7、padding的设置方法：

                                                      padding:一个值——四周都是padding

                                                      padding:两个值——上下、左右

                                                      padding:三个值——上、左右、下

                                                      padding:四个值——上右下左

               8、padding不会对背景图的位置造成影响

               9、padding不能为负值

二、Margin用法：

               1、margin 是长在盒子外围的。

               2、margin 控制当前元素 与 其他同级元素的位置关系。

               3、margin不会改变盒子内部的大小。

               4、给元素的单一一个方向设置margin值：

                                                                                 margin-right

                                                                                 margin-left

                                                                                 margin-top

                                                                                 margin-bottom

              5、margin设置方法：

                                              margin:一个值——四周都是margin

                                              margin:两个值——上下、左右

                                              margin:三个值——上、左右、下

                                              margin:四个值——上右下左

             6、margin是可以设置负值的

其中关于margin常出现的BUG：

                                                 A、同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。

                                                 B、当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面

  最后就是自己对margin和padding使用的一点理解吧，也是经过了证实，一开始我也是不怎么明白这两个的用法，比较混乱，后来也是才明白一点：就是使用margin时是在子元素与子元素之间，而子元素与父元素之间则使用padding。