页面布局

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: helvetica, arial, sans-serif;
  }

  #wrapper {
    width: 960px;
    margin: 0 auto;
    border: 1px solid;
  }
  article {
    width: 600px;
    float: left;
    background: #ffed53;
  }

  nav {
    width:150px;
    float: left;
  }
  nav li {
    /*去掉列表项目符号*/
    list-style-type:none;
  }
  aside {
    width: 210px;
    float:left;
    background:#3f7ccf;
  }
</style>
<div id="wrapper">

  <nav>
    <!---->
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
  </nav>
  <article>
    <h1>Single-Column Layout</h1>
    <p>Lorem ipsum ... quis.</p>
    <h2>This is a Second-Level Heading</h2>
    <p>Phasellus pret...egestas.</p>
  </article>
  <aside>
    <h3>This is the Sidebar</h3>
    <p>Integ ... it.</p>

  </aside>
</div>

<style>
header {
  background: #f00;
}

header h1 {
  font-family: 'Droid Sans';
  font-weight: 400;
  font-size: 4em;
  letter-spacing: -.05em;
  color: #fff;
  padding: 0 0 5px 10px;
}
...
footer {
  background:#000;
  clear: both;
}
footer p {
  font-family: 'Open Sans';
  font-weight: 700;
  font-size: .65em;
  color: #fff;
}
footer a {
  font-family: 'Open Sans';
  font-weight: 700italic;
  font-size: 1em;
  color: #ffed53;
  text-decoration: none;
}
</style>
<div id="wrapper">
  <header>
      <!-- 标题 -->
      <h1>A Fixed-Width Layout</h1>
  </header>
  ...
  <footer>
    <!-- 文本 -->
  </footer>
</div>

article {
 ...
 padding:10px 20px;
}

HTML 的目的是语义，也就是给内容赋予含义。
而 CSS 呢，是为了把表现性的样式分离出来才发明的。
不过，有些表现性标记是有害的，而有些则没有副作用。
使用表格来创建多栏布局，或者使用<br />标签在段间换行，却不使用<p>标签，这种做法的确不值得提倡，因为这会造成内容难以移植。
比如说: 用三个表格单元作为三栏，这种布局到哪都会显示成表格，就算是在完全不合适的智能手机里也一样。
如果表现性标记无法用 CSS 修改，或者在 CSS 不可用时也要迫使用户接受，那就是滥用 HTML。
可是，div 或 span 这种中性的元素，对默认样式没有影响，除非你给它们应用样式，否则它们就跟不存在一样。
所以，添加这种元素达到表现性的目的是完全可以接受的。

<style>
article .inner{
  margin: 10px;
  border: 2px solid red;
  padding: 20px;
}
/*记得把article的内边距去掉。*/
</style>
<article>
 <div class="inner">
 <!-- 文本 -->
 </div>
</article>

<style>
/*利用这个 div 为三个栏中的内容创造间距 并 居中页脚中的内容*/
nav .inner {padding:10px;}
article .inner {padding:10px 20px;}
aside .inner {padding:10px;}
footer {text-align:center}
</style>
<div id="wrapper">
 <header>
   <!-- header text -->
 </header>
 <nav>
   <div class="inner">
     <ul>
      <!-- 链接 -->
     </ul>
   </div>
 </nav>
 <article>
   <div class="inner">
    <!-- 文本 -->
   </div>
 </article>
 <aside>
   <div class="inner">
    <!-- 文本 -->
   </div>
 </aside>
 <footer>
  <!-- 文本 -->
 </footer>
</div>

“子-星选择符”就是一个组合选择符，利用它可以不使用内部 div 就能设定一栏中所有元素的外边距。

星号选择符可以选择“所有元素”，故而，在一个选择符后面加个星号，比如 `someSelector *` 就可以选择 someSelector 所代表元素的所有后代元素。
子选择符可以选择“某元素的子元素”，故而，把子选择符放到星号前面，比如 `someSelector > *` 就会只选择 someSelector所代表元素的所有 子元素，而非后代元素。
这正好适用于选择容器内部的所有顶部元素，然后设定它们的外边距。

比如，对于 section 栏，设定 section > * {margin:0 10px;}，就能为栏中所有子元素，不包括其他后代元素，各应用 10 像素的左、右外边距。

使用“子-星选择符”时注意两点。
第一，在为子元素设定垂直外边距时，只能使用 margin-top 和margin-bottom，不能使用简写的 margin，否则会抵消用“子-星选择符”应用给这些元素的水平外边距。
  如果你想进一步缩进某个子元素的内容，就应该给该子元素应用内边距。
第二，“子-星选择符”有潜在性能问题，因为它会导致浏览器遍历整个 DOM 结构去查找所有匹配的元素。
但我也发现这一点性能影响几乎可以忽略不计。假如你的页面真的包含几千上万个元素，那倒确实该考虑用 ySlow 或其他性能度量工具测一测这个选择符的影响。

