46. 布局

1. 多栏布局

两栏布局

三栏布局

2. 等高

1. CSS3的弹性盒
2. JS控制
3. 伪等高

有关登高布局的文章：https://segmentfault.com/a/1190000019365216

3. 元素书写顺序

问题：

使用浮动做两栏布局和三栏布局的时候，浮动元素需要写在后面。

SEO，搜索引擎优化，爬虫在爬我们的网页时，它会认为写在前面的内容更加重要，所以，我们有时候需要将重要的内容写在前面，但是，如果使用了浮动的方式来实现一些布局，就不得不将浮动元素写在前面（常规流块盒看不到浮动盒子，浮动盒子可以看到常规流块盒）。

解决方式：

同样可以实现相同的布局效果，而且要求主区域，即：重要内容，写在前面。我们可以使用定位的方式来实现。

主区域代码靠前书写

导致的新的问题：

外层容器无法适应侧边栏的高度，因为绝对定位的元素彻底脱离了常规流。不过，一般来说，侧边栏的高度都是小于主区域的高度的。

4. 后台页面的布局

后台页面的布局

• 整个容器撑满视口
• 顶部内容固定定位

• 底部内容

  • 使用常规流块盒

    • calc 精确计算出底部内容的高度
    • box-sizing: border-box; + padding-top: 顶部的高度; 将内容盒压下来

小结

重点：了解这节课所介绍的页面常见布局，及其实现原理。

问题：伪等高还是不理解。