目录

  1. 制作圆环
  2. 两列自适应布局
  3. 文字空两格
  4. 解决因float造成的高度塌陷问题

制作圆环

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
    <span class="box circle" data-content="3"></span>
    <span class="box circle2">3</span>
    <span class="box circle3">3</span>
</div>
<style>
body{font-family: "Helvetica Neue", Helvetica, sans-serif;}
.box{width:50px;height:50px;border-radius: 25px;border: 1px solid #F44452;line-height: 50px;text-align: center;box-sizing: border-box;vertical-align: top;color:#FFF;font-size: 26px;}
.circle{display: inline-flex;justify-content: center;align-items:center;}
.circle:after{content:attr(data-content);display: inline-block;width:38px;height:38px;border-radius: 20px;background-color: #F44452;line-height: 38px;}
.circle2{display: inline-block;padding:5px;background:#F44452;background-clip:content-box;line-height: 38px;}
.circle3{display: inline-block;background-image:radial-gradient(#F44452 0px,#F44452 19px,#FFFFFF 20px,#FFFFFF 100%);}
</style>

两列自适应布局

两列自适应布局有很多种，这种方式兼容性比较强，适合制作表单

文字空两格

1
text-indent: 2em;

解决因float造成的高度塌陷问题

在父容器上添加下面的类，如果使用bootstrap，可以使用clearfix类

1
.clear:after{clear: both;content:' ';display: table;}