console
<body>
<h1>1 盒子模型</h1>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div style="width:300px;margin:0 auto">
置块级元素的 width 可以防止它从左到右撑满整个容器。
然后你就可以设置左右外边距为 auto 来使其水平居中。
元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。
</div>
<p>=============================================================</p>
<div style="max-width:300px;margin:20px auto">
我的宽度是 max-width: 300px; 但是我小一些...
</div>
<div style="max-width:300px;margin:20px auto;padding:20px;border-width:10px;">
我的宽度是 max-width: 300px; 但是我大一些(因为我设置了padding和border-width)...
</div>
<div style="max-width:300px;margin:20px auto;box-sizing:border-box;padding:20px;border-width:10px;">
我们现在一样大小了！(我的宽度一样是max-width:300px 但是我设置了box-sizing 为border-box.所以我们一样大了)
</div>
<p>========================================================</p>
<h1>2布局</h1>
<h2>2.1 相对定位+绝对定位</h2>
<div class="container">
<nav>
<ul>
<li>index</li>
<li>category</li>
<li>about</li>
</ul>
</nav>
<section class="content">
section 的 margin-left 样式确保了有足够的空间容纳 nav 元素。
</section>
<section class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed
nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>
<section class="content">
注意观察当你调整浏览器窗口时发生了什么。效果很赞！
</section>
</div>
<footer style="position:fixed;bottom:0;left:0;height:150px;background-color:green;width:100%;">
<h2>2.2 fix 布局</h2>
<p>如果你使用了一个固定fixed定位的页眉或页脚，确保有足够的空间来显示它们！我在 body 上面加了 margin-bottom 。
</p>
<p>
另外，除了设置position为fixed，还需要设置bottom或者top。width height等
</p>
</footer>
<h2>2.3 float布局</h2>
<h3>2.3.1 清除浮动1 相邻元素使用clear</h3>
<div style="float:left;margin:1em;">
我设置了float
</div>
<section>
在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的， 于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。 我没有设置clear来清除浮动。
</section>
<div style="float:left;margin:1em;">
我也设置了float
</div>
<section style="clear:both">
在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的， 于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。 如果我们想让 section 显示在浮动元素之后呢？使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。 你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。
</section>
<h3>2.3.2 清除浮动2 父元素设置overflow</h3>
<div style="overflow:hidden;zoom:1">
<p>这个图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面！</p>
<img style="float:right" src="http://zh.learnlayout.com/images/ilta.png" alt="">
</div>
</body>
div{
border:1px solid red;
}
.container{
position:relative;
}
.container nav{
position:absolute;
left:0;
width:150px;
}
.container .content{
margin-left:150px;
}
body{
margin-bottom:160px;
}