<style>
* {margin:0; padding:0;}
#wrapper {width:960px; margin:0 auto; border:1px solid #000;overflow:hidden;}
header {background:#f00;}
nav {
  box-sizing:border-box;  /* 盒子缩放模式 */
  width:150px;
  float:left;
  background:#dcd9c0;
  padding:10px 10px;
}
/*去掉列表项目符号*/
nav li {list-style-type:none;}
article {
  box-sizing:border-box;  /* 盒子缩放模式 */
  width:600px;
  float:left;
  background:#ffed53;
  padding:10px 20px;
}
aside {
  box-sizing:border-box;  /* 盒子缩放模式 */
  width:210px;
  float:left;
  background:#3f7ccf;
  padding:10px 10px;
}
footer {clear:both; background:#000;}
</style>
<div id="wrapper">
 <header>
  <!-- 标题 -->
 </header>
 <nav>
 <ul>
  <!-- 链接 -->
 </ul>
 </nav>
 <article>
  <!-- 文本 -->
 </article>
 <aside>
  <!-- 文本 -->
 </aside>
 <footer>
  <!-- 文本 -->
 </footer>
</div>

<div id="main_wrapper">
   <header>
      <!-- 页眉-->
   </header>
   <div id="threecolwrap">/*三栏外包装（包围全部三栏）*/
      <div id="twocolwrap">/*两栏外包装（包围左栏和中栏）*/
        /*左栏*/
        <nav>
          <!-- 导航 -->
        </nav>
        /*中栏*/
        <article>
          <!-- 区块 -->
        </article>
      </div>/*结束两栏外包装（twocolwrap）*/
      /*右栏*/
      <aside>
        <!-- 侧栏 -->
      </aside>
   </div>/*结束三栏外包装（threecolwrap）*/
   <footer>
      <!-- 页脚 -->
   </footer>
</div>

<style>
* {margin:0; padding:0;}
body {font:1em helvetica, arial, sans-serif;}
div#main_wrapper{
 min-width:600px; max-width:1100px;
 /*超过最大宽度时，居中布局*/
 margin:0 auto;
 /*背景图片默认从左上角开始拼接*/
 background:url(images/bg_tile_150pxw.png) repeat-y #eee;
}
header {
 padding:5px 10px;
 background:#3f7ccf;
}
div#threecolwrap {
 /*浮动强制它包围浮动的栏*/
 float:left;
 width:100%;
 /*背景图片右对齐*/
 background:url(images/bg_tile_210pxw.png) top right repeat-y;
}
div#twocolwrap {
  /*浮动强制它包围浮动的栏*/
  float:left;
  width:100%;
  /*把右栏拉到区块外边距腾出的位置上*/
  margin-right:-210px;
}
nav {
  float:left;
  width:150px;
  background:#f00;
  padding:20px 0;
}
/*让子元素与栏边界保持一定距离*/
nav > * {margin:0 10px;}
article {
  width:auto;
  margin-left:150px;
  /*在流动居中的栏右侧腾出空间*/
  margin-right:210px;
  background:#eee;
  padding:20px 0;
}
/*让子元素与栏边界保持一定距离*/
article > * {margin:0 20px;}
aside {
  float:left;
  width:210px;
  background:#ffed53;
  padding:20px 0;
}
/*让子元素与栏边界保持一定距离*/
aside > * {margin:0 10px;}
  footer {
  clear:both;
  width:100%;
  text-align:center;
  background:#000;
}
</style>

<nav><!-- 内容 --></nav>
<article><!-- 内容 --></article>
<aside><!-- 内容 --></aside>
<style>
nav {display:table-cell; width:150px; padding:10px; background:#dcd9c0;}
article {display:table-cell; padding:10px 20px; background:#ffed53;}
aside {display:table-cell; width:210px; padding:10px; background:#3f7ccf;}
</style>

<div id="wrapper">
 <header>
  <h1>Full-width content</h1>
 </header>
 <nav>
  <p>Navigation menus go here</p>
 </nav>
 <section id="branding">
  <img src="images/grand_canyon.jpg" alt="Grand Canyon" />
 </section>
 <!-- branding 结束 -->
 <section id="feature_area">
  <article>
   <div class="inner">
    <p>Lorem Ipsum text</p>
   </div>
  </article>
  <!-- 省略另外两个 article 元素 -->
 </section>
 <!-- feature_area 结束-->
 <section id="promo_area">
  <article>
   <div class="inner">
    <p>Lorem Ipsum text</p>
   </div>
  </article>
  <!-- 省略另外三个 article 元素 -->
 </section>
 <!-- promo_area 结束-->
 <footer>
  <p>A CSS template from <a href="http://www.stylinwithcss.com"><em>
   Stylin' with CSS, Third Edition</em></a> by Charles Wyke-Smith</p>
 </footer>
</div>

/*每个 article 作为一个浮动栏*/
section#feature_area article {
 float:left;
 width:320px;
 /*对于作为栏的容器，只能添加垂直内边距*/
 padding:10px 0;
 background:#fff;
 border-top:4px solid #f7be84;
}
/*为所有内容盒子添加公共样式*/
section#feature_area article .inner {
 margin:10px 20px;
 padding:5px;
 background:#fff;
 border:5px solid;
}
/*以下三条分别为三个内容盒子设定样式*/
section#feature_area article:nth-child(1) .inner {
 border-color:#d7dd6f;
}
section#feature_area article:nth-child(2) .inner {
 border-color:#f6dec5;
}
section#feature_area article:nth-child(3) .inner {
 border-color:#d1d8e4;
}