这是保证金崩溃的问题吗？其他人如何最佳地解决这个问题

时间：2019-04-19 10:55:30

标签： html css

我正在学习HTML和CSS，遇到了一个问题，兄弟姐妹元素之间的差距越来越大。

我已经对堆栈溢出和网络进行了一些搜索，并相信这是由边距崩溃引起的。

我在CSS中添加了三行注释掉的行（ .home-section 选择器中的两行， .products-section 选择器中的一行），而这些分别似乎可以解决问题，但我不知道这些解决方案是否是最佳解决方案，或者我是否在其他地方未正确构建代码。我不想养成不良习惯。

任何帮助都将不胜感激，如果您能指出我关于该主题的任何面向初学者的读物，那也将是很棒的。

Codepen

HTML 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Archivo+Black|Montserrat:400,800|Sacramento" rel="stylesheet">

    <title>Test banner</title>

  </head>

  <body>

    <header class="banner">

      <div class="logo">
        <img src="../images/iconfinder_umbrella-rain-summer-sun-protection_2189569.svg" alt="Umbrella logo">
      </div>

      <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#products">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li class="collapsed-menu"><a href="#"><i class="fas fa-bars fa-lg"></i></a></li>
      </ul>

    </header>

    <section id="home" class="home-section">

      <div class="text-block">
        <h6>What we do</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </div>

    </section>

    <section id="products" class="products-section">
      <div class="product1">
        <h6>Product 1</h6>
      </div>
    </section>

  </body>
</html>

CSS 

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

.banner {
  height: 7vh;
  width: 100vw;
  background-color: #096386;
  position: fixed;
  z-index: 10;
  top: 0;
}

.logo {
  margin-left: 3vw;
  height: 7vh;
  line-height: 7vh;
  display: inline-block;
}
.logo img {
  height: 6vh;
  vertical-align: middle;
}

.nav {
  float: right;
  list-style: none;
  margin-right: 3vw;
  line-height: 7vh;
}
.nav li {
  display: inline-block;
  font-size: 1.5em;
  margin: auto;
}
.nav li a {
  margin: 1vh;
  color: #f0eec8;
  text-decoration: none;
  padding: 0.5vh 1vh;
}
.nav li a:hover {
  background-color: #f0eec8;
  padding: 0.5vh 1vh;
  border-radius: 3px;
  color: #096386;
}
.nav li a i {
  color: #f0eec8;
}
.nav .collapsed-menu {
  display: none;
}

.home-section {
  height: 100vh;
  width: 100vw;
  //border: 1px red solid;
  //margin-bottom: -15vh;
}
.home-section::after {
  content: "";
  height: 100vh;
  background-color: lightblue;
  opacity: 0.6;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.home-section .text-block {
  width: 40vw;
  margin-top: 15vh;
  margin-left: 10vh;
  padding: 2vh;
  position: relative;
  max-height: 70vh;
  overflow: hidden;
}
.home-section .text-block::after {
  content: "";
  background-color: #b3b3b3;
  border-radius: 3vh;
  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.home-section .text-block h6 {
  font-family: "Archivo Black", sans-serif;
  font-size: 3em;
  padding-bottom: 1vh;
}
.home-section .text-block p {
  opacity: 1;
  font-size: 1.3em;
  text-align: justify;
}

.products-section {
  height: 100vh;
  width: 100vw;
  background-color: #f0eec8;
  z-index: 20;
  //margin-top: -15vh;
}

/*# sourceMappingURL=main.css.map */

2 个答案:

答案 0 :(得分：0)

如果您使用position:absolute;使用：before或：after伪元素，那么您需要将父项设置为position:relative;，并根据标题高度更改margin-top:7vh;和其他填充更改

您可以从cssnewbie和here引用margin-padding 

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

.banner {
  height: 7vh;
  width: 100vw;
  background-color: #096386;
  position: fixed;
  z-index: 10;
  top: 0;
}

.logo {
  margin-left: 3vw;
  height: 7vh;
  line-height: 7vh;
  display: inline-block;
}
.logo img {
  height: 6vh;
  vertical-align: middle;
}

.nav {
  float: right;
  list-style: none;
  margin-right: 3vw;
  line-height: 7vh;
}
.nav li {
  display: inline-block;
  font-size: 1.5em;
  margin: auto;
}
.nav li a {
  margin: 1vh;
  color: #f0eec8;
  text-decoration: none;
  padding: 0.5vh 1vh;
}
.nav li a:hover {
  background-color: #f0eec8;
  padding: 0.5vh 1vh;
  border-radius: 3px;
  color: #096386;
}
.nav li a i {
  color: #f0eec8;
}
.nav .collapsed-menu {
  display: none;
}

.home-section {
  height: 100vh;
  width: 100vw;
  position:relative;
  padding: 2vh 0vh;
}
.home-section::after {
  content: "";
  height: 100vh;
  background-color: lightblue;
  opacity: 0.6;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.home-section .text-block {
  width: 40vw;
  margin-top: 7vh;
  padding-top:7vh;
  margin-left: 10vh;
  padding: 2vh;
  position: relative;
  max-height: 70vh;
  overflow: hidden;
}
.home-section .text-block::after {
  content: "";
  background-color: #b3b3b3;
  border-radius: 3vh;
  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.home-section .text-block h6 {
  font-family: "Archivo Black", sans-serif;
  font-size: 3em;
  padding-bottom: 1vh;
}
.home-section .text-block p {
  opacity: 1;
  font-size: 1.3em;
  text-align: justify;
}

.products-section {
  height: 100vh;
  width: 100vw;
  background-color: #f0eec8;
  z-index: 20;
  //margin-top: -15vh;
}

/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Archivo+Black|Montserrat:400,800|Sacramento" rel="stylesheet">

    <title>Test banner</title>

  </head>

  <body>

    <header class="banner">

      <div class="logo">
        <img src="../images/iconfinder_umbrella-rain-summer-sun-protection_2189569.svg" alt="Umbrella logo">
      </div>

      <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#products">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li class="collapsed-menu"><a href="#"><i class="fas fa-bars fa-lg"></i></a></li>
      </ul>

    </header>

    <section id="home" class="home-section">

      <div class="text-block">
        <h6>What we do</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        
      </div>

    </section>

    <section id="products" class="products-section">
      <div class="product1">
        <h6>Product 1</h6>
      </div>
    </section>

  </body>
</html>

答案 1 :(得分：0)

是的，这是保证金问题。另外，您的大多数东西彼此之间距离太近。元素需要空间来“呼吸”。我真的很喜欢您的部分占据了整个屏幕，例如。

以下是一些准则：

•使用字体大小作为距离。将正文文本的字体设置为16px，然后将“ 1rem”用于任何种类的距离。从文本到边框，从元素到元素，从父元素到子元素，等等。
•使用 padding 代替 margin 。如果您需要放置诸如.text-block中的.home-section之类的东西，请对.home-section使用 padding 代替其子元素中的 margins 。
•使用 min-width 和 min-height 代替 width 和 height ，除非元素溢出时布局中断

这是我写的书籍布局指南，但大多数也适用于网页：

http://www.erebaltor.se/rickard/typography/

请注意，所有这些都是准则。有时您需要打破它们。

相关问题
最新问题