CSS: 记录最近开发中遇到的几个css知识点

[jindada]

padding 百分比

当一个元素宽高不等时

padding: 10%

到底如何解析，是宽度的10%，还是高度的10%，亦或是宽10%，高10%
例子1：

这种情况下我们发现是宽度的10%，那到底是父元素宽度的10%，还是元素本身的10%那？看例子2

我们发现是父元素宽度的10%，那如果是

padding: 20% 10%;

这种情况下，会不会是 padding: 父元素高的20% 宽度的10%那，看例子3:

最终我们发现，当padding值为百分比的时候，基准值是父元素宽度值

[jindada]

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可能有。
                                                                                                                                                                --贺师俊

[jindada]

如何绘制一个宽高相等的元素

最近项目中频繁出现需要绘制宽高相等的元素（宽度不是具体值），那这种需求应该怎么实现那，看例子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百分比的基准值为父元素的宽度)撑起了和宽度相等的值，从而达到了宽高相等的效果

[jindada]

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浏览器 下缺没有这样的问题

[jindada]

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 就可以了