一列二至多块布局

最新推荐文章于 2021-08-04 09:38:37 发布

zhufengming

最新推荐文章于 2021-08-04 09:38:37 发布

阅读量544

点赞数

分类专栏： HTML+CSS+JS

HTML+CSS+JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们可以用三个div块来划分，分别给它们起名为：头部（header）、主体（maincontent）、底部（footer）。

采用固定宽度居中的方式，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
</style>
</head>
<body>
<div id="header">此处显示 id "header" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</body>
</html>

许多朋友在问：为什么两个相邻的容器中间的间距不是10px，而是5px呢？按照我们正常的理解，认为应该是两个值相加，其实这里是两个合并后取最大值。用css手册中的话说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心（有关块级元素和行内元素的概念在下一节讲到）。

CSS语法