您的位置：首页 > Web前端 > CSS

CSS之盒子模型

2012-05-25 16:22 204 查看

什么东西都学学吧，对自己又没坏处。

要想用好div+css布局页面，那么盒子模型就必须得理解好。

一些概念：

W3CShool: http://www.w3school.com.cn/css/css_boxmodel.asp

CSS盒子模型Falsh演示：http://redmelon.net/tstme/box_model/

------------------------------实战------------------------------

我使用firefox+firebug展示一下何为盒子模型：

首先我创建一个基本的页面，只有body元素：

<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
<link rel="stylesheet" href="box.css" />
</head>

<body>

</body>
</html>

box.css文件为：

* {
margin: 0;
padding: 0;
}

body {
background: gray;
}

这样，用firefox打开，只能看到背景变成了灰色。其他什么都没有。不过要的就是这个效果。

接下来，使用firebug工具。

鼠标点击body元素，打开布局视图，现在看到的就是body的盒子模型了。

元素的盒子模型：这么理解吧，每个元素都是一个盒子，body是最大的那个盒子，其余元素盒子会放在body元素盒子里面。

如果你看了w3cshool上的模型介绍，那么右边的视图你应该能明白了。

现在，我们修改width 和 heigth 的值。图中为 1366 * 0, 我们修改为 600 * 400, 然后再次点击body元素，如图：

左边蓝色阴影部分就是现在body元素。这是基本的weidth和heigth属性。

下面我们看看border属性：这是边框的意思。

在box.css文件中body下添加：

border: 1px solid red;

查看效果：

我们可以看出，红的边框出现了，它占据10px,和width与heigth并不融合。

下面我们修改一下外边框，就是margin。可以直接在布局里面修改，我这里把数值从0修改为30，如图：

现在，我们可以看到左边蓝色区域是以后放置在body元素中的位置，红的是边框，黄色的是外边框。

我们再次修改内边框,padding属性，修改为20,如图：

左边可以看出，多出了紫色区域，这就是内边框。

如果之后，我们在body元素中放置一个<h1>标签，那么h1标签将会在淡蓝色位置出现。

这样下来，基本的盒子模式就能了解了吧？？

最后，说一下融合的问题，就是如果两个元素相邻，他们的外边框或者内边框直接接触，会产生融合的。

比如A元素的下边框为20，B元素的上边框为40，那么会融合，融合的结果为：A的下边框为20不变，B的上边框共用了A的下边框。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航