CSS 比例像素边框和百分比宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8152804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pixel Border and Percentage width in Proportion
提问by user1010892
I think I might already know the answer to this one but I need a sanity check!
我想我可能已经知道了这个问题的答案，但我需要进行一次理智检查！
Say I have
说我有
#gridtest{
width:590px;
}
I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width set to 1000px so I can do this:
我可以使用 RESULT=TARGET/CONTEXT 将宽度更改为百分比。在这种情况下，上下文是一个最大宽度设置为 1000px 的容器，所以我可以这样做：
#gridtestpercent{
width:59%; /*590/1000*/
}
If I were to shrink the window down the div would always be in the proportion to the its container. But what if I wanted to do
如果我要缩小窗口，div 将始终与其容器成比例。但是如果我想做
#gridtest{
width:570px;
border:10px solid red;
}
I can work the width out based on the target now being 570 but as the window is shrunk the proportions all go out of sync.
我可以根据现在是 570 的目标计算出宽度，但是随着窗口缩小，比例全部不同步。
#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}
I can't use percentage border. I don't want to use JS to keep checking the context and I can't use the CSS3 box-border declaration yet.
我不能使用百分比边框。我不想使用 JS 来继续检查上下文，我还不能使用 CSS3 box-border 声明。
If I wanted to use the technique described in responsive web design by Ethan Marcotte where everything shrinks in relation to each other would I be out of luck if using a border?
如果我想使用 Ethan Marcotte 在响应式网页设计中描述的技术，其中一切都相互缩小，如果使用边框，我会不走运吗？
Cheers!
干杯!
采纳答案by Nate B
Unfortunately, yes, you're out of luck. One hacky way to get around this problem is with a wrapper divthat you use to create your border. So the outside divwould be 57% (in your example) with a background that is the color of your desired border. Then, the inner divwould have a width of 96% or so (play with the exact number to find a border that is appropriate for your design).
不幸的是，是的，你运气不好。解决此问题的一种方法是div使用用于创建边框的包装器。所以外面div是 57%（在你的例子中），背景是你想要的边框的颜色。然后，内部div将有 96% 左右的宽度（使用确切的数字来找到适合您设计的边框）。
回答by Kariem Muhammed
You could use CSS3 calc()function,
你可以使用 CSS3 calc()函数，
.selector{
border: 5px solid black;
width: -moz-calc(50% - 10px);
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
}
SASS mixin
SASS混入
@mixin calc($property, $expression) {
#{$property}: -moz-calc(#{$expression});
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
article {
border: 1px solid red;
@include calc( width, '100% - 2px')
}
回答by Justin C. Rounds
You could use an inset box-shadow instead of a border:
您可以使用插入框阴影而不是边框：
box-shadow: 0px 0px 0px 10px red inset;
Just pad the inside of the container to compensate.
只需填充容器内部即可进行补偿。
Edit: I write "pad" but of course if you use padding it'll throw off the box dimensions. Margin the content inside instead.
编辑：我写“pad”，但当然如果你使用填充它会抛弃盒子尺寸。将里面的内容改为边距。
回答by Diego Jancic
The accepted answer is not correct. You actually have 2 options:
接受的答案不正确。你实际上有两个选择：
Use the box-sizingproperty, so all the paddings and borders are considered part of the size:
使用该box-sizing属性，所以所有的内边距和边框都被认为是尺寸的一部分：
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
border: 2px solid black;
padding: 15px;
font-size: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Or, use the outlineproperty instead of the border property. You will still have problems with the paddings, but it's easier to add. Example:
或者，使用outline属性而不是边框属性。您仍然会遇到填充问题，但添加更容易。例子：
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
outline: 2px solid black;
}
Full explanation: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
完整说明：http: //designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
回答by RobW
If you want to stay semantic you can use div { box-sizing:border-box; }or some absolutely positioned :afterelements. See the post How do I add 1px border to a div whose width is a percentage?
如果你想保持语义，你可以使用div { box-sizing:border-box; }或 一些绝对定位的:after元素。请参阅帖子如何向宽度为百分比的 div 添加 1px 边框？
回答by Shoe
In CSS3 you can also use the new box-sizingproperty to include the pixel and padding count into the widthof the element:
在 CSS3 中，您还可以使用新box-sizing属性将像素和填充计数包含到width元素中：
box-sizing: border-box;
回答by Maxim Siebert
If possible, depending on your design, what I like to do is put the border as an absolute div with a width of 3px ( for example ) and a height higher than its parent div. I then set overflow hidden on the parent div.
如果可能的话，根据您的设计，我喜欢做的是将边框作为绝对 div，宽度为 3px（例如），高度高于其父 div。然后我将溢出隐藏在父 div 上。
