自己平时padding和margin使用很多，但是理解上还是很片面。前端时间买了 张鑫旭 老师的《CSS世界》，着重看了padding和margin的部分。讲的很好，记录选学习笔记。
一、padding
盒子内补间，类似于快递盒子内快递商品外包裹的那层起保护作用的海绵。在CSS中这层“海绵”是透明的。在CSS中，根据尺寸有所不同。
.box{
width:80px;
padding:20px;
}
在CSS中默认的box-sizing是content-box。使用padding会增减元素的尺寸。
盒子的两种模型中对比感觉还是IE的更符合实际。CSS3引入的box-sizing属性的作用或许就是为了和现实世界中更贴近。
.class{
box-sizing:border-box;
}
设置值为border-box就不会计算padding和border的值了。宽度为80px;
但是，但是，padding的值足够大的情况下，width就无能为力了。
.box{
width: 80px;
padding: 80px;
background: green;
box-sizing: border-box;
}
此时的宽高为160px * 160px。
内联元素的padding也会影响垂直方向。
a{
padding: 50px;
background: blue;
}
尺寸有效，但是对上下元素的原本布局却没有任何影响，仅仅是垂直方向上发生了层叠。
不影响其他元素布局而是出现层叠效果的现象分为两类：
一类是纯视觉层叠，不影响外部尺寸。另一类则会影响外部尺寸。box-shadow以及outline属于前者，inline元素的padding层叠属于后者。
区分：如果父容器overflow：auto。层叠区别超出父容器的时候，没有滚动条就是纯视觉的；若出现滚动条，则会影响尺寸、影响布局。
内联元素的padding对视觉层和布局层具有双重影响。
image.png
不那么高的分隔符实现
<a href="">登录</a><a href="">注册</a>
<style>
a + a:before{
content: "";
font-size: 0;
padding: 10px 3px 1px;
margin-left: 6px;
border-left: 1px solid gray;
}
</style>
padding 不支持复制。百分比的值无论是水平方向的还是垂直方向的均是相对于宽度计算的。(父元素)
这里涉及到一个内联元素的垂直padding会让“幽灵空白节点”显现，也就是规范中的“strut”出现。。内联元素默认的高度完全受font-size大小控制。
二、margin外边距
元素设定了width值或者保持“包裹性”的时候，margin对尺寸没有影响，只有“充分利用可用空间”的状态的时候，margin才可以改变元素的可视尺寸。
.father{
width:300px;
margin:0 -20px;
}
此时元素的宽度还是300像素，尺寸不变化。因为只要宽度设定，margin就无法改变元素尺寸。
但是
<div class="father">
<div class="son"></div>
</div>
.father{
width:300px;
}
.son{
margin:0 -20px;
}
则.son元素的宽度就是340px，尺寸通过负值设置变大了，因为此时的宽度变现是“充分利用可用空间”。
margin百分比的值无论是水平方向的还是垂直方向的均是相对于宽度计算的。(父元素)
元素设置margin在垂直方向上无法改变元素自身的内部尺寸，往往需要父元素作为载体，此外，由于margin合并的存在，垂直方向往往需要双倍尺寸才能和padding变现一致。
margin合并：
块级元素的上边距与下边距有时会合并为单个外边距，这样的现象称为“margin合并”
①块级元素，但不包括浮动和绝对定位，尽管浮动和绝对定位可以让元素块状化
②只发生在垂直方向，不考虑writing-mode的情况下。
合并的三种场景：
（1）相邻兄弟元素margin合并。
（2）父级和第一个/最后一个子元素
（3）空块级元素的margin合并
合并计算规则：
正正取大值、正负值相加、负负最负值。
再来一个小题吧：
<html>
<head></head>
<body>
<div class="wrap"><div class="inner"></div></div>
</body>
<style>
.wrap{
width: 300px;
height: 100px;
background: red;
}
.inner{
margin-top: 20%;
padding-top: 10%;
background: blue;
}
</style>
</html>
内部盒子的高度，和顶部距离父盒子的距离是多少？
先看了这些之后在深入理解。。。未完待续。。。
网友评论