Question

我大多数代码都放在div中，这样我就可以在主页背景上为其设置单独的背景色。我实质上是在尝试重新创建此页面：https://codepen.io/freeCodeCamp/full/VPaoNP

但是，由于某种原因，即使我的标头不在div中，并且html的标头上方也没有同名的div，但div背景颜色也会散布到标头周围。为什么会发生这种情况有帮助吗？这是我的链接，以确切了解我的意思：https://codepen.io/freeCodeCamp/pen/MJjpwO?editors=1100

我希望背景颜色#fcfcfc仅位于div中，而不位于标头上方。实际上，它是用该背景色创建两个单独的部分，即div区域和标题上方的空白区域。

#title{
          text-align: center;
         }
        #description{
          text-align: center;
        }

        #name-label{
           display: inline-block;
          width: 25%;
          text-align: right;
        }
        #name {
          width: 50%;
          padding: 8px 8px;
          margin: 10px;
          box-sizing: border-box;
          border: none;
          display: inline-block;
          float: center;
        }
        #email-label{
           display: inline-block;
          width: 25%;
          text-align: right;
        }
        #email {
           width: 50%;
          padding: 8px 8px;
          margin: 10px;
          box-sizing: border-box;
          border: none;
          display: inline-block;
          float: center;
        }
        #number-label{
          display: inline-block;
          width: 25%;
          text-align: right;
        }
        #number{
           width: 50%;
          padding: 8px 8px;
          margin: 10px;
          box-sizing: border-box;
          border: none;
          display: inline-block;
          float: center;
        }
        body {
          background: #d9f5fc;
          font-family: "Quicksand", sans-serif;
        }
        div {
          background: #fcfcfc;
          padding: 40px;
          width: 800px;
          margin: auto;
          border-radius: 5px;
          box-sizing: border-box;
          }

    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">

    <html>
      <link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">

    <body>
      <h1 id="title"> Survey Form</h1>
      <div id="form">
        <p id="description"> Let us know how we can better help you!</p>
        <form id="survey-form">

          <label for id="name-label">*Name:</label>
          <input id="name" type="text" name="name" placeholder="Enter your name" required>
          <br>
          <label for id="email-label">*Email:</label>
          <input id="email" type="email" name="email" placeholder="Enter your email" required>
          <br>
          <label for id="number-label">*Age:</label>
          <input id="number" type="number" min="15" max="110" name="age" placeholder="Enter your age" required>
          <br>
          Which option best describes your current employment?
          <select id="dropdown">
            <option value="student">Student</option>
            <option value="full time employement">Full Time Employment</option>
            <option value="part time employment">Part Time Employment</option>
            <option value="secret">It's a Secret...</option>
            <option value="other">Other</option>
          </select>


          *How likely is it that you would recommend us to a friend? 
             <id="recommend">
          <input id="very" type="radio" name="likelyhood" value="Very">
            <label for="very">Very</label>
            <br>
          <input type="radio" name="likelyhood" value="Somewhat">
            <label for="somewhat">Somewhat</label> 
            <br>
            <input type="radio" name="likelyhood" value="Not Very"> 
            <label for="notvery">Not Very</label>


          <br>
          What do you like most about our site?
          <select id="dropdown2">
                  <option value="navigation">Navigation</option>
                  <option value="colorscheme">Color Scheme</option>
                  <option value="options">Options Offered</option>
                  <option value="other">Other</option>
          </select>
          <br>
          <br>
          Things that you'd like to see Improved in the Future (Check all that Apply):
          <br>
          <input type="checkbox" name="improvements" value="sizes">More Sizes <br>
           <input type="checkbox" name="improvements" value="styles">More Styles <br>
           <input type="checkbox" name="improvements" value="colors">More Colors <br>
           <input type="checkbox" name="improvements" value="helptime">Quicker Help Response Time <br>
           <input type="checkbox" name="improvements" value="quality">Better Quality <br>
           <input type="checkbox" name="improvements" value="sustainability">Improved Sustainability <br>
          <br>
          Any Comments or Suggestions? Let us know! 
          <textarea rows="5" cols="40"> Enter your comments here...
          </textarea>
          <br>
          <input id="submit" type="submit"
          </form>
               </div>

    </html>

Answer 1

不是标头被视为div。在添加了脚本标记（带有freecodecamp src的标记）的地方，它在代码中插入了一个div。由于他们插入的div除了侧面的3条线外没有其他宽度或高度，因此您的文字经过了它。但是，当您为div提供背景颜色和宽度/填充时，它会同时影响div和freecodecamp div。一种简单的解决方案是将div从CSS更改为#form。

div {
    background: #fcfcfc;
    padding: 40px;
    width: 800px;
    margin: auto;
    border-radius: 5px;
    box-sizing: border-box;
 }

基本上，由于他们有一个div，因此您拥有的背景同时适用于他们的div和您的div。给div一个类，或使用现有的ID（form），然后仅将背景应用于该类。

Answer 2

这是我为了使您的页面按预期工作而进行的更改：

从下面的代码中删除<html>。 <html>标签应直接位于页面（或输出）第一行的<!DOCTYPE html>标签下方。

<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <html>
      <link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">
<body>

在</head>标签之前添加<body>

  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">
</head>    
<body>

关闭页面底部的</body>标签：

  </div>
</body>    
</html>

基本的html结构：

<!DOCTYPE html>
<html lang-"en"> 
<head>
 ... title, scripts, css/links, meta tags
</head>
<body>
 ... page content
</body>
</html>

为什么我的div背景与标题分开？

2 个答案: