现在开始讲解各种常用布局。
三栏——固定宽度布局
掌握了创建三栏布局的技术，你想建多少栏就能建多少栏。为了学习方便，我会给每个栏添加不同的背景色以区分。
首先做个简单的居中的单栏固定布局。贴上代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>页面布局</title>
<style type="text/css">
#wrapper{width:960px;margin:0 auto;border:1px solid;}
article{background: #ffed53;}
</style>
</head>
<body>
<div id="wrapper">
<article>
<h2>响应式网页布局的实现方法原理·马海祥博客</h2>
<p>响应式网页设计(Responsive Web design，通常缩写为RWD)是指：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
</p>
</article>
</div>
</body>
</html>
如图可知这个单栏布局在页面上居中了，往里面添加内容这一栏的高度将相应增加。article元素本质上是没有宽度的块
级盒子，它水平填满了外包装。再为其添加一个导航元素，作为第二栏。
html：
<div id="wrapper">
<nav> <!--无序列表-->
<li><a>link</a></li>
<li><a>link</a></li>
<li><a>link</a></li>
</nav>
<article>
<h2>响应式网页布局的实现方法原理·马海祥博客</h2>
<p>响应式网页设计(Responsive Web design，通常缩写为RWD)是指：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
</p>
</article>
</div>
#wrapper{width:960px;margin:0 auto;border:1px solid;}
nav{
width:150px;
float:left;
}
nav li{list-style-type: none;}
article{
<span style="color:#ff0000;">width: 810px;
float: left;</span>
background: #ffed53;
}
两栏容器元素的总宽度设定为为960px，并浮动它们，就可创造出并肩排列的两栏来。同样的方法可以创
建第三栏或者任意多栏。
<nav> <!--无序列表-->
</nav>
<article>
<!--***-->
</article>
<aside>
this is aside,内容转自马海祥的博客
</aside>article{
<span style="color:#ff0000;">width: 600px;</span>
float: left;
background: #ffed53;
}
aside{
<span style="color:#ff0000;">width:210px;
float: left;
background: #3f7ccf;</span>
}
只要总宽度等于960px，我可想添加多少就多少栏，可以添加页眉和页脚。
在div顶部和底部分别添加了页眉<header>和页脚<footer>标签，css样式如下：
<span style="white-space:pre"> </span>header{background: #f00;text-align: center;}
footer{background: #000;color: #EEEEEE;}
页脚位于浮动元素后面，所以就会尽量往上移动，解决方法是添加：clear: both(left);
清除浮动后就可以阻止footer向上移动，让它不超过浮动元素的下方边界。
接下来主要解决布局中的两个问题：①内容与各栏边界紧挨着太拥挤；②每栏高度由文本决定。别以为
这是件简单的事。
为栏设定内边距和边框：
添加水平外边距和内边距或者图片，长字符串如长URL都会导致栏宽超过布局宽度，导致右边的栏下滑
到左边的栏下方，称作“浮动滑移”。
如添加article{padding: 10px 20px;}，中间盒子变成640px宽，如下：
有三种方法可以预防：
①重设宽度以抵消内边距和边框，比如将width设为560px，则右边栏可以归为，问题是每次只要调整内
外边距就要重设布局宽度，有点烦人。这个方法虽然可行却不够理想，说不定那一回调整内边距和边框
就会导致布局错乱。
②给容器内部的元素应用内边距和边框，前提是这些元素没有明确设定宽度，这样它们的内容才会跟着
内、外边距的增加而缩小。盒模型定义没有宽度的元素在水平方向上回适应其父元素，其内容会随着外
边距、边框和内边距的增加而减少。然而一栏之中会有大量不同元素，要调整每个元素，将来又决定调
整时就必须再次对每个元素更改，麻烦且容易出错。故可以在栏中添加一个没有宽度的div，包含所有
内容元素，只需调整该div。如下：
去掉article中的padding属性，同时在article标签内部添加div标签包围原先的内容元素，样式为inner，添加
article .inner {
margin: 10px;
border: 1px solid red;
padding: 20px;;
}
可以同样方法修改其余几部分。
补充：还有另外一种方法——子-星选择符，这就是一种组合选择符，利用它可以不使用内部div就
能设定一栏中所有元素的外边距。星号选择符可以选择“所有元素”，子选择符可以选择“某元素的子元素”，
比如someSelector>*就会只选择someSelector所代表的所有子元素，正好适用于选择容器内部的所有
顶部元素。使用该选择符要注意两点：第一，设定垂直外边距时，只能使用margin-top，margin-bottom，
不能使用简写margin，否则会抵消该选择符应用给这些元素的水平外边距。如果想缩进某个子元素的内容，
可以给它应用内边距。第二，该选择符有潜在性能问题，因为它会遍历整个DOM结构去查找匹配的元素，
不过该性能影响几乎可忽略。除非是包含成千上万个元素的页面，就该考虑用ySlow或其他性能度量工具测一测。
③使用CSS3的box-sizing:border-box：这是最简单的方法。加上这个声明后，再给栏添加内边距
（和边框）就不会导致盒子的宽度变化，注意外边距不行。和②效果一样。给每个部分添加
box-sizing: border-box;，padding和border属性，去掉div标签。页面效果如下：
但是，IE6和IE7不支持box-sizing属性，不过有个专门解决这个问题的腻子脚本（polyfill），
名叫borderBoxModel.js。
在body标签结束前添加代码段：
<!--HTML标记-->
<!--只让IE8之前的IE加载它-->
<!--[if lt IE 8]>
<script src="helpers/borderBoxModel.js"></script>
<![!endif]-->在使用内部div这么久以来，经试验发现不仅是浮动的栏，所有的元素都可以应用这个不同的盒缩放
模型，故可在css中添加一条规则：
*{box-sizing:border-box;}
补充：动态网站中，预防过大的元素，比如图片，简单的预防措施是，添加一条.inner img{max-width:100%;}
声明，在方法②的基础上。还有一个方法，就是给每个栏或者内部div添加overflow:hidden;声明。还有一个
潜在问题是换行。长字符串会导致栏宽过大，因此还应该给所以栏的外包装元素应用word-wrap:break-word;声明，
这样会把过长的词调整断开显示。
扫一扫
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
