所有比喻中的CSS百分比宽度和百分比填充错误？

请看下面的例子：所有比喻中的CSS百分比宽度和百分比填充错误？

http://jsfiddle.net/nvcode/BnGyu/2/

现在它显然是显而易见的是，浏览器就可以正常工作了宽度为第一个div被完全填满，但在第二个div我把98％的宽度和1％填补任何一方，总共100％。

浏览器知道100％是父宽度的全部宽度，那么为什么子div不填充父级空间？

即使您更改宽度的值，它会破坏更多？

来源

2011-10-12 nvcode

默认情况下，任何块级元素都将展开以填充其包含元素的宽度。在这种情况下，指定内部元素的宽度是多余的。一般来说，使用明确的指标来衡量布局的百分比会更好（也更容易混淆）。

This sums it up nicely.

来源

2011-10-12 00:37:46 jathanism

谢谢你，这让我感到奇怪，为什么会发生这种事！ – nvcode

不客气。如果你想让一个块100％宽，然后再添加填充，你会碰到一个相关的问题。你最终的内容总是希望你无限地滚动到右边，因为块继续填充页面然后填充页面。 – jathanism

我不能投票给你，因为我没有足够的代表声音，我会当我这样做，并接受我什么时候能够:) – nvcode

@nvcode;第一件事div是block元件& block元件默认采用其全角parent。所以，如果你给padding & margin它不会影响结构。但有些原因，你定义width:100% &想要padding它，那么你可以使用box-sizing: border-box财产为此。

div{ 
     width:100%; 
     padding-left:2%; 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box;   /* Opera/IE 8+ */ 
}

检查这个http://www.quirksmode.org/css/box.html

，但它不是在IE7工作。

来源

2011-10-12 03:09:16 sandeep

所有比喻中的CSS百分比宽度和百分比填充错误？

回答

相关问题