CSS兒童寬度100％或px問題

也許一個簡單的問題，一個簡單的答案。CSS兒童寬度100％或px問題

今天我不知道是什麼在像素或100％的孩子寬度之間的差異，當孩子將是完全相同的寬度父。結果將是我所知道的，但最好使用什麼？

示例;

div {width: 300px;} 
h1 {width: 300px;} /*or..*/ 
h1 {width: 100%;} 

<div> 
<h1>Width of child</h1> 
</div>

重要嗎？你使用哪個？

來源

2011-04-04 Basic

在視覺上，您的兩個例子看起來是一樣的。

但使用寬度：100％的子元素意味着如果你想改變兩者的寬度，你只需要改變父元素的寬度。

還要注意，H *標籤是塊級元素，因此，在默認情況下，它已經在你的榜樣設置爲100％的寬度，因此，設置任何寬度H1是多餘的。

來源

2011-04-04 20:54:36

謝謝你。正是我所需要的，我會盡可能地接受它作爲答案。 – Basic 2011-04-04 20:58:29

不，塊級元素的典型瀏覽器默認值是{width：auto;}，它的功能與百分比寬度不同（更好，IMO - 請參閱我的答案）。順便說一句，默認樣式屬性是瀏覽器特定的，而不是正式標準的一部分;儘管有些屬性有W3C推薦的*默認值，請參閱http://www.w3.org/TR/CSS2/sample.html – Faust 2011-04-05 07:36:15

是的，很好的說明，Snake。 – 2011-04-05 13:00:46

如果使用100％，那麼這是隨着時間的變化母公司的寬度少了一個修改。所以使用100％可以讓你的CSS更易於維護。

來源

2011-04-04 20:55:23

我不同意。 100％意味着孩子的內容區域是父母的內容區域的100％ - 所以如果您爲孩子添加邊框或填充，整個對象（內容區域+邊框+填充）將需要突出到父級之外。這是一個常見的CSS錯誤。一旦相關瀏覽器完全支持CSS3 box-sizing，您將可以應用{box-sizing：border-box}和*僅當時*將百分比寬度維護得很好。這是一個方法：http://caniuse.com/css3-boxsizing – Faust 2011-04-05 07:15:57

又如：它可以使哪個元素你會實際應用一個固定大小的背景圖像的差異。在這種情況下使用px，因此佈局上的修改不會破壞圖像。正如Babak已經說過的那樣，它只適用於以後的修改。

來源

2011-04-04 20:59:55 thmshd

還有就是既是更好的選擇：

{width:auto;}

...的子元素。

對於您的示例，如果您決定將填充或邊框應用於子項（h1），則{{width：100％}}或{width：300px}將會在其容器外溢出。在你使用像素寬度的時候，你需要從子寬度中減去（padding-left + padding-right + border-left + border-right）的總和，使它適合內部，貼合。在百分比寬度的情況下，您必須進行一次適當的計算才能得出正確的百分比（並且可能仍然有點關鍵）。

但是{width：auto}會自動計算填充和邊框，並且其計算的寬度將會小於容器的適當量，以便H1上邊框的外邊緣保持在您的內容區域內DIV。

來源

2011-04-04 21:14:37 Faust

順便說一句：「auto」是大多數瀏覽器中大多數塊級元素的默認寬度。 – Faust 2011-04-04 21:18:08

CSS兒童寬度100％或px問題

回答

相關問題