css基础教程属性篇之盒子模型(3)
作者:Jorux 来源:jorux.com 发布时间:2008-07-29 12:05:00
依据以上解释, 我们应该得到如下效果(Fig. 3):
即ID1的margin-top/bottom=ab=ef=10px;
ID2的margin-top/bottom=bc=de=30px;
但用浏览器打开html文件, 却得到 Example4 的效果, 如下图(Fig. 4):
即ab=cd=30px, ID1的margin-top/bottom=10px被折叠了, 而且ID1应有的margin黑色背景也一同被折叠消失了.
为什么会折叠: 造成以上现象的原因是, 我们在css中并没有声明id为ID1的元素div的height(高), 因此它的高便被设为auto(自动)了. 一旦其值被设为auto, 那么浏览器就会认为它的高为子元素ID2的border-top到border-bottom之间的距离, 即Fig. 4中bc的长度, 所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外, 出现了Fig. 4中ab与cd之间的空白区域. 因此父元素ID1的margin-top/bottom因子元素的”红杏出墙”而被折叠消失了.
如何解决折叠问题: 可能大家最初想到的办法就是根据折叠发生的原因—auto, 来解决问题. 但是, 在实际操作中, 某些元素如div, h1, p等, 我们是不可能预先知道它的高是多少的, 因此在css文件中是不能常规通过声明元素的高来解决折叠问题.
我们需要在css文件中加入如下代码(红色部分):
#ID1 {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
padding-top:1px;
padding-bottom:1px;
}
或是:
#ID1 {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
border-top:1px solid #333;
border-bottom:1px solid #333;
}
通过增加以上代码, 便可使浏览器重新计算ID1的高, 使其为子元素ID2的margin-top/bottom外缘(outer top/bottom)之间的距离, 即Fig. 3中be的距离.
看得是不是有点迷糊, 折叠问题难度比较大, 它也曾是困扰我多时的难题, 加之本人的叙述说明能力不足, 更加大了大家学习的难度, 在此Jorux深表歉意.
为检验大家学习折叠问题的效果, 给读者留下一个问题:
html文件代码为(请将css地址改为你的css文件存放地址):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>My first homepage</title>
<link rel=”stylesheet” href=”….css” type=”text/css” media=”screen” />
</head>
<body>
<h1 id=”title”>
A title</h1>
<div id=”content”>
Some text here </div>
</body>
</html>
外联css文件代码为:
*{
padding:0;
margin:0;
}
body {
font: 14px/1.5 Georgia, serif;
}
h1#title {
float: right;
width: 50%;
font: 14px/1.5 Georgia, serif;
margin-top: 0;
background-color: #F00;
color: #fff;
}
div#content {
background-color: #333;
color: #FFF;
margin-top: 30px;
border: 1px solid #333;
}
请将此代码存为css文件, 并与以上html文件关联, 得到如 Example5 的效果, 请分别用IE与Firefox浏览, 效果不尽相同, IE下的效果是我们想要的, 但用Firefox浏览却发现元素h1嵌入到元素div中, 你能解决这个Firefox不能正常显示的问题吗? 如果可以, 能和刚刚学过的折叠现象联系起来吗? 请在留言给出你的答案! (Jorux的解释会在留言中或是下篇文章中给出) [END]
注: 该问题有一定难度, 请读者量力而行!
至此, 《If you love css …》的属性篇全部结束, 下篇将进入《布局篇》.
猜你喜欢
- 代码如下:function checkip(checkstring)'用正则判断IP是否合法 dim re1 set re1=new
- Javascript函数类型判断完美解决方案在判断函数类型时,我们通常使用typeof方法,一般情况下,它会得到我们所预想的效果。但是,有一
- 近日大家热议的盗版XP黑屏问题想必很多人都知道了,在这里就不多说。据媒体报道,微软公司将实施逐步投放策略,预计本周将投放5%黑屏,下周投放2
- PJBLOG3的相关日志,现在网上好像还没有谁有相关的修改说明吧,反正升级之后,正好有必要,也就写了个,在这里也给大家共享共享。当前相关日志
- SQL Server具有强大的复制功能,除了将数据和数据库对象从一个数据库复制并准确分发的另一个数据库中,还要实行数据库之间的同步。SQL
- 例如:将日期格式为2009-6-8的转换为2009-06-08,给小于10的数字补上一个0方法一:year(now)
- 先看一个实例这是我用asp写的一个搜索一个字符串里面第一张图片地址的函数(当然你可以将values那里换一个得到所有图片地址)functio
- 什么是事件代理(Event Delegation)?如果不太了解的朋友,可详细阅读:《Event delegation in JavaScr
- 在使用SQL Server 的过程,中由于经常需要从多个不同地点将数据集中起来或向多个地点复制数据,所以数据的导出,导入是极为常见的操作.我
- BLOG地址:http://www.planabc.net/article.asp?id=107学习标准的朋友,一般都会在学习的过程中接触到
- 不论是企业网站、个人博客,或者购物网站、游戏网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验。可用性是用户体验的一种度量,它可以用访
- 代码如下:<% set rs=server.createobject("adodb.recordset&
- 如何做一个全面的探测器? 我们也可以做一个功能类似的探测器,见下:<Script lan
- CSS布局中可以用javascript判断浏览器版本看如下的javascript脚本: if (window.XMLHt
- XML的未来 现在你已经知道XML。确实,结构有点复杂,而且DTD有各种可以定义文档可以包含的内容的选项。但还不只这些。考虑一个数据交换对其
- sql server的备份与恢复(查询分析器) 查询分析器: 命令: 1:备份数据库命令: backup database whdb1(要备
- 如何 在Access中选择指定日期前的记录?我知道,在Access中不能使用DateDiff,那么我们怎样才能选择指定日期前的若干记录呢?虽
- 先下载:http://signup.qq.com/js/a.js用 IntelliJ IDEA 格式化代码:var naa = true;O
- 校验是否全由数字组成function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.
- 今天在开发一个手机短信通讯录的前端界面时,界面中使用了checkbox,来做为各项的选择控件,但是操作时,除了点差子。由于逻辑需要,需要预先