盒模型

2024-01-16 17:15 小编

CSS里一切都是盒子。屏幕上显示的所有内容都有一个框,盒模型描述了如何计算该框的大小 - 将外边距,内边距和边框考虑进去。标准的CSS框模型接受给定元素的宽度,然后将内边框和边框添加到该宽度上——这意味着元素占用的空间大于给定的宽度。

最近,我们已经能够选择使用IE盒模型,使得元素上的给定宽度作为屏幕上可见元素的宽度。任何内边距或边框都会从边缘插入框的内容。这对许多布局更有意义。

在下面的演示中,我有两个盒子。两者的宽度均为200像素,边框为5像素,内边距为20像素。第一个框使用标准框模型,因此占用总宽度为250像素,第二个框使用IE盒模型,因此实际上是200像素宽。

<div class="box">
  I use the standard box model.  </div><div class="box box2">
  I use the alternate box model.  </div>
body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}
p {
  margin: 0 0 1em 0;}.box {
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 20px;
  width: 200px;
  margin-bottom: 2em;}.box2 {
  box-sizing: border-box;}

浏览器开发者工具可以再次帮助你了解正在使用的盒子模型。在下图中,我使用火狐浏览器的开发者工具使用默认的内容框框模型检查框。工具告诉我这是正在使用的盒模型,我可以看到大小以及如何将边框和内边框添加到指定的宽度。

超详细!如何学习 CSS?需要学习哪些知识?

 

注意:在IE6之前,Internet Explorer使用IE盒模型,内边框和边框插入给定宽度的内容里。所以有一段时间浏览器使用不同的盒模型!如果今天的互操作性问题感到沮丧,现在已经有所改善,那么我们就不会处理浏览器以不同的方式计算元素的宽度。

在 CSS Tricks 里,有关于盒模型和盒子尺寸的很好的解释,并解释了在你的网站中全局使用IE盒模型的最佳方法。


在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码