CSS 布局经典问题初步整理

本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Flexbox 布局，等等。

CSS 基础知识

 

下面几个入门教程不错：

 

• 幕课网 – HTML+CSS基础课程：偏基础，可以在线练习和预览

• MDN – CSS入门教程: MDN 的官方文档

• 学习 CSS 布局：排版和配色特别舒服，简短但不深入，适合概览入门

 

CSS 定位问题

 

主要就是经典的绝对定位，相对定位问题。

 

• 10个文档学布局：通过十个例子讲解布局，主要涉及相对布局，绝对布局，浮动。

• 百度前端学院笔记 – 理解绝对定位：文章本身一般，几篇参考文献比较详细

• HTML和CSS高级指南之二——定位详解（译文）：介绍浮动的使用，详细介绍定位的技巧，包括如何准确的给元素在 X 轴、Y 轴和 Z 轴定位

 

三栏式布局

 

涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，它们实现的效果是一样的，差别在于其实现的思想。

 

圣杯布局

 

圣杯：父盒子包含三个子盒子（左，中，右）

 

• 中间盒子的宽度设置为 width: 100%; 独占一行；

• 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；

  • .left {margin-left:-100%;} 把左边的盒子拉上去

  • .right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去

• 父盒子设置左右的 padding 来为左右盒子留位置；

• 对左右盒子使用相对布局来占据 padding 的空白，避免中间盒子的内容被左右盒子覆盖；

 

class="container">

    

    class="middle">中间弹性区

    class="left">左边栏

    class="right">右边栏

 

双飞翼布局

 

双飞翼：父盒子包含三个子盒子（左，中，右），中间的子盒子里再加一个子盒子。

 

• 中间盒子的宽度设置为 width: 100%; 独占一行；

• 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；

• 在中间盒子里面再添加一个 div，然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置；

 

class="container">

    

    class="middle">

         class="middle-inner">中间弹性区

    

    class="left">左边栏