html国字型布局，结合CSS3的布局新特征谈谈常见布局⽅法写在前⾯
最近看到《图解CSS3》的布局部分，结合⾃⼰以前阅读过的⼀些布局⽅⾯的知识，这⾥进⾏⼀次基于CSS2、3的各种布局的⽅法总结。
常见的页⾯布局
在拿到设计稿时，作为⼀个前端⼈员，我们⾸先会做的应该是为设计图⼤致地划分区域，然后选择⼀种最合理的，结构清晰的布局。下⾯我先根据⼀些典型的⽹站案例列举⼀下⼏种常见的页⾯布局。
T型布局
这个是我们⽐较常见的布局，其页⾯的顶部⼀般放置横⽹站的标志或Banner⼴告，下⽅左侧是导航栏菜单，下⽅右侧则⽤于放置⽹页正⽂等主要内容。
Segmentfault的主页就是T型布局的。由于⽹页太长了。。没有截取底部。
国字型布局
国字型布局下最上⾯是⽹站的标题以及横幅⼴告条，接下来是⽹站的主要内寄，左右分列⼀些⼩条内容，中问是主要部分，与左右⼀起罗列到底，最下⽅是⽹站的⼀些基本信息、联系⽅式、版权声明等。
案例图⽚来⾃腾讯11年的⼀道前段笔试题，有兴趣的同学可以去看⼀下。2011腾讯前端⾯试稿
POP布局
POP布局指页⾯布局像⼀张宣传海报，以⼀张精美图⽚作为页⾯的设计中⼼。常⽤于时尚类站点。优点显⽽易见：漂亮吸引⼈。缺点就是速度慢。
flex布局详细讲解⼈⼤的主页就类似这种布局。
左右布局型
顾名思义，就是⽹页主体分为左右两⼤块，多见为后台管理系统页⾯。⼀般左右布局型的页⾯需要做到两列等⾼。
如：
上下布局型
参见苹果的官⽹，类似于整屏显⽰的⽹页都为上下布局。
如何实现——常见的布局⽅法
关于布局的类型就先说这么多，下⾯来总结⼀下上述的布局怎么来实现。下⾯提⼀下⼤家应该都很熟
悉的两⼤布局⽅法。圣杯布局和双飞燕布局。其实这两种⽅法⼀般多⽤国字型布局上。就是针对三⾏三列布局的。进⾏相应的改造也可以⽤在T字型布局上。⽤这两种⽅法可以很好地解决主体部分优先加载的问题。
圣杯布局
基础布局：
重点来看main部分的代码
#main {
overflow: hidden; /*修整由⼦元素浮动引起的⾼度塌陷问题*/
zoom: 1;/*低版本ie下：触发haslayout属性，修整由⼦元素浮动引起的⾼度塌陷问题*/
/
*将主体部分左右侧预留出左右边栏⼤⼩的空⽩位置*/
padding: 0 300px 0 220px;
}
.m_content, .m_leftside, .m_rightside {
float: left;
/*⽬的是将左右侧边栏拉回*/
position: relative;
}
width: 100%;
}
.m_leftside {
width: 220px;
/*由于m_content占据了100%空间，所以需要⽤负的margin值将左边栏拉回*/
margin-left: -100%;
/*将主体部分预留的左侧补⽩区域填充满*/
left: -220px;
}
.m_rightside {
width: 300px;
/*⽤负的margin值将右边栏拉回⾃⾝⼤⼩个像素单位*/
margin-left: -300px;
/*将主体部分预留的右侧补⽩区域填充满*/
left: 300px;
}
这⾥是主体
这是左侧边栏
这是右侧边栏
以上就是圣杯布局⽅法，基本思路是运⽤浮动加定位的⽅法，缺点是代码较复杂，不能模拟三栏等⾼效果。
双飞燕布局
布局的效果跟圣杯的⼀样，代码有所不同。双飞燕布局的代码更加简单，只是多加了⼀个div⽤来布局。
基础布局部分代码⼀样。
main部分：
#main {overflow: hidden;zoom: 1;}/*这⾥不需要加padding了*/
.m_content, .m_leftside, .m_rightside {float: left;}
.m_content {width: 100%;}
/*⽤左右边距将左右边栏的位置预留出来*/
.m_c_wrap {margin-left: 220px;margin-right:300px;}
.m_leftside {width: 220px;margin-left: -100%;}
.m_rightside {width: 300px;margin-left: -300px;}
这⾥是主体
这是左侧边栏
这是右侧边栏
了解了以上两种布局的⽅法后，很多布局都能写得得⼼应⼿了。但是应对多栏等⾼布局还有点⽋缺。那么现在来谈谈多栏等⾼布局的⽅法。
这⾥详细总结了等⾼布局的⼋⼤⽅法 Click，我再谈谈实际项⽬中⽐较常⽤的，或者说⽐较简单的三种⽅法。
图⽚模拟
⽐如我们需要做⼀个上图的布局，那么需要截取这样⼀个侧边的⼩图⽚对侧边和内容部分包裹的元素进⾏背景平铺，⽤来模拟出侧边栏的⾼度跟内容⾼度⼀致的视觉效果。
table布局
只需要将需要等⾼的若⼲栏设置display属性为table-cell；若其中⼀列希望是⾃适应宽度，还需将⽗元素的display设置成table，width为100%。
代码如下：
#main {display: table;width: 100%}
.m_content {display: table-cell;width: auto;}
.m_rightside {display: table-cell;width: 200px;}
padding补⽩
这是前不久在⽹上看到的⼀种办法，实质就是为栏⽬添加⼀个⾜够⼤的padding-bottom值，将栏⽬撑开，然后再添加相同⼤⼩的负的margin-bottom值将内容移动回来。注意要在负盒⼦上加上overflow: hidden的属性。
代码如下：
#main {width: 100%;overflow: hidden;}
.
m_content {width: auto;float:left;}
.m_rightside {width: 200px;padding-bottom: 10000px;margin-bottom: 10000px;float:left;}
CSS2的布局⽅法总结得到这⾥就告⼀段落了。现在来看看CSS3新增的布局⽅法。
Flex布局
因为书⾯上的解释⽐较抽象，我这⾥就尽量说得简单通俗⼀点。
要进⾏flex布局，需要定义⼀个flex容器，然后再处理其⼦项⽬。只要⼀个容器被定义为flex容器，那么其⼦元素都称作它的⼦项⽬。
flex布局的基本思想是通过flex容器来伸缩控制⼦项⽬的宽度和⾼度，以此来完全填充flex容器的可⽤空间。⼦项⽬的宽⾼、排列⽅式等都是通过设置相关属性改变的。那么以这种⽅式布局上述⼏种布局就简单多了。⼦项⽬默认的排列⽅式与浮动布局略为相似。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。