Question

我一直试图找出这段CSS animation。从标记中可以看到

<b class = "b switch"> </b>

并且应用的css样式是

.switch {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 22px;
  background-color: #fff;
  border-radius: 36px;
  z-index: 1;
}

虽然CSS样式没有指定块显示或宽度或高度，但空<b>标签仍设法将自身弯曲成一个完全适合div的圆形圆。这是如何运作的？如果有人对空<i>或<b>标签的使用有所了解并将它们塑造成不同的形状，我将非常感激。

Answer 1

对于内联元素1，

position: absolute;隐含display: block，而left + right和top + bottom对则设置为display:block根据视口（或最接近的祖先）的尺寸。顺便说一下，为.b类设置了border-radius: 36px。

所以有一个60 x 40px的矩形，其位置为：absolute，而inside是另一个矩形，也是从其父级的顶部，左侧和底部边缘以及右侧22px绝对定位2px。如果您删除{{1}}行，则应该清楚：）

Answer 2

这与您正在使用的标记无关。

如果您指定position: absolute，width和height auto（默认值），以及top的全部四个{{1} }}，right和bottom，元素将拉伸以适应这些边界。

用空标签塑造形状。需要代码说明

2 个答案: