像素边框和比例宽度

Posted 2023-03-06

技术标签:

【中文标题】像素边框和比例宽度【英文标题】：Pixel Border and Percentage width in Proportion 【发布时间】：2011-12-30 11:15:08 【问题描述】：

我想我可能已经知道了这个问题的答案，但我需要进行全面检查！

说我有

#gridtest
width:590px;

我可以使用 RESULT=TARGET/CONTEXT 将宽度更改为百分比。在这种情况下，上下文是一个最大宽度设置为 1000px 的容器，所以我可以这样做：

#gridtestpercent
width:59%; /*590/1000*/

如果我将窗口缩小，则 div 将始终与其容器成比例。但是如果我想做呢

#gridtest
width:570px;
border:10px solid red;

我可以根据现在的目标 570 来计算宽度，但是随着窗口的缩小，所有比例都会不同步。

#gridtestpercentnoborder
width:57%; /*570/1000*/
border:10px solid red;

我不能使用百分比边框。我不想使用 JS 继续检查上下文，我还不能使用 CSS3 box-border 声明。

如果我想使用 Ethan Marcotte 在响应式网页设计中描述的技术，在这种技术中，一切都相互缩小，如果使用边框，我会不走运吗？

干杯！

【问题讨论】：

【参考方案1】：

在 CSS3 中，您还可以使用新的 box-sizing 属性将像素和填充计数包含到元素的 width 中：

box-sizing: border-box;

【讨论】：

【参考方案2】：

接受的答案不正确。你实际上有两个选择：

使用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;

或者，使用outline 属性而不是边框属性。您仍然会遇到填充问题，但添加起来更容易。示例：

.column 
    width: 16%;
    float: left;
    margin: 0 2% 0 2%;
    background: #03a8d2;

    outline: 2px solid black;

完整解释：http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

【讨论】：

这非常适合我正在做的事情 - 使用基于百分比的容器在移动视口上进行响应式设计。虽然我通常不使用 box-sizing 因为它不是最受支持的属性 - 它对于我需要它工作的平台上的流体容器来说足够好。完美！【参考方案3】：

如果可能，根据您的设计，我喜欢将边框设置为绝对 div，宽度为 3px（例如），高度高于其父 div。然后我在父 div 上设置溢出隐藏。

【讨论】：

【参考方案4】：

您可以使用 CSS3 calc() 函数，

.selector
  border: 5px solid black;
  width: -moz-calc(50% - 10px);
  width: -webkit-calc(50% - 10px);
  width: calc(50% - 10px);

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')

【讨论】：

这太棒了！谢谢朋友的提示！【参考方案5】：

您可以使用插入框阴影代替边框：