调整相对于父级边框的子元素 [英] Sizing a child element relative to parent's border-box
问题描述
如果我以百分比形式设置子元素的大小，则相对于父级的 content- c盒子 c盒子 c盒子 c盒子 c盒子 $ c>。
If I set the size of a child element in percentage, the size will be calculated relative to parent's content-box, independently from the fact that I have set its box-sizing property to border-box.
所以如果我有这样的：
.parent {
box-sizing: border-box;
padding: 0 100px;
width: 600px;
}
.child {
width: 50%;
}
.child的宽度将会是 400px （已应用填充后父级宽度）的50％。您可以在此处查看示例： JSBin
The width of .child will be 50% of 400px (parent's width after padding has been applied). You can see an example here: JSBin
有一种方法可以使子元素的宽度相对于
父元素的
Is there a way to make the width of a child element relative to the parent's
border-boxrather than the parent'scontent-box?
> b
奖金问题
在做我的例子时，我注意到在计算大小时的一个奇怪的行为。将 .parent 的填充设置为 0 10％实际上从每一侧给出了68个像素的填充。这是为什么？
Bonus question
While making my example I noticed a weird behavior in the calculation of the size. Setting the .parent's padding as 0 10% actually gives a padding of 68-odd pixels from each side. Why is that? Isn't 10% of 600px 60px or I am missing something?
推荐答案
width 属性显式定义为相对于内容框和 box-sizing 在父母不改变这个，但是有一个技巧可用。您需要的是 不占用任何空格的边框，幸运的是大纲属性。
The width property is explicitly defined as being relative to the content box and box-sizing on the parent doesn't alter this however there is a trick available. What you need is a border that doesn't consume any space and thankfully that is exactly what the outline property does.
有一个catch：大纲默认是在内容框之外。不用担心，因为大纲的相关属性 outline-offset 接受负值，这将使我们的大纲我们的内容框！
There is one catch: The outline defaults to being outside the content box. Not to worry though because one of outline's related properties outline-offset accepts negative values which will bring our outline inside our content box!
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="outer">
<div class="inner">
TEST
</div>
</div>
</body>
</html>
CSS
.outer {
position: relative;
width: 100px;
height: 100px;
outline:20px solid red;
border:1px solid black;
outline-offset: -20px;
}
.inner {
width: 50%;
height: 100%;
outline:1px solid yellow;
position: absolute; /* required so inner is drawn _above_ the outer outline */
background-color: blue;
}
JS Bin： http://jsbin.com/efUBOsU/1/
关于您的奖金问题百分比宽度基于容器大小，而不是元素大小。对于 width ， padding 和 margin 也是如此。你得到一个68px的填充，因为容器是680px。这看起来很奇怪，但是当你有一个规则 {width：80％; padding：10％;} ，因为它保证你的总对象尺寸将是100％的容器，而不是一些基于你的子元素内容的任意值。
With regards to your "bonus question" percentage widths are based on the container size, not the element size. This is true for width, padding and margin. You're getting a padding of 68px because the container is is 680px. This may seem odd but it comes in very handy when you have a rule like {width: 80%; padding: 10%;} because it guarantees your total object dimensions will be 100% of the container and not some arbitrary value based on your child elements' content.
注意：以后，请单独提出其他问题，特别是当它们与您的主要问题只有微小的关系时。
Note: In future please ask additional questions seperately, especially when they are only marginally related to your primary question.
这篇关于调整相对于父级边框的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
