列表

扩大可点击区域

实现思路：伪元素
具体分析：移动到边缘也可以出现手型并点击

  1. .expand-range {
  2.   position: relative;
  3. }
  4. .expand-range:after {
  5.   content: '';
  6.   position: absolute;
  7.   top: -10px; right: -10px; bottom: -10px; left: -10px;
  8. }
  10. @mixin expand-range($top: -10px, $right: $top, $bottom: $top, $left: $right, $position: relative) {
  11.   position: $position;
  12.   &:after {
  13.     content: '';
  14.     position: absolute;
  15.     top: $top;
  16.     right: $right;
  17.     bottom: $bottom;
  18.     left: $left;
  19.   }
  20. }
  21. //使用：.test { @include expand-range($top: -5px, $position: absolute) }

伪元素实现背景，层叠上下文

实现思路：伪元素
具体分析：绝对定位，层级关系，指定大小

  1.   position: absolute;
  2.   top: 0; right: 0; bottom: 0; left: 0;
  3.   z-index: -1;

image.png

边框内圆角

实现思路：伪元素
具体分析：绝对定位，层级关系，指定大小

image.png

自适应的圆角效果

实现思路：border-radius
具体分析：设置圆角的值以及解析过程

image.png

自适应宽度

根据后代的最大宽度自动设置
实现思路：min-content
具体实现：width：min-content

行级内容根据展示自动选择是否换行

场景描述：标签内容，当前行能展示，展示，不能完全展示，则完全换行 。
解决方案：inline-block
特性解释：默认的span标签为行内样式，默认展示时会把文本换行，明显不符合需求，这种情况下就可以设置inline-block ，这个属性不但可以用来解决设置行级元素宽度的问题，也可以用来解决需要行内元素需要完整展示的需求。

补充中


参考文档