什麼是寬度的使用：100％！重要和高度：100％！在CSS中很重要？

-2

.full-block { 
 
    display: block; 
 
} 
 

 
h1 { 
 
    margin-left: 10px; 
 
    font-family: "Open Sans", Arial, sans-serif; 
 
} 
 

 
.block-1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    display: inline-block; 
 
    color: #fff; 
 
} 
 

 
.block-2 { 
 
    width: 100%!important; 
 
    height: 100%!important; 
 
    background-color: #6a9e77; 
 
    display: inline-block; 
 
}

<div class="full-block"> 
 
    <div class="block-1"> 
 
    <h1>BLOCK 1</h1> 
 
    </div> 
 
    <div class="block-2"> 
 
    <h1>BLOCK 2</h1> 
 
    </div> 
 
</div>

正如你可以看到這兩個區塊的高度和寬度是相同的，即使使用 !important。所以實際上在CSS中使用 width:100%!important和 height:100%!important是什麼？

來源

2017-06-30 Sifatur Rahman

在這種情況下，不需要使用'！important'，而且一般情況下你不應該使用'！important'。選擇者特異性就足夠了。 – Ryan

所以'重要'不應該使用？對？但我看到很多人使用這個很多...不知道爲什麼？ :(@Ryan –

這是一個非常糟糕的做法：它禁止其他風格不重要，以覆蓋這種風格就像使用內聯風格一樣壞 –

當您在CSS中有多個「寬度」或「高度」的規範並且想要覆蓋使用哪一個時，將使用「！important」。否則，默認是使用最新的規格。偏好是不需要「！重要」，但它適用於那些特殊情況。另請注意，一些較舊的瀏覽器不支持它（如IE6）。

例如：

.obj 
{ 
width:600px; 
width:800px; /* This one is used*/ 
}

但使用的重要...

.obj 
{ 
width:600px !important; /* This one is used */ 
width:800px; 
}

來源

2017-06-30 23:24:45 Josh

!important用來覆蓋其他CSS規則具有相同的同一元素/秒的相同的參數或更低的特定性（谷歌的特定性，它可以與「CSS選擇器的複雜性」進行比較），例如在Wordpress中覆蓋已經在主題CSS中定義的設置，您不能或不想更改。有時候人們只是用它來覆蓋其他設置，當他們不知道該怎麼辦時，這是不好的做法......

但是，在你的特定例子中，它根本沒有用處 - 已經是100%根本沒有任何用處，因爲無論如何100％寬度是塊元素的默認設置，並且100％高度需要定義與父元素相關的設置，在這種情況下該設置不存在。

來源

2017-06-30 23:30:43 Johannes

嗯...作爲一個塊元素覆蓋100％的寬度和100％的高度......我同意我不應該使用..但我需要知道區別。 –

'auto'是塊元素的默認寬度，不是100％。如果沒有邊距，邊框或填充（對於框尺寸：內容框）或僅有無邊距（對於框尺寸：邊框），它們只是相同的。 – Alohci

默認情況下它不包括100％*高度*。默認情況下，高度由其內容決定 - 就像問題中的示例一樣，由於父元素沒有定義的高度，所以100％高度沒有任何影響。 – Johannes

什麼是寬度的使用：100％！重要和高度：100％！在CSS中很重要？

回答

相關問題