三个很特别的CSS小技巧分享

以下就是“三个很特别的CSS小技巧分享”的完整攻略。

弹性盒子让两个子元素等分父容器

要实现让两个子元素等分父容器，我们需要用到Flex布局。首先，将父容器的display属性设置为flex，然后再通过flex-grow属性将子元素占据父容器的比例设置为1，这样两个子元素就等分了父容器。

示例代码：

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1;
}

使用伪元素实现清除浮动

对于包含浮动元素的父容器，为了避免出现高度塌陷的情况，我们可以通过在父容器上设置clear: both属性来清除浮动，但是这样会导致父容器的样式代码变得臃肿。更好的方式是使用伪元素::after，并在其中设置clear: both来达到清除浮动的效果。

示例代码：

<div class="parent">
  <div class="float-left"></div>
  <div class="float-left"></div>
  <div class="clearfix"></div>
</div>

.parent::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.float-left {
  float: left;
}

利用vw和vh实现响应式布局

vw和vh是CSS3新增的单位，分别代表视口宽度和视口高度的1/100，可以用来实现响应式布局。通过给字号、宽度、高度等属性设置vw或vh作为单位，就可以根据不同的屏幕尺寸自动调整元素的大小。

示例代码：

<div class="box"></div>

.box {
  width: 50vw;
  height: 50vh;
  font-size: 5vw;
}

以上就是三个很特别的CSS小技巧的攻略，希望对你有所帮助。