时间戳

首页 > 解决方案 > 如果我使用最大宽度，为什么要使用宽度？

html - 如果我使用最大宽度，为什么要使用宽度？

问题描述

我只是在课程中学到了它，并不太了解其中的逻辑。我必须设置一个宽度：100%；对于一个容器，然后设置一个 max-width:800px; 所以它不会比这更大。

但是我为什么要使用 width:100%; 有吗？我只能设置 max-width:800px; 它会在没有宽度的情况下做同样的事情：100%；

标签： htmlcss

解决方案

我只能设置 max-width:800px; 它会在没有宽度的情况下做同样的事情：100%；

如果您的元素可以扩展的可用宽度小于或等于 800 像素，它将执行完全相同的操作。

如果您提供宽度 100% 并且屏幕分辨率为 1024 像素，则您的元素的宽度将是 1024 像素（前提是您没有提及max-width）；

max-width:800px会将元素的宽度限制为 800px。这意味着即使有扩展空间，您的元素也将始终小于或等于 800px。

行为也会随着块级和行内块元素的变化而变化。

很少有块级和行内块元素的例子

#one {
  width: 100%;
  background-color: red;
}

#two {
  width: 100%;
  max-width: 300px;
  background-color: blue;
}

#three {
  max-width: 300px;
  background-color: green;
  display: inline-block;
}

#four {
  max-width: 300px;
  background-color: purple;
  width: 100%;
  display: inline-block;
}

div {
  margin-top: 10px;
}
<div id="one">width 100%; no max-width; block element</div>


<div id="two">width 100%;max-width: 300px; My width will be always less &lt;=300px; block level element</div>
<br />
<span>With display : inline-block without width:100%</span><br />
<div id="three">300px;</div>

<div>With display : inline-block with max-width:300px and width:100%</div>

<div id="four">300px;</div>

推荐阅读