框大小:BorderBox； 要防止侧卷吗？

Question

我目前正在做奥丁项目，我的调整是为了使谷歌主页。 Iv'e遇到了一个我不知道如何解决的问题。 我想通过添加box-sizing:borderbox； 页面的扩展不会大于im使用curenlty IS的屏幕。 换句话说，我的谷歌页面是超宽的。 下面是我在GitHub上的项目:https://github.com/johnenglund/google-homepage

Answer 1

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

• 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

Answer 2

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

box-sizing属性定义如何计算元素的宽度和高度:它们是否包括填充和边框。

Border-Box:width和height属性（以及Min/Max属性）包括内容，填充和边框

因此，将此属性添加到CSS只需赋予浏览器以下功能（来自MDN）:

以说明为元素的宽度和高度指定的值中的任何边框和填充。 如果您将元素的宽度设置为100像素，则该100像素将包括您添加的任何边框或填充，内容框将收缩以吸收额外的宽度。 这通常使调整元素大小变得更加容易。

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