box-sizing：边框框；应该防止侧滚动？

Question

我目前正在做 The Odin Project，我的任务是制作 Google 主页。我遇到了一个我不知道如何解决的问题。我想通过添加 box-sizing:borderbox;页面不会比使用curenlty的屏幕更大。换句话说，我的谷歌页面非常宽。这是我在 github 上的项目：https://github.com/JohnEnglund/google-homepage

Answer 1

box-sizing: borderbox; 属性的工作方式与您想象的不同。据W3：

box-sizing 属性定义了如何计算元素的宽度和高度：它们是否应该包括内边距和边框。

border-box：宽度和高度属性（以及最小/最大属性）包括内容、内边距和边框

所以，将这个属性添加到你的 CSS 中只是让浏览器能够（来自MDN）：

考虑您为元素的宽度和高度指定的值中的任何边框和填充。如果您将元素的宽度设置为 100 像素，则该 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常可以更轻松地调整元素的大小。

最后，如果您的页面超宽是因为您的 CSS 文件中的一些错误配置。尝试在您的元素中添加背景颜色以查看它们的宽度。这是一个很好的 CSS 调试工具。

Answer 2

问题不在于边框属性，而在于内部元素的宽度。主要问题是您定位元素的方法。您应该避免以像素为单位定义顶部、右侧等位置。相反，如果它们是一个问题，请使用边距并尝试减少元素的宽度： 以下是我所做的一些修改：

• style.css

header {
  display: flex;
  /* width: 90%; */
  height: 4.8vh;
  /* margin: auto; */
  /* align-items: center; */
  margin: 10px;
  position: relative;
}

.profile-pic {
  /* position: relative; */
  /* left: 92%; */
  border-radius: 50%;
  height: 4.8vh;
}

/* .burger-menu {
  position: relative;
  left: 1080px;
}
nav {
  position: relative;
  left: 1072px; 
} */

.logo img {
  height: 92px;
  width: 272px;
  margin:auto;
  /* text-align: center; */
}

.logo {
  padding-top: 47px;
  /* position: relative; */
  text-align: center;
  /* left: 500px; */
  top: 25px;
}

.language {
  font-size: small;
  position: relative;
  /* left: 590px; */
  text-align: center;
}

.ending {
  display: flex;
  list-style: none;
  position: relative;
  /* right: 880px; */
  flex: 2;
  padding-left : 50px;
}
.btm-navlinks {
  margin-right: 30px;
  color: rgba(0, 0, 0, 0.54);
}

在标题元素周围添加一个 div 包装器以将它们向右移动：

• index.html

    <header>
      <div class="header-wrap">
        <nav>
          <ul class="nav-links">
            <li><a class="nav-link1" href="#">Gmail</a></li>
            <li><a class="nav-link2" href="#">Bilder</a></li>
          </ul>
        </nav>
        <div class="burger-menu">
          <a href="#"
            ><img
              class="burger-menulink"
              src="./Pictures/Skärmavbild 2020-07-07 kl. 17.33.43.png"
              alt="burger-menu"
          /></a>
        </div>
        <div class="profile-pic">
          <a href="#"
            ><img
              class="profile-pic"
              src="https://lh3.googleusercontent.com/ogw/ADGmqu_I3j_aWjRLGl97SmvJwotO5yAsUOC4AmXnL7MK=s192-c-mo"
              alt="profile picture"
          /></a>
        </div>
      </div>
    </header>

• style.css

.header-wrap{
  position: absolute;
  right:2%;
  display: flex;
  align-items: center;
}

另外，在输入文本上添加外部图像不是一个好习惯，请尝试使用背景属性

• style.css

.form-control-search {
  display: flex;
  border: 1px solid #dfe1e5;
  box-shadow: none;
  border-radius: 24px;
  z-index: 3;
  height: 44px;
  margin: 0 auto;
  width: 50%;
  outline: none;
  margin-top: 40px;
  font-size: 17px;
  background-image: url(./Pictures/mglass.svg), url(./Pictures/voice_icon.svg);
  background-position: left, right;
  background-repeat: no-repeat,no-repeat;
  padding:0 4% ;
}
.form-control-search:hover {
  box-shadow: 0 0 11px #dfe1e5;
}

/* .mglass-pic svg {
  height: 3vh;
}
.mglass-pic {
  position: relative;
  bottom: 90px;
  left: 360px;
  width: 3vh;
} */

/* .icon svg {
  height: 5vh;
}
.icon svg {
  position: relative;
  bottom: 122px;
  left: 890px;
  width: 4vh;
} */

删除图像的 div，并在按钮周围添加一个按钮包装器：-

• index.html

      <form
        action="https://www.google.com/search"
        class="search-form"
        method="get"
        name="serachform"
        target="_blank"
      >
        <input name="sitesearch" type="hidden" />
        <input
          type="text"
          autocomplete="on"
          class="form-control-search"
          name="q"
          required
        />
        <div class="button-wrap">
          <button class="button" type="submit">Sök på Google</button>
          <button class="button" type="submit">Jag har tur</button>
        </div>  
      </form>
<!-- <div class="mglass-pic">
        <svg
          focusable="false"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <path
            d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
          ></path>
        </svg>
      </div>
      <div class="icon">
        <svg
          class="HPVvwb"
          focusable="false"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"
            fill="#4285f4"
          ></path>
          <path d="m11 18.08h2v3.92h-2z" fill="#34a853"></path>
          <path
            d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"
            fill="#f4b400"
          ></path>
          <path
            d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"
            fill="#ea4335"
          ></path>
        </svg>
      </div> -->

• style.css

.button-wrap{
  margin: 10px auto;
  width: fit-content;
}

同时将两张 svg 图片保存在 Pictures 文件夹中，分别命名为 mglass.svg 和 voice_icon.svg

你很高兴……

PS :- 仅在需要时使用position:relative