css布局

按照是否相应浏览器宽度变化划分：

固定宽度布局：body的width是一个固定值，当浏览器的窗口缩小时，底部出现滚动条。无论几栏布局，各栏的width都是事先设为定值。比较复杂的网站一般采用这种布局，例如：京东
弹性（flex）布局：body的width不是一个固定的值，当浏览器窗口缩小时，浏览器里的内容宽度也相应收缩。网页为多栏布局时，即可都为弹性布局，也可部分固定宽度，部分弹性布局。一般用于简单网站，例如：谷歌
响应式布局：设计师事先设计多种方案的布局，前段工程师根据媒体查询，获取当前浏览器的宽度，呈现不同的布局。一般用于多终端（PC、PAD、PHONE等）

按照网页整体内容布局划分

1. 单栏布局
   单栏布局，是指网页内容呈中心展示。如下图所示。
   
   
   
   注：在这里，设置width为固定宽度布局；设置max-width为弹性布局
   一栏布局
   一栏布局（通栏）
2. 两栏布局
   浮动元素 + 普通元素margin
   
   
   
   两栏布局（一栏弹性）
   两栏布局（两栏都弹性）

3. 三栏布局
   两侧两列固定宽度，中间列自适应宽度

   
   
   

• 普通三栏布局
  html设计：

  

    
aside
    
aside
    
content
  

css设计：两边列宽分别左浮和右浮，中间区块设置左右margin，大小分别为左右列块宽度。普通三栏布局

• 圣杯布局和双飞翼布局

与上面普通三栏布局在html结构上不同。将呈现内容的区块放在两边列块的前面，浏览器优先解析该区块

利用浮动 和负margin：对于相邻的浮动元素，如果因为空间不够导致第n个浮动元素下移，可以通过给第n个浮动元素设置 margin为负值，来让第n个元素上移，其中负值的数值等于第n个元素的
宽度减去父容器被其他元素占用后还剩下的宽度，即第n个元素与其他元素折叠部分的宽度。浮动和负margin让元素上移实例

圣杯布局和双飞翼布局的html结构不一样

• 圣杯布局：两边栏位于父元素的margin上方，为了保证自适应宽度的父元素的宽度>左边栏的宽度，需要为父元素设置min-width
• 双飞翼布局：两边栏位于上一兄弟元素（中间栏）的子元素的margin上方。只需要（中间栏）的子元素的margin大小就可保证（中间栏）的宽度永远>左边栏的宽度

圣杯布局

html设计：

 
 
      
main
     
aside
 
      
extra
 

css设计：

#content:after{
content: ''; /*8*/
display: block; /*8*/ 
clear: both; /*8*/
} 
/*父容器设置padding和margin都可使content区块两边出现空白，并且使content内容宽度变小，
即，使main的内容宽度边小，此布局为弹性布局，
当浏览器窗口缩小，content的内容宽度(main的内容宽度)小于左边列块的宽度，
左边列宽将不会上移，布局将发生错乱。
此时需要设置main的min-width为左边列块的宽度*/
 #content{
 padding-left: 100px; /*5*/ 
padding-right: 150px; /*5*/ 
  /*margin-left: 110px;*/
/*margin-right: 160px;*/
} 
.aside, .main, .extra{
 float: left; /*2*/ 
}
 .aside{
 width: 100px; /*1*/ 
height: 300px; /*1*/
 background: red; /*1*/ 
/*浮动和负margin是元素上移。左边列宽上移后还需要移到main的右边*/
margin-left: -100%; /*4*/ 
/*相对定位*//*左右两个侧边栏仍然包裹在父容器里面，移动相对于自身宽度的位置，就先当于移动到了父容器的margin或者padding上方*/
position: relative; /*6*/ 
/*两边区块通过负margin上移后，再通过移动自身宽度的位置，实际占用的是父元素的margin*/
left: -100px; /*6*/ 
} 
.extra{ 
width: 150px; /*1*/
 height: 300px; /*1*/ 
background: yellow; /*1*/
/*浮动和负margin是元素上移*/
 margin-left: -150px; /*5*/ 
/*相对定位*/
position: relative; /*7*/
 left: 150px; /*7*/
 } 
.main{ 
height: 350px; /*1*/ 
background: blue; /*1*/ 
/*main的内容的宽度等于父容器内容的宽度*/
width: 100%; /*3*/
 }

圣杯布局实例

双飞翼布局（和圣杯布局里，左右列块上移之前的步骤一样）

圣杯布局中当浏览器窗口减小，使得main内容宽度减小，而左边列宽的负margin值与main内容宽度有关，main内容宽度减小到左边列块宽度以下，导致左边列宽不上移，布局出现混乱的问题，出现了双飞翼布局。
双飞翼布局是基于圣杯布局出现问题的改进。浏览器窗口变小，左边列宽位置不发生变化的关键在与main的内容宽度，即aside的上一个元素main的宽度永远大于等于左边列块的宽度，就能保证布局不发生错乱。为此，双飞翼布局在html排列上做出了改变。

html设计：

 
 

 
main
 

 
aside
 
extra
 

css设计：

main内部多包裹了一层，需要实现的是wrap内容宽度变化，但是main内容宽度自动保持最小值。做法就是给wrap加margin（main的最小值是wrap两边margin和，始终大于左边列块的大小），实现左右列块在页面内容的两边排列。

 #content:after{
 content: ''; /*8*/
 display: block; /*8*/ 
clear: both; /*8*/
 } 
#content{ }
 .aside, .main, .extra{ 
float: left; /*2*/ 
}
 .aside{
 width: 100px; /*1*/
 height: 300px; /*1*/ 
background: red; /*1*/ 
margin-left: -100%; /*4*/
 }
 .extra{ 
width: 150px; /*1*/ 
height: 300px; /*1*/ 
background: yellow; /*1*/ 
margin-left: -150px; /*5*/ 
}
 .main{
 /* background: blue; */ /*第1步添加，第7步注释掉*/
 /* height: 350px; */ /*第1步添加，第7步注释掉*/ 
width: 100%; /*3*/
 } 
.wrap{ 
margin-left: 100px; /*6*/ 
margin-right: 150px; /*6*/ 
background: blue; /*7*/
 height: 350px; /*7*/
 } 

双飞翼布局实例

其他布局知识：

• 水平等距排列
• 浮动和负margin结合，是元素上移，必须都是浮动元素
• 浮动元素的宽度根据内容自动收缩，所以必须设置宽高。若要实现宽度铺满父容器，需要使用width:100%（自身内容的宽度等于父容器内容的宽度）
• 最好不要设置外部容器的宽高，使用内容的宽高撑开父容器
• 浮动元素对margin:0 auto和text-align:center失效
• 先根据页面结构写html，布局交给CSS
• 写了float，一定要清除浮动
• float不要与绝对定位一起使用
• margin:0 auto和绝对定位一起使用无效
• 文字的高度使用line-height好于height，可使单行文字垂直居中

文章著作权归本人所有，转载须说明来源