jindada
CSS: 记录最近开发中遇到的几个css知识点
padding 百分比
当一个元素宽高不等时
padding: 10%
到底如何解析，是宽度的10%，还是高度的10%，亦或是宽10%，高10%
例子1：
这种情况下我们发现是宽度的10%，那到底是父元素宽度的10%，还是元素本身的10%那？看例子2
我们发现是父元素宽度的10%，那如果是
padding: 20% 10%;
这种情况下，会不会是 padding: 父元素高的20% 宽度的10%那，看例子3:
最终我们发现，当padding值为百分比的时候，基准值是父元素宽度值
borderWidth可以设置10%吗？
如果我们有一个宽度未知的块元素，我们的需求是边框宽度是元素宽度的10%，那我们是否可以这样写那？
border: 10% solid #fff;
那？看例子4
发现浏览器给出了Invalid property value（属性值无效） 错误，那这是为什么那？
CSS还是根据设计来的。所以要说原因，那就是border的use cases没有百分比的需求。
padding/margin是空白（或者透出背景），其传达意义是通过与非空白的内容区域的对比达成。故空白的大小可能与内容相关，也可能与可用空间相关，后者就是百分比。空白起的是辅助的作用，它本身并不需要特别精确，也就是空白多一点少一点影响不大。
border（通常）是有颜色和图案的。尽管是修饰性的，但与文字、图片等内容一样，它是通过对视觉的直接刺激来传达意义，而不象空白是间接的。border的粗细即使只有1px的变化，对视觉的影响可能很大。设计中一般会将border的宽度视作是确定的，你看border的取值有粗中细，这算是捕捉到的典型的设计需求。至于说border不支持百分比导致无法全部按照百分比设计，这个其实是伪需求。实际我们需要的是padding或margin能支持百分比减去确定的长度，也就是calc功能。
当然，现在CSS3已经增加了vw/vh等相对于viewport的单位（在绝大多数需求情况下可以取代百分比）。所以理论上你是可以做出类似于百分比宽度的border。［注意：Chrome的当前版本不支持vw/vh单位的border-width，FF支持，其他浏览器未测试。］不过设计上是否真的有这样的需求？我个人觉得普通的边框应该是没有的。或许配合border-image可能有。
--贺师俊
如何绘制一个宽高相等的元素
最近项目中频繁出现需要绘制宽高相等的元素（宽度不是具体值），那这种需求应该怎么实现那，看例子5:
<style>
.test {
width: 100%;
background: red;
}
.test::before {
content: '';
display: block;
padding-top: 100%;
}
</style>
<div style="width: 100px; height: 200px;">
<div class="test">
</div>
</div>
利用伪元素 + padding: 100% (padding百分比的基准值为父元素的宽度)撑起了和宽度相等的值，从而达到了宽高相等的效果
backdrop-filter 在chrome(版本83, 发文时的最高版本)下的 BUG
最近使用中发现了backdrop-filter属性，能绘制出一些高级的效果（具体用法MDN）而且发现兼容性也很不错，但是实际使用中发现了个奇怪的bug
影响position：fixed （生成绝对定位的元素，相对于浏览器窗口进行定位。）
<style>
html, body {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.test {
margin-top: 100px;
width: 100px;
height: 100px;
background: red;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: green;
}
</style>
<div class="test">
<div class="backdrop">
</div>
</div>
这是正常的fixed定位 结果为：
当给.test加上 backdrop-filter: blur(10px); 后，我们发现:
但是在 safari浏览器 下缺没有这样的问题
margin重叠问题
我们先看例子6:
<style>
.test1, .test2 {
width: 100px;
height: 100px;
margin: 10px;
background: red;
}
<style>
<div class="test1">
</div>
<div class="test2">
</div>
我们发现垂直方向的margin重叠了，并没有出现我们想要的2个元素距离20px的情况，那这是为什么那？找到一个很好的解释：
margin的定义不是让元素移动xxpx，而是这个元素的旁边必须有xxxpx的的空白
至于解决办法有很多，最简单的就是垂直方向不同时采用 top 和 bottom 就可以了