一,盒子模型
1,什么是盒子模型?
盒子模型(Box Model)就是把HTML元素看作一个矩形的盒子,每个矩形由四个部分组成,分别为
"margin外边距,border边框,padding内边距,content内容"组成的,每个盒子除了有自己的大
小和位置之外,还会影响其它元素的大小和位置.
2.盒子形态
盒子分为 标准盒子 和 怪异盒子
标准盒子:
标准盒子中 width 指的是内容区域的宽,height 指的是内容区域的高。
盒子大小设置:content = content + padding + border + margin
怪异盒子:
怪异盒子中 width 指的是 “内容+ padding + border”的总宽/高度。
盒子大小设置:content = (content + padding + border)+ margin
二,margin (外边距)的合并
1,margin外边距:
作用:调整元素之间的间距,移动元素自身的位置.
距离:
垂直方向:从自身边框开始到另一个元素边框之间的的距离.
水平方向:从自身边框开始到另一个元素margin之间的距离.
语法:
margin:通过值控制不同的外边距,值1~4个.
margin-top/right/bottom/left: 设置单边外边距;
margin-block/inline-start/end:设置单边外边距;
auto填充:
使用auto计算可以实现块级元素左右居中对齐.
2,合并情况
margin的合并:块级元素的垂直方向会发生合并.
合并情况: 1.两个相邻的同胞元素的上下外边距会发生合并.
2.嵌套中,第一个子元素和最后一个子元素的margin会穿透父元素,看起来像父元素的外边距.
会形成父盒子塌陷(子元素设置margin-top,父元素跟着一起移动)
解决方案:
a.给父元素天年边框 border (不推荐,麻烦).
b.给父元素添加内边距 padding (值不小于等于0即可).
c.给父元素添加overflow: 不是nomal都行 (溢出元素内容会被隐藏).
3.空快的合并.