一、引子  

  最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局相关的点整理了一下,前后捋顺,遂有了如下的文章。

  为了满足页面多列布局的需要,早期人们多用table布局,但渐渐人们发现这种布局的劣势,就是要等页面加载完才能渲染,而且table写起来代码较大,样式也不要控制,于是人们寻求CSS+HTML的方式(但也不能说table就弃用了,在展现表格的时候table还是很方便的),下面我们要聊的就是布局中经常用到的中间自适应且先渲染到页面,左右定宽的样式,提到这个布局,便不得不说实现其布局的两种经典写法----圣杯布局和双飞翼布局,本文在第一种的基础上来展现第二种的好处。

二、圣杯布局和双飞翼布局

  圣杯布局是一种常见的网页布局,它可由现有的技术来实现,但无一没有缺点,这种写法源于西方,由于找到一种最有效的实现方法就像寻找难以捉摸的圣杯一样,这种布局的叫法也因此而得名,代码如下:

<style>
*{
margin:0;
padding:0;
}
body{
min-width: 700px;
}
.container{
overflow: hidden;
padding:0 220px 0 200px;
}
.main,.left,.right{
min-height: 130px;
word-break: break-all;
position: relative;
float: left;
}
.header,.footer{
border:1px solid #333;
background-color: #ccc;
text-align: center;
}
.main{
background: #00f;
width:100%;
}
.left{
background: #ff0;
width:200px;
margin-left: -100%;
left:-200px;
}
.right{
background: #0f0;
width:220px;
margin-right:-220px;
}
.footer{
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="main">
<h4>main</h4>
<p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
</div>
<div class="left">
<h4>left</h4>
<p>llllllllllllllllllllllllllllllllllllllllllllllllllll</p>
</div>
<div class="right">
<h4>right</h4>
<p>rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
</div>
</div>
<div class="footer">
<h4>footer
</h4>
</div>
</body>

细节分析如下:

首先网页的基本材料先排好:头、体、尾

代码:

<style>
*{
margin:0;
padding:0;
}
body{
min-height: 700px;
}
.main,.left,.right{
min-height: 130px;
float: left
}
.header,.footer{
border:1px solid #333;
background-color: #ccc;
text-align: center;
}
.main{
background: #00f;
width:100%;
}
.left{
background: #ff0;
width:200px;
}
.right{
background: #0f0;
width:200px;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="main">
<h4>main</h4>
<p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
</div>
<div class="left">
<h4>left</h4>
<p>llllllllllllllllllllllllllllllllllllllllllllllllllll</p>
</div>
<div class="right">
<h4>right</h4>
<p>rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
</div>
</div>
<div class="footer">
<h4>footer
</h4>
</div>
</body>

用了浮动使其浮起来,用了浮动,为了进一步的位置调试,用了相对定位,为了使.main自适应设置了width:100%;这引起.left和.right掉了下来,下面做的对之完善:

1、让.left挪到左边:.left加上margin-left:-100%;这使得.left覆盖了.main的左侧

2、把避免覆盖.left,也为避免可能覆盖.right,给大容器.container加padding:0 220px 0 200px;这又引起.left向右偏移了200px;

3、.left向左移,给.left加left:-200px;同理.right左移,margin-left:-220px;

示意图如下:

其实你若是把里面的内容一行行写,会清楚的看到,在ie低版本上main和right的下面会有留白,这也是用了相对定位的坏处,圣杯布局至此结束!

  下面我们来看看双飞翼布局,它是一种灵活的布局,始于淘宝UED。把三栏比作鸟的话,.main就是鸟的身体,.left和.right就是鸟的左右翅膀,这个布局实现的思路是,先把最重要的身体部分放好,最后再将翅膀移动到适当的地方,是对圣杯布局的一种改良。

  代码如下:

<style type="text/css">
*{
margin:0;
padding:0;
}
body{
min-height: 700px;
}
.main,.left,.right{
word-break: break-all;
min-height: 130px;
float: left;
}
.header,.footer{
border:1px solid #333;
background-color: #ccc;
text-align: center;
}
.main{
background: #00f;
width:100%;
}
.mainCon{
margin:0 220px 0 200px
}
.left{
background: #ff0;
width:200px;
margin-left: -100%;
}
.right{
background: #0f0;
width:220px;
margin-left:-220px;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="main">
<div class="mainCon">
<h4>main</h4>
<p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
</div> </div>
<div class="left">
<h4>left</h4>
<p>llllllllllllllllllllllllllllllllllllllllllllllllllll</p>
</div>
<div class="right">
<h4>right</h4>
<p>rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
</div>
</div>
<div class="footer">
<h4>footer
</h4>
</div>
</body>

分析如下:

  基础资料跟圣杯布局同,暂不赘述,双飞翼也用到了浮动,但它没用定位,而在第2步的时候没给container加padding,而是给main加了个内层,你可以随意给这个内层加class,笔者给它加了.mainCon,然后给.mainCon加margin:0 220px 0 200px;其他的步奏完全一样。

  虽然改动的不多,但你看很清楚的发现,圣杯布局在ie低版本上的留白问题,双飞翼布局解决了!!

  先写到这里吧,后期完善,再行补充

中间自适应,左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局的更多相关文章

  1. 两种经典电商CSS布局

    圣杯布局和双飞翼布局! 两种布局功能相同,都是为了实现两端宽度固定,中间宽度自适应的三栏布局 圣杯布局: 三个区域都处于左浮动状态,并使main的宽度成父容器的100% 为两侧侧边栏添加负margin ...

  2. 利用深搜和宽搜两种算法解决TreeView控件加载文件的问题。

    利用TreeView控件加载文件,必须遍历处所有的文件和文件夹. 深搜算法用到了递归. using System; using System.Collections.Generic; using Sy ...

  3. TensorFlow笔记三:从Minist数据集出发 两种经典训练方法

    Minist数据集:MNIST_data 包含四个数据文件 一.方法一:经典方法 tf.matmul(X,w)+b import tensorflow as tf import numpy as np ...

  4. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  5. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  6. NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  7. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  8. NEC学习 ---- 布局 -两列, 右侧定宽,左侧自适应

    该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...

  9. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

随机推荐

  1. Hadoop入门学习笔记---part2

    在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...

  2. Redis代码阅读之Hacking Strings

    Hacking Strings The implementation of Redis strings is contained in sds.c ( sds stands for Simple Dy ...

  3. C# 程序性能提升篇-1、装箱和拆箱,枚举的ToString浅析

    前景提要: 编写程序时,也许你不经意间,就不知不觉的使程序代码,发生了装箱和拆箱,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候,减少装箱和拆 ...

  4. AndroidStudio旧模板使用方法

    ***AndroidStudio旧模板使用方法*** 解压后用BlankActivity文件夹替换AndroidStudio安装目录下plugins\android\lib\templates\act ...

  5. 2015移动安全挑战赛(阿里&amp;看雪主办)第一题分析

    今天在网上看到了阿里移动安全比赛的第一次,并且说难度不大,便拿来看了看. 主体就是找出一个密码输进去,然后看正误. 这个题是纯Java层的一个题,也没用进行什么保护.可以直接反编译. 登陆Button ...

  6. Weblogic java生成wlfullclient.jar

    进入weblogic的server\lib目录 cd G:\Oracle\Middleware\wlserver_10.3\server\lib 运行 java -jar G:\Oracle\Midd ...

  7. RADIDE MultiPaste

    RADIDE MultiPaste https://community.embarcadero.com/blogs/entry/multipaste-in-the-rad-studio-ide htt ...

  8. luogu P2365 任务安排

    嘟嘟嘟 如果常规dp,\(dp[i][j]\)表示前\(i\)个任务分\(j\)组,得到 \[dp[i][j] = min _ {k = 0} ^ {i - 1} (dp[k][j - 1] + (s ...

  9. Mac OS 电信3G上网设置

    打开客户端后(安装客户端mobile partner需要先安装jdk),在“系统偏好设置”里选择“网络”,网络左侧添加“huaweimobile-modem”,“电话号码”填写电信卡号,“账户名称”和 ...

  10. win7自带wifi win7无线网络共享设置图文方法

    win7自带wifi win7无线网络共享设置图文方法 点评:开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让电脑变成无线路由器,实现共享上网,节省网费和路由器 ...