html5+css3网站建设、让网站布局更加灵活

着网站建设技术在不断的发展、从以前的table布局再到css布局，为什么css会取代table呢？可能大家心中一直有这个疑问，html的发展大家有目共睹、因为其跨平台性的原因，深受开发人士的欢迎。

网站建设好之后，后期能不能利于维护是很多人考虑的一个核心问题。table开发者说过一句话，连他自己都觉得这种布局形式不好维护。而css3的出现解决了这方面的问题。我们要明白css3的几个特点就是继承性，拥有了继承性，代码就可以重用了。举个简单的例子：

我们要让三组的文字的颜色都改成黄色。

html5+css3网页代码示例：

.linjun{
color：#ff0；
}
<h1>css变色</h1>
<h1>css的优点</h1>
<h1>css继承性</h1>

table网页代码示例：

<table>
<tr>
<td><font color="#ff0">css变色</font></td>
</tr>
<tr>
<td><font color="#ff0">css的优点</font></td>
</tr>
<tr>
<td><font color="#ff0">css继承性</font></td>
</tr>
</table>

可见只有三组的对比css只要几行代码就能解决这个问题了，而且这仅仅是页面的一部分元素，如果元素比较多呢？table的代码量就非常大了。所以css的优势就来了。如果我要改变颜色的话，css只要在属性值改变下就好，而table就要修改的地方非常多。

css要明白优先级及盒子模型

css可以组成网页的各式各样的布局，那么如何实现的呢？就是根据网页的盒子模型，如下图所示：

css盒子包括了元素、padding（边框离元素的距离）、margin（元素和元素之间的距离）。
css发展速度太快了，现在设置出来了sasa预处理语言，所以如果以前还在用table进行网站建设的朋友，赶紧学习css！

栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，同时在前端面试中也是属于必问的知识点，那么什么是三栏布局？比如打开京东的首页：

映入眼帘的就是一个常见的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。下面围绕的这样的目的，即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：

红色和蓝色宽度固定，绿色宽度自适应，下面七种方法实现的最终效果跟这个差不多，可能会稍有不同。

1. 流体布局

左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。

缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。

2. BFC 三栏布局

BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。

缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。

3. 圣杯布局

本周回顾

前端要知道的网络知识一：TCP/IP 协议到底在讲什么

前端要知道的网络知识二：TCP协议的三次握手和四次分手

前端要知道的网络知识三：认识OSI七层模型

前端要知道的网络知识四：TCP的概念和HTTP连接管理

前端要知道的网络知识五：详细的介绍web缓存

前端要知道的网络知识六：详细介绍URL及其用法

前端要知道的网络知识七：初识HTTP报文

前端要知道的网络知识八：GET 和 POST 到底有什么区别

前端要知道的网络知识九：初识HTTPS加密过程，原来如此

前端要知道的网络知识十：HTTPS加密核心RSA算法

....

参考文章

https://www.cnblogs.com/chenyablog/p/7918807.html

https://zhuanlan.zhihu.com/p/24305930

https://zhuanlan.zhihu.com/p/25070186

文由云+社区发表
作者：前端林子

本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果

1.方法一：自身浮动的方法

实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS实现三栏布局1</title>
 <style type="text/css">
 body{
 margin: 0;
 padding: 0;
 }
 .left{
 width:200px;
 height: 300px;
 background-color: #DC698A;
?
 float:left;
?
 }
 .middle{
 /*width:100%;*/
 /*中间栏不要设宽度，包括100%*/
 height: 300px;
 background-color: #8CB08B;
?
 margin:0 200px;
 }
 .right{
 width: 200px;
 height: 300px;
 background-color: #3EACDD;
?
 float: right;
 }
 </style>
</head>
<body>
 <!-- 左栏左浮右栏右浮，中间不设宽度用左右margin值撑开距离，且布局中中间栏放最后 -->
 <!-- 中间栏实际宽度是当前屏的100% -->
 <div class="left">左栏</div>
 <div class="right">右栏</div>
 <div class="middle">中间栏</div>
</body>
</html>

注意：该方法在html布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定

实现的效果如下：

自身浮动实现三栏布局

2.方法二：margin负值法

实现方法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS实现三栏布局2</title>
 <style type="text/css">
 body{
 margin:0;
 padding:0;
 }
 .left{
 width:200px;
 height: 300px;
 background-color: #DC698A;
?
 float:left;
 margin-left:-100%;
 }
 .middle{
 width:100%;
 height: 300px;
 background-color: #8CB08B;
?
 float:left;
 }
 .right{
 width:200px;
 height: 300px;
 background-color: #3EACDD;
?
 float: left;
 margin-left: -200px;
 }
 </style>
</head>
<body>
 <!-- 左栏中间栏右栏左浮，左栏margin-left：-100%，中间栏宽100%,，右栏margin-left:-右栏宽度 
 且布局上必须中间栏放第一个-->
 <div class="middle">中间栏</div>
 <div class="left">左栏</div>
 <div class="right">右栏</div>
</body>
</html>

注意：该方法在html布局时，要把中间栏放在第一个

此方法是实现圣杯布局和双飞翼布局的基础。

实现的效果如下：

margin负值法实现三栏布局

3.方法三：绝对定位法

实现方法：左栏、右栏绝对定位，分别固定到页面左右两侧，中间栏不设宽度，用左右margin来撑开距离

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS实现三栏布局3</title>
 <style type="text/css">
 body{
 margin:0;
 padding: 0;
 }
 .left{
 width:200px;
 height: 300px;
 background-color: #DC698A;
?
 position: absolute;
 left:0;
 top:0;
 }
 .middle{
 /*width: 100%;*/
 height: 300px;
 background-color: #8CB08B;
 margin:0 200px;
 }
 .right{
 width:200px;
 height: 300px;
 background-color: #3EACDD;
?
 position: absolute;
 right:0;
 top:0;
 }
 </style>
</head>
<body>
 <!-- 左右两栏绝对定位，分别固定到页面的左右两侧，中间栏不设宽度，用左右margin撑开距离 -->
 <!-- 中间栏的实际宽度是当前屏的100% -->
 <div class="left">左栏</div>
 <div class="middle">中间栏</div>
 <div class="right">右栏</div>
</body>
</html>

实现的效果如下：

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货，可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

在线咨询

上一篇：java实现多行html文本转换成单行文本，用QQ小
下一篇：开发者指南如何在MyEclipse中编辑HTML或J

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html5+css3网站建设、让网站布局更加灵活

本周回顾

您的项目需求