CSS 学习笔记 01 wrapper class

div内容居中

    <!-- DESKTOP NAVIGATION  -->
    <nav class="top-bar">
      <div class="wrap">
        <div class="top-bar-left">
          <h3>site title</h3>
        </div>
        <div class="top-bar-right">
          <ul class="menu">
            <li><input type="search" placeholder="Search"></li>
            <li><button type="button" class="button">Search</button></li>
          </ul>
        </div>
      </div>
    </nav>

.wrap{
    width: 90%; 
    margin: 0 auto;
    max-width: 1000px;
}

1.用百分号的好处就是能够实时计算

2.margin用于自动保持边距使得内容居中

3.max-width规定了居中内容的宽度（极有用）