盒模型的理解

盒模型的理解
盒模型的理解
盒模型是⽹页布局的基⽯，从盒⼦的内部倒盒⼦的外部，分别为：内容（图⽚、⽂本、视频、⼩盒⼦...）、内填充（补⽩）【相当于盒⼦⾥⾯的泡沫】、盒⼦本⾝（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。