布局的基本概念
多栏布局三种基本实现方案:固定宽度,流动,弹性。
固定宽度布局:大小不会随用户调整浏览器窗口大小。
一版960-1100,960常见,可以被3,4,5,6,8,10,12,16整除。
流动布局:大小会随用户调整浏览器窗口大小而变化。
可以更好适应大屏幕,也叫响应式。
弹性布局:所有元素大小也会变换。
布局高度与布局宽度
布局高度:一般不该设定高度,除非页面上绝对定位的元素。
正常元素保持默认值auto不变,保持垂直居中。
布局宽度:精确控制布局宽度。
总结:一般原则,控制布局宽度,内容决定布局高度。
三栏-固定宽度布局
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5.2 三栏-固定宽度布局</title>
<style>
#wrapper {
width: 960px;
margin: 0 auto;
border: 1px solid;
}
nav {
width: 150px;
float: left;
}
nav li {
list-style-type: none;
}
article {
width: 600px;
float: left;
background: #ffed53;
}
aside {
width: 210px;
float: left;
background: #3f7ccf;
}
header {
background: #f00;
}
footer {
color: aliceblue;
clear: both;
background: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
固定宽度布局
</header>
<nav>
<!-- 无序列表 -->
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
<article>
<!-- 文本元素 -->
<h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1>
<p>
【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电,
据中央气象台官网信息,截至8月22日17时,在逐小时气温实况排行榜中,
川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜"前十"。
其中,四川合江在17时以42.2℃热到了全国第一。
而在8月21日下午,四川合江的气温也突破40℃,登顶全国高温榜第一。
</p>
<hr />
<h1>外交部回应黑神话悟空全球大热</h1>
<p>
21日,外交部发言人毛宁就"中国的国产游戏《黑神话:悟空》上线后,受到国际玩家青睐"作出回应:反映了中国文化的吸引力。
</p>
</article>
<aside>
<h1>这是一个侧边栏</h1>
<p>
今年是南开大学建校105周年。8月21日,南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元,主要用于支持南开数学研究和人才培养。
</p>
</aside>
<footer>
这是页脚
</footer>
</div>
</body>
</html>
为栏设定内边距和边框
- 让内容和栏边边界空开距离,为栏添加水平外边距和内边距,栏与栏之间增加间距,导致布局宽度增大,使得浮动栏下滑。
- 在栏中添加大图片,或者长字符串,导致栏宽超过布局宽度,也会导致右侧栏滑到左下方。
防止浮动栏下滑:
- 从设定的宽度中减去内外边距加边框和,每次都得调整,容易布局错乱。
- 容器内部元素加上内外边距,加inner的div,内部div自动填充父元素,给内部div设置内外边距,可以保持内容与栏边界的距离,如果容器上下边框不可见,内部div上下外边距会叠加。
- 用CSS3的box-sizing切换缩放方式,border-box,内外边距不增大,内容变窄。最简单的一个方法,IE6,7不支持,用的腻子脚本(polyfill)解决。
Paul Irish 前端大神
预防过大的元素,加一条{max-width:100%}不超过父元素,另一个是给父元素添加overflow:hidden。
单词太长,添加word-wrap:break-word进行断词。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5.2 三栏-固定宽度布局</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
nav {
box-sizing: border-box;
width: 150px;
float: left;
background: #dcd9c0;
padding: 10px;
}
nav .inner {
padding: 10px;
}
nav li {
list-style-type: none;
}
article {
box-sizing: border-box;
width: 600px;
float: left;
background: #ffed53;
padding: 10px 20px;
}
article .inner {
margin: 10px;
border: 2px solid red;
padding: 20px;
}
aside {
box-sizing: border-box;
width: 210px;
float: left;
background: #3f7ccf;
padding: 10px;
}
aside .inner {
padding: 10px;
}
footer {
text-align: center;
}
header {
background: #f00;
}
footer {
color: aliceblue;
clear: both;
background: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
固定宽度布局
</header>
<nav>
<!-- <div class="inner"> -->
<!-- 无序列表 -->
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<!-- </div> -->
</nav>
<article>
<!-- <div class="inner"> -->
<!-- 文本元素 -->
<h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1>
<p>
【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电,
据中央气象台官网信息,截至8月22日17时,在逐小时气温实况排行榜中,
川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜"前十"。
其中,四川合江在17时以42.2℃热到了全国第一。
而在8月21日下午,四川合江的气温也突破40℃,登顶全国高温榜第一。
</p>
<hr />
<h1>外交部回应黑神话悟空全球大热</h1>
<p>
21日,外交部发言人毛宁就"中国的国产游戏《黑神话:悟空》上线后,受到国际玩家青睐"作出回应:反映了中国文化的吸引力。
</p>
<!-- </div> -->
</article>
<aside>
<!-- <div class="inner"> -->
<h1>这是一个侧边栏</h1>
<p>
今年是南开大学建校105周年。8月21日,南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元,主要用于支持南开数学研究和人才培养。
</p>
<!-- </div> -->
</aside>
<footer>
这是页脚
</footer>
</div>
</body>
</html>