领会CSS，实际中的研究

虽懂却不会，真是可怕，自认懂却了无。

善用CSS属性选择器

在用于区别和唯一的情况下完全可以使用属性选择器，而没有必要使用class或id

p[city="http://www.css.com/"]{
　　color:red;
}

<p city="http://www.css.com/">www.css.com</p>

first-line首行段落

利用:after和:before生成内容，可以减少你的标签。

根据你要做的事来选择合适的标签而不是表现。

超越css-64页

常用代码库

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>M tools module</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  --1
  <!-- 左边固定宽度，右边自适应 -->
  <section id="test_1">
    <p>左边：<span>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻从小嘻嘻嘻嘻嘻嘻下</span></p>
  </section>
  --2
  <!-- 左边固定宽度，右边自适应并且可以编辑内容 -->
  <section id="test_2">
    <p>左边：<span  contenteditable="true">嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下</span></p>
  </section>
  --3
  <!-- 商品列表 -->
  <section id="test_3" class="clearfix">
    <a href="javascript:;">
      <span>图片</span>
      <dl>
        <dt>商品标题商品标题商品标题商品标题商品标题商品标题商品标题</dt>
        <dd>这是一段内容内容内容内容内容</dd>
        <dd>这是一段内容内容内容内容内容</dd>
      </dl>
      <p>底部</p>
    </a>
  </section>
  --4
  <!-- 文字宽度平分 -->
  <section id="test_4">
    <p>文字啊</p>
  </section>
  --5
  <!-- 特效 -->
  <section id="test_5">
    <h3>显示</h3>
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </section>
</body>
</html>

/* reset */
div,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,p{
  margin:0;
  padding:0;
}

/* clearfix */
.clearfix{
  overflow:auto;
  zoom:1;
}

/* test_1 */
#test_1 span{
  display:inline-block;
  width:80%;
  vertical-align:top;
}
/* test_2 */
#test_2 span{
  display:inline-block;
  width:80%;
  vertical-align:top;
  min-height: 50px;
  outline: none;
  border: 1px solid #fff;
  padding:3px;
}
#test_2 span:hover{
  border: 1px solid #a0b3d6;
}

/* test_3 */
#test_3 span{
  float:left;
  height:120px;
  margin-right:12px;
}
#test_3 dl{
  min-height:100px;
  max-height:100px;
}
#test_3 dt{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#test_3 dd{
  padding:5px 0;
}


/* test_4 */
#test_4 p{
  width: 60px;
  text-align: justify;
}
#test_4 p:after{
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
}

/* 特效 */
#test_5:hover p{
  opacity:1;
  border:1px solid #ccc;
  padding:10px 0;
}
#test_5 p{
  opacity:0;
  transition:all 0.5s;
}

............