Web前端：CSS中的圣杯布局与双飞翼布局

作者:陈太浪更新于： 2020-02-29 16:00:59

      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

　一，圣杯布局

　　1,什么是圣杯布局呢?

　　　所谓圣杯布局，所代表的意思就是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局

　　2，构建圣杯布局的操作步骤：

　　　　操作步骤1，添加一个容器，在这个容器中添加放三个盒子（左、中、右）；

　　　　操作步骤2，设置两侧盒子（左、右）的宽度 ，使其宽度固定；

　　　　操作步骤3，设置中间盒子的宽度为100%，这是中间盒子宽度自适应的关键；

　　　　操作步骤4，设置容器的padding-left和padding-right属性，属性值分别为左盒子的宽度和右盒子的宽度；

　　　　操作步骤5，让三个盒子都向左浮动，向右浮动非常有可能会出现问题，所以我们都将其设置向左浮动；

　　　　操作步骤6，设置左盒子的margin-left属性为-100%；

　　　　操作步骤7，通过相对定位调整左边的盒子, 使左边的盒子不盖住中间盒子的区域；

　　　　操作步骤8，设置右边盒子的margin-left属性为负的自身的宽度；

　　　　操作步骤9，同样的通过相对定位调整右边的盒子, 使右边的盒子不盖住中间盒子的区域；

　　　　操作步骤10，最后一个操作步骤就是给容器设置一个最小宽度min-width属性，防止它缩小后变形。

　　3，具体示例如下所示：

   

　二，双飞翼布局

　　1，什么是双飞翼布局呢？　　

　　　和圣杯布局一模一样，双飞翼布局也是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局，就是布局的形式上存在一定程度上的差异。　　　　

　　2，构建双飞翼布局的操作步骤

　　　　操作步骤1，首先我们先添加一个容器，在这个容器中添加三个盒子（左、中、右）；

　　　　操作步骤2，设置两侧盒子（左、右）的宽度 ，使其宽度固定；

　　　　操作步骤3，设置中间盒子的宽度为100%，这也是双飞翼布局中中间盒子宽度自适应的关键；

　　　　操作步骤4，让三个盒子都向左浮动，向右浮动可能会出现问题，所以都设置向左浮动；

　　　　操作步骤5，接下来我们再给中间的盒子添加一个子盒子；

　　　　操作步骤6，设置子盒子margin-left和margin-right属性，属性值分别为左盒子的宽度以及右盒子的宽度；

　　　　操作步骤7，设置左盒子的margin-left属性为-100%；

　　　　操作步骤8，设置右边盒子的margin-left属性为负的自身的宽度；

　　3，具体示例如下所示：

   

 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。