代码之家 › 专栏 › 技术社区 › user3267426

计算内部元素的宽度、边距和填充百分比?

padding margin width css

user3267426 · 技术社区 · 11 年前

我被告知,内部元素的宽度百分比是根据外部元素的总宽度计算的,而同一内部元素的边距和填充是基于外部元素的内容宽度计算的。当我尝试使用它时,它不起作用。我根据外部元素的内容宽度获取所有内容(宽度、填充和边距)。这是我的CSS: <

style>

html {
    background: url(images/grid.gif) 5px 5px;
}
body {
    font: 100% Arial, Arial, Helvetica, sans-serif;
    }
html, body{
    margin:0 auto;
}
.outer{
    margin:50px;
    padding:50px;
    width:300px;
    height:300px;
    background:red;
}
.inner{
    width:50%;
    height:50%;
    background:navy;
}
</style>

这是我的HTML:

<html>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>

我将内部元素50%宽度的宽度设为150px,而不是200px,因为填充应该是总的,而外部元素填充的50px加上300px的宽度应该是400px。边距不应是内容宽度的一部分??我想? 那么,边距和填充百分比与宽度百分比不同吗?

3 回复 | 直到 11 年前

Nico O 11 年前

计算集装箱箱尺寸有不同的模型。

这里有一个非常好的阅读更多信息: http://css-tricks.com/box-sizing/

如果你想 inner 精确到50% outer ,你应该尝试使用 border-box 箱体尺寸。

.outer, .inner
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box;  
}

然后应用

.inner
{
    width:50%;
}

现在,这些元素的填充、边框和宽度将计算为陪护器宽度。

更新:

以下是两种箱子尺寸调整方法的组合: http://fiddle.jshell.net/Rx9CX/

尽管我的JS在这个例子中很糟糕,你可以看到,你使用的测量方法也很重要。如果查看jQuerys-width()方法( https://api.jquery.com/width/ )这种行为值得注意:

请注意,.width()将始终返回内容宽度,无论 CSS框大小属性的值。从jQuery 1.8开始,这可能需要检索CSS宽度加框大小属性,然后当元素具有框大小:边框。要避免这种惩罚,请使用.css( “width”)而不是.width()

在小提琴中,你可以看到width()和innerWidth()之间的区别。

florin.prisecariu 11 年前

如果.outer具有宽度:300px,内宽:50%;平均150像素

Fredric Fohlin 11 年前

这取决于你使用的阅读器。

试试看: http://jsfiddle.net/33EZ3/

.outer{
  margin:50px;
  padding:50px;
  width:300px;
  height:300px;
  background:red;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;         /* Opera/IE 8+ */
}
.inner{
  width:50%;
  height:50%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other G */
  background-color: navy;
}

请阅读以下内容: http://css-tricks.com/box-sizing/