微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css加入的盒子模型不显示

最近我在写一个网页布局,发现了一个奇怪的问题 - 在使用CSS定义盒子模型时,盒子模型并未正确显示出来。

css加入的盒子模型不显示

我首先尝试的是使用下面这段CSS代码

.Box {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: 1px solid black;
  padding: 20px;
}

然而,我得到的盒子模型并没有显示出它应该有的样式。而是只有一片空白。我猜想这是样式表没有正确链接或其它奇怪的问题。

于是我仔细查看页面代码,并检查了链接。都没有找到问题。然后我尝试使用不同的浏览器检查是否是浏览器的兼容性问题。但结果仍然是一样的。

最后,我决定尝试使用更加严格的CSS定义盒子模型。我使用了下面的代码

.Box {
  display: block;
  width: 200px;
  height: 200px;
  margin: 10px;
  border: 1px solid black;
  padding: 20px;
  Box-sizing: border-Box;
}

这段代码使用了display: block;Box-sizing: border-Box;属性。这些属性会告诉浏览器在渲染盒子模型时要将边框和内边距都包含在盒子的尺寸内。

现在我的盒子模型成功地显示出来了!

总结一下,如果你发现CSS定义盒子模型不显示,不妨尝试使用更加严格的CSS代码,例如使用Box-sizing: border-Box;属性

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。