<noframes id="7xbfr"><pre id="7xbfr"><output id="7xbfr"></output></pre>

      <big id="7xbfr"><font id="7xbfr"><listing id="7xbfr"></listing></font></big>
        <p id="7xbfr"></p>
        <menuitem id="7xbfr"></menuitem>

          <video id="7xbfr"><mark id="7xbfr"><listing id="7xbfr"></listing></mark></video>
            <form id="7xbfr"></form>

          <delect id="7xbfr"><var id="7xbfr"></var></delect>

          div嵌套引起的margin-top不起作用

          時間:2019-11-21 09:14:49 類型:HTML/CSS
          字號:    

          大家在制作網頁的過程中有時會遇到div嵌套引起的margin-top不起作用,對內部的div設置margin-top時,內部對于外部的div并沒有產生一個margin值,而是外部的div相對于上面的div產生了一個margin值,為什么會出現這種情況??

          這是因為嵌套div中margin-top出現轉移,在部分瀏覽器中,兩個嵌套的div,如果外層父元素div的padding值為0,那么內層div的margin-top,margin-bottom值都會轉移到父元素也就是外層div身上。

          <head>
              <title></title>
              <style type="text/css">
              * {
                  padding: 0;
                  margin: 0;
              }
          
              .div1 {
                  height: 500px;
                  width: 100%;
                  background: #ccc;
              }
          
              .div2 {
                  height: 100px;
                  width: 100px;
                  background: red;
                  margin-top: 100px;
              }
              </style>
          </head>
          
          <body>
              <div class="div1">
                  <div class="div2"></div>
              </div>
          </body>

          由代碼可看出,div1嵌套div2,對div2設置margin-top是100px;

          2.jpg

          解決辦法:

          1.  給父元素div1設置一個padding值

          .div1{	height: 500px;	width: 100%;	background: #ccc;	padding-top: 1px;	}

           2.jpg

          2. 給父元素div1設置一個overflow:hidden;在不加overflow:Hidden;的時候,margin-top:這個屬性是認不到邊的,也就是失效。但是ie瀏覽器解決了這個問題,火狐、谷歌之類的就會出現失效,所以這是個標準問題,也是個兼容問題。

          .div1{	height: 500px;	width: 100%;	background: #ccc;	overflow: hidden;	}


          黄网站免费 <