关于布局

布局心得

• 为页面可适应各种宽度
  元素宽度能不写死就不写死，尽量使用百分比，不用数值。
  如果不需要支持IE8，则尽量多使用display: flex以及calc()。
  需要支持IE8，就用float再加上个clearfix。

如何将几个块元素两边边距为零放置于panel内

• 负margin
  块级元素用margin-left隔开，再添加个父容器并为父容器添加与margin-left:-x; x值与块级元素边距相同。demo

.box {
  display: inline-block; 
  width: 240px     ;
  margin-left: 10px;
}

.boxfather {
  margin-left: -10px;
}

• 伪类元素 nth-chlid(xn) nth-chlid(xn+1)
  用伪元素将panel左边块级元素margin-left设为0，右边块级元素margin-right设为0。demo

.box:nth-child(3n+1){
  margin-left: 0;
}

.box:nth-child(3n){
  margin-right: 0;
}

• display:flex
  使用flex的布局，再使用justify-content属性。demo

.container {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

• calc调整宽度
  为每个box宽度使用calc(100% / n - 边距)计算。 demo

.box {
  float: left; 
  width: calc(100% / 3 - 20px);
  margin: 10px;
}

.boxfather {
  display: flex;
  flex-flow: wrap;
  margin: 0 -10px;
}

使flex容器居中

给flex元素加上一样的左右margin

灵活使用标签，别光用div,p,h

灵活使用标签，不仅能让代码变好看，而且为其他调试剩下很多麻烦。
参考：HTML5 标签列表

• <figure><figcaption>
  用于图片与图片描述

<!-- Just a figure -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">  
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p></p>

• <dl><dt><dt>
  有一段单独文字介绍时，或文字表可使用。
  范例:

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>

  <!-- other terms and definitions -->
</dl>

<dl>
    <dt>Name</dt>    
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
</dl>

• <article><section><header><footer>
  布置主要内容可以使用这几个标签

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>