CSS 中的 width:100%!important 和 height:100%!important 有什么用？答案

【问题标题】：What is the use of width:100%!important and height:100%!important in CSS?CSS 中的 width:100%!important 和 height:100%!important 有什么用？
【发布时间】：2017-12-04 23:18:38
【问题描述】：

.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，这两个块的高度和宽度也是相同的。那么实际上width:100%!important和height:100%!important在CSS中有什么用呢？

【问题讨论】：

在这种情况下，没有必要使用!important，一般情况下你不应该使用!important。选择器特异性就足够了。
所以不应该使用!important？正确的？但是我看到很多人经常使用它...不知道为什么？ :(@瑞安
这是一个非常糟糕的做法：它禁止其他不重要的样式覆盖此样式。和使用内联样式一样糟糕。
不，@SifaturRahman，!important 和内联样式都不会被弃用。
想想老式的属性。由于许多有用的网站仍在使用它们，它们仍然存在。就像这样：text

标签： css css-selectors css-specificity

【解决方案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;
}

【讨论】：

【解决方案2】：

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

但是，在您的特定示例中，它根本没有用 - 在它根本没有任何用处之前已经是 100%，因为无论如何 100% 宽度是块元素的默认设置，而 100% 高度需要定义要关联的父元素的height 设置，在这种情况下不存在。

【讨论】：

hmm... 作为一个块元素覆盖 100% 的宽度和 100% 的高度...我同意我不应该使用它.. 但我需要知道区别。
auto 是块元素的默认宽度，而不是 100%。只有在没有边距、边框或填充（对于 box-sizing:content-box）或只是没有边距（对于 box-sizing:border-box）时，它们才相同。
默认情况下它不会覆盖 100% 高度。默认情况下，高度由其内容决定 - 就像问题中的示例一样，由于父元素没有定义的高度，因此 100% 高度没有任何影响。
是的，明白兄弟。只要子元素未设置为绝对位置，子元素就不会超过父元素的空间..我是对的.. broz？