Question

.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的用途是什么？

Answer 1

当您在CSS中有多个“宽度”或“高度”规格并希望覆盖使用哪一个时，使用“！important”。否则，默认值是使用最新规范。偏好是不需要“！important”，但它适用于那些特殊情况。另请注意，某些旧版浏览器不支持它（例如IE6）。

例如：

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

但是使用！important ...

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

Answer 2

!important用于覆盖具有相同或更低特定性的相同元素的相同参数的其他CSS规则（谷歌特定，可以与“CSS选择器的复杂性”进行比较），例如，在Wordpress中覆盖已经在主题CSS中定义的设置，您不能或不想更改这些设置。有时人们只是在他们不知道还能做什么时才使用它来覆盖其他设置，这是不好的做法......

但是，在您的特定示例中，它完全没有用 - 在它完全没有任何用途之前已经是100%，因为100％宽度是块元素的默认设置，而且100 ％height需要与要关联的父元素的已定义height设置，在这种情况下不存在。

宽度有什么用：100％！重要和高度：100％！在CSS中很重要？

2 个答案: