web前端入门到实战：纯CSS实现柱形图

CSS在处理排版之强大，没有做不到，只有想不到。下面我们将一同实现一个柱状图。

先打好一个具体的框架。我们利用无序列表做整体，里面的东西我们根本选择内联无素span，strong，em来填充。

   <ul class="chart">
      <li><em>使命召唤</em><span>: </span><strong>35%</strong></li>
      <li><em>机器战争</em><span>: </span><strong>40%</strong></li>
      <li><em>CS</em><span>: </span><strong>87%</strong></li>
      <li><em>光环</em><span>: </span><strong>45%</strong></li>
      <li><em>半条命</em><span>: </span><strong>23%</strong></li>
    </ul>

解释一下，ul里面的每一个li就代表我们要统计的内容，span为柱身，em为统计项的名字，strong为统计数值。我们可以添加一些背景颜色来区分他们。

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
.chart {
     list-style: none;
     font-family: '宋体';
     font-size: 14px;
     border: 1px solid #ccc;
     margin: 0;
     padding: 5px;
     background:#F2F1D7;
   }
 
   .chart li {
     width:400px;
     background:#DDF3FF;
   }

运行代码：

 <style type="text/css">
      .chart {
        list-style: none;
        font-family: '宋体';
        font-size: 14px;
        border: 1px solid #ccc;
        margin: 0;
        padding: 5px;
        background:#F2F1D7;
      }

      .chart li {
        width:400px;
        background:#DDF3FF;
      }
    </style>

   <ul class="chart">
      <li><em>使命召唤</em><span >: </span><strong>35%</strong></li>
      <li><em>机器战争</em><span >: </span><strong>40%</strong></li>
      <li><em>CS</em><span >: </span><strong>87%</strong></li>
      <li><em>光环</em><span >: </span><strong>45%</strong></li>
      <li><em>半条命</em><span >: </span><strong>23%</strong></li>
    </ul>

但怎样把li弄成柱状呢？我们首先把li弄成并排显示，要达到这种效果，我们有两个方法：1、把li的display变成inline，2、把li变成浮动元素。估量一翻，选择了后者，因为内联元素的盒子模型是难以控制的，margin与padding的计算会变得很复杂。既然选择后者，我们必须面对一个情况，就是浮动溢出了。对策是父元素也变成浮动元素。浮动容器会向内收缩，自适应子元素的高度与宽度。也就是说，我们专注于li的设计就可以了！为了让li表现得像柱子， 我们让它的高比宽长很多，同时为了让大家好辩认每个li的范围，我先给它们加上边框！

.chart {
  list-style: none;
  font-family: '宋体';
  font-size: 14px;
  border: 1px solid #ccc;
  margin: 0;
  padding: 5p