如果我以百分比设置子元素的大小,则将相对于父级的内容框计算大小,与我将其box-sizing属性设置为的事实无关border-box.
所以,如果我有这样的事情:
.parent {
box-sizing: border-box;
padding: 0 100px;
width: 600px;
}
.child {
width: 50%;
}
宽度.child将是400px(应用填充后父级的宽度)的50%.你可以在这里看到一个例子:JSBin
有没有办法使子元素的宽度相对于父元素
border-box而不是父元素content-box？
在做我的例子时,我注意到在计算大小时有一种奇怪的行为.设置.parent填充0 10%实际上给出了每边68个像素的填充.这是为什么？不是600px 60px的10%或者我错过了什么？
该width属性被明确定义为相对于内容框,并且box-sizing父级不会改变它,但是有一个技巧可用.你需要的是一个不占用任何空间的边框,谢天谢地,这正是outline房产所做的.
有一个问题:大纲默认为在内容框之外.不过不用担心,因为其中一个outline相关的属性outline-offset接受负值,这会将我们的轮廓带入我们的内容框中!
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%而不是基于你的子元素内容的任意值.
注意:将来请分别提出其他问题,特别是当它们与您的主要问题略有关联时.