CSS帮助盒模型
时间：2020-03-06 14:19:46 来源:igfitidea点击:
我需要CSS盒子模型的帮助。我的网站ucare-ph.org有问题。徽标(临时)覆盖了主要副本。现在我知道有人可以告诉我解决此问题的代码。但是我真正需要的是书籍或者网站上的一种或者多种资源，可以使我更好地了解盒子模型。语法非常简单。但是盒子之间的关系非常困难。是的，我有Firebug的Firebug和Web开发人员。但是它仍然是反复试验的。
解决方案
- 交互式CSS盒子模型
- CSS定位
至于我们网站的徽标，请尝试在内容上设置clear：both。
使用Firebug帮了我很大的忙
右键单击页面上的元素，然后选择"检查元素"。然后在右侧面板中选择"布局"标签。我们可以看到元素的图形表示以及盒子模型中每个组件的尺寸。没有萤火虫，我的生活会很惨。
请注意，除非我们指定以下文档类型，否则Internet Explorer将使用残破模型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
在残破的盒子模型中，高度和宽度值是指盒子的尺寸(不包括边距)。
例如，如果我们有：
<div style="width:100px; height:100px; padding:10px; border:10px solid #000;"></div>
在正确的框模型中，它将显示一个140x140的框，因为填充会向内容区域的每一侧(即100x100)添加10px，然后边框向每一侧又添加10px。
但是，在损坏的IE框模型中，它将显示一个100x100的框，边框和填充物将位于该空间内，而内容区域仅为60x60。
