css盒子模型
1.盒模型
在网页中，所有的标签都可以看做是一个盒模型，它有5个基本属性：width，height，border（边框），margin（外边距），padding（内边距）。
如下图示意：
2.盒模型属性介绍
width：内容的宽度。
height：内容的高度。
padding：内容与边框之间的空间。根据需要可拆分为padding-left/right/top/bottom。
border：围绕在内边距和内容之外的边框。根据需要可拆分为border-left/right/top/bottom，或者是border-width/color/style。
margin：指定该盒子与另一个盒子之间的距离。根据需要可拆分为margin-left/right/top/bottom。
需要注意的是盒子模型在网页中实际占据的大小并不是width和height。
如果要计算盒子真正占据的空间应该是：
宽=width+border-left+border-right+padding-left+padding-right+margin-left+margin-right。
高=height+border-top+border-bottom+padding-top+padding-bottom+margin-top+margin-bottom。
3.padding的具体使用
a：padding的作用：主要控制子元素在盒子内部的位置关系，是长在 内容 和 盒子之间的距离
b：padding添加在父元素上面。
c: padding会把盒子撑大！
如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding !!
注：如果一个盒子没有固定大小（被内容撑开），添加padding 不用减。
d：单一方向上设置padding值：
padding-left/right/top/bottom
e:padding的设置方法：
padding:一个值 四周
padding:两个值 上下 左右
padding:三个值 上 左右 下
padding:四个值 上右下左
f：padding不会对背景图的位置造成影响。
注意！padding的值不能为负！
4.margin的具体使用
a:margin 是长在盒子外围的。
b:margin 控制当前元素 与 其他同级元素的位置关系。
c:margin不会改变盒子内部的大小。
d:给元素的单一一个方向设置margin值
margin-right/left/top/bottom
e:margin设置方法：
margin:一个值 四周
margin:两个值 上下 左右
margin:三个值 上 左右 下
margin:四个值 上右下左
f:margin是可以设置负值的！
5：margin常出现的问题
a:同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box1 { width: 500px; height: 50px; background-color: blue; margin-bottom: 10px; } .box2 { width: 300px; height: 50px; background-color: chartreuse; margin-top: 50px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
运行结果如下：
可以看到box1和box2的距离并不是10px+50px，而是按照最大值50px进行设定。
b:当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .demo { width: 1000px; height: 30px; background-color: darkred; } .box1 { width: 500px; height: 50px; background-color: blue; } .box2 { width: 300px; height: 30px; background-color: chocolate; margin-top: 30px; } </style> </head> <body> <div class="demo"></div> <div class="box1"> <div class="box2"></div> </div> </body> </html>
运行结果如下：
可以看到子元素加了margin-top 但这个属性最终加在了父元素上面。
原文：https://www.cnblogs.com/link-12188/p/12345511.html