CSS深入理解之absolute（HTML/CSS）

absolute和float是同父异母的兄弟，因为它们具有相同点：包裹性与破坏性

absolute的特点

1、独立的，并且可以摆脱overflow的限制，无论是滚动还是隐藏；

2、无依赖，不受relative限制的，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值；

3、脱离文档流；

4、具有跟随性（依据这个特点，能省很多的relative，并且扩展性更强）。

骚操作：使用注释来消除空格

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图标定位二三事</title>
    <style>
      body {
        font: 14px/1.4 "Microsoft YaHei";
        background-color: #EDEFF0;
      }
      body,
      h3,
      h5 {
        margin: 0;
      }
      img {
        border: 0 none;
        vertical-align: bottom;
      }
      .l {
        float: left;
      }
      .r {
        float: right;
      }
      .constr {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
      }
      .header {
        background-color: #2A2C2E;
      }
      .nav {
        height: 60px;
      }
      .nav-list {
        float: left;
        font-size: 14px;
        font-weight: 400;
      }
      .nav-a {
        display: inline-block;
        line-height: 20px;
        padding: 20px 35px;
        color: #B5BDC0;
        text-decoration: none;
      }
      .nav-a:hover {
        color: #fff;
      }
      .course {
        padding-top: 10px;
      }
      .course-list {
        float: left;
        width: 280px;
        height: 240px;
        margin: 5px 10px 15px;
        border-radius: 0 0 1px 1px;
        background-color: #F7FAF9;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 1px 2px #c5c5c5;
        text-decoration: none;
      }
      .course-list-img {
        background-color: #6396F1;
      }
      .course-list-h {
        line-height: 50px;
        font-size: 14px;
        font-weight: 400;
        color: #363d40;
        text-align: center;
      }
      .course-list-tips {
        margin: 0 14px;
        font-size: 12px;
        color: #b4bbbf;
        overflow: hidden;
      }
      .icon-hot {
        position: absolute;
        width: 28px;
        height: 11px;
        margin: -6px 0 0 2px;
        background: url(http://img.mukewang.com/545304730001307300280011.gif);
      }
      .icon-recom {
        position: absolute;
        line-height: 20px;
        padding: 0 5px;
        background-color: #f60;
        color: #fff;
        font-size: 12px;
      }
      .icon-vip {
        position: absolute;
        width: 36px;
        height: 36px;
        margin-left: -36px;
        background: url(http://img.mukewang.com/5453048000015d8800360036.gif);
        text-indent: -9em;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <div class="constr">
        <div class="nav">
          <h3 class="nav-list">
                <a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
            </h3>
          <h3 class="nav-list">
                <a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
            </h3>
          <h3 class="nav-list">
                <a href="http://www.imooc.com/seek/index" class="nav-a">
                    求课<i class="icon-hot"></i>
                </a>
            </h3>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="constr">
        <div class="course">
          <a href="http://www.imooc.com/view/121" class="course-list">
            <div class="course-list-img">
              <span class="icon-recom">推荐</span>
              <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--              
              --><i class="icon-vip">vip</i>
            </div>
            <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
            <div class="course-list-tips">
              <span class="l">已完结</span>
              <span class="r">3514人学习</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>

View Code