亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS margin全面了解

  發(fā)布時(shí)間：2016-07-21 08:48:25   作者：佚名   我要評(píng)論
下面小編就為大家?guī)硪黄狢SS margin全面了解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦

一、margin可以為負(fù)值

在盒模型中，內(nèi)容區(qū)的width/height、padding、border都不能為負(fù)值，但是margin例外，它可以為負(fù)值。

關(guān)于margin負(fù)值的使用技巧，了解不多，日后有機(jī)會(huì)再補(bǔ)充，此處先貼一個(gè)經(jīng)典應(yīng)用，margin-left負(fù)值結(jié)合浮動(dòng)實(shí)現(xiàn)不改變DOM結(jié)構(gòu)的流體布局。

此demo與CSS float淺析篇中的是同一個(gè)。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>不改變DOM結(jié)構(gòu)的流體布局</title>  
  6.         <style>  
  7.             .container {   
  8.                 width:600px;   
  9.                 margin-left: auto;   
  10.                 margin-right: auto;   
  11.                 background-color: orange;   
  12.                 font-size: 16px;   
  13.                 line-height: 1.5;   
  14.             }   
  15.   
  16.             .box1 {   
  17.                 width:100%;   
  18.                 float:left;   
  19.             }   
  20.   
  21.             .box2 {   
  22.                 margin-right: 220px;   
  23.                 padding-left: 20px;   
  24.             }   
  25.   
  26.             img {   
  27.                 width:200px;   
  28.                 float:left;   
  29.                 margin-left:-200px;   
  30.             }   
  31.   
  32.             .clearfix:after {   
  33.                 content: "";   
  34.                 display: table;   
  35.                 clear: both;   
  36.             }   
  37.   
  38.             .clearfix {   
  39.                 *zoom: 1;   
  40.             }   
  41.   
  42.         </style>  
  43.     </head>  
  44.     <body>  
  45.         <div class="container clearfix">  
  46.             <div class="box1">  
  47.                 <div class="box2">  
  48.                 <h3>不改變DOM位置的流體布局</h3>  
  49.                 <p>假如有一段文本和一幅圖像，在DOM節(jié)點(diǎn)中，文本在前，圖像在后，怎么能把圖像定位到右邊呢？</p>  
  50.                 <p>通常的做法是，調(diào)換DOM節(jié)點(diǎn)中圖像與文本的位置，讓圖像在前，文本在后，然后將圖像浮動(dòng)到右邊即可。</p>  
  51.                 <p>但這樣改變DOM節(jié)點(diǎn)順序始終不妥，還有什么更好的方法呢？</p>  
  52.                 <p>下面就介紹一種新的思路來完成布局。</p>  
  53.                 <ul>  
  54.                     <li>將文本用div包起來，定義為box1；現(xiàn)在的結(jié)構(gòu)是一個(gè)box1和一個(gè)img。</li>  
  55.                     <li>將box1寬度設(shè)為100%，左浮動(dòng)；將img設(shè)置一個(gè)寬度，也左浮動(dòng)，然后margin-left設(shè)為負(fù)的寬度值；此時(shí)圖像就定位到文本的右邊啦。</li>  
  56.                     <li>但是有一個(gè)問題，圖像蓋住了文本內(nèi)容，這可怎么辦？</li>  
  57.                     <li>重點(diǎn)來了，在box1中增加一個(gè)box2，box2把文本全部包起來，然后margin-right設(shè)為圖像的寬度（+額外的間距），這樣就解決問題啦！</li>  
  58.                 </ul>  
  59.                 </div><!--關(guān)閉box2-->  
  60.             </div><!--關(guān)閉box1-->  
  61.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />  
  62.         </div><!--關(guān)閉container-->  
  63.     </body>  
  64. </html>  

二、margin的百分比數(shù)值

當(dāng)margin屬性的值為百分?jǐn)?shù)時(shí)，其總是以父元素的width為基數(shù)進(jìn)行計(jì)算。

請(qǐng)看下面這個(gè)demo，當(dāng)初折磨了我N久的。。。只怪我知道得太晚了，說多了都是淚啊。。。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>margin的百分?jǐn)?shù)值</title>  
  6.         <style>  
  7.             .container {   
  8.                 width: 500px;   
  9.                 height: 300px;   
  10.                 margin: 50px auto;   
  11.                 background-color: orange;   
  12.                 border: 1px solid black;   
  13.             }   
  14.   
  15.             .box {   
  16.                 width: 250px;   
  17.                 height: 150px;   
  18.                 margin-left: auto;   
  19.                 margin-right: auto;   
  20.                 background-color: cyan;   
  21.             }   
  22.   
  23.             .box1 {   
  24.                 margin-top: 75px;   
  25.                 margin-bottom: 75px;   
  26.                 padding: 5px;   
  27.             }   
  28.                
  29.             .box2 {   
  30.                 margin-top: 25%;   
  31.                 margin-bottom: 25%;   
  32.                 padding: 5px;   
  33.             }   
  34.         </style>  
  35.     </head>  
  36.   
  37.     <body>  
  38.         <div class="container">  
  39.             <div class="box box1">  
  40.                 <p>父元素的高度為300px，子元素的高度為150px，只要margin-top和margin-bottom都為75px，這個(gè)盒子就能垂直居中。</p>  
  41.                 <p>OK，居中啦?。?！</p>  
  42.             </div>  
  43.         </div>  
  44.         <div class="container">  
  45.             <div class="box box2">  
  46.                 <p>既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都為25%，應(yīng)該也能垂直居中。</p>  
  47.                 <p>額，這什么鬼？說好的居中呢？</p>  
  48.             </div>  
  49.         </div>  
  50.     </body>  
  51. </html>  

三、垂直方向上margin的合并

這個(gè)問題經(jīng)常造成一些困惑，不過只需要記住一句話即可，垂直方向上的margin只要親密接觸就會(huì)合并，也只有親密接觸才會(huì)合并。

垂直方向上margin的合并，如果發(fā)生在相鄰元素，其實(shí)是很好理解的；但是如果發(fā)生在父元素與子元素之間，就有些怪異了。

來看例子：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>垂直方向上的margin合并</title>  
  6.         <style>  
  7.             .container {   
  8.                 width: 500px;   
  9.                 height: 300px;   
  10.                 margin: 50px auto;   
  11.                 background-color: orange;   
  12.             }   
  13.   
  14.             .box {   
  15.                 width: 300px;   
  16.                 height: 200px;   
  17.                 margin-left: auto;   
  18.                 margin-right: auto;   
  19.                 background-color: cyan;   
  20.                 margin-top: 25px;   
  21.                 padding: 5px;   
  22.             }   
  23.   
  24.             .border {   
  25.                 border: 1px solid black;   
  26.                 /*padding: 1px;*/   
  27.             }   
  28.         </style>  
  29.     </head>  
  30.   
  31.     <body>  
  32.         <div class="container">  
  33.             <div class="box">  
  34.                 <p>父元素的margin-top為50px，子元素的margin-top為25px；</p>  
  35.                 <p>咦，子元素的margin-top呢？為什么都頂?shù)礁冈厣线吔缌耍?/span></p>  
  36.                 <p>額，因?yàn)楦冈嘏c子元素的margin-top親密接觸了呀，所以它們合并在一起了啊。</p>  
  37.             </div>  
  38.         </div>  
  39.         <div class="container border">  
  40.             <div class="box">  
  41.                 <p>可是我就是想讓子元素距離父元素的上邊界25px啊，我不想讓它們合并呀。</p>  
  42.                 <p>很簡單，給父元素加個(gè)邊框，它們就無法親密接觸了，就不會(huì)合并了啊。</p>  
  43.                 <p>或者給父元素設(shè)置padding也是可以的喔。</p>  
  44.             </div>  
  45.         </div>  
  46.     </body>  
  47. </html>  

消除垂直方向上margin合并的方法：給父元素加border或者加padding，打破父元素與子元素margin之間的親密接觸即可。

margin合并的規(guī)則：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>margin合并規(guī)則</title>  
  6.         <style>  
  7.             .container {   
  8.                 width: 300px;   
  9.                 height: 500px;   
  10.                 margin: 50px;   
  11.                 background-color: orange;   
  12.                 float: left;   
  13.                 border: 1px solid black;   
  14.             }   
  15.   
  16.             .box1,.box2,.box3,   
  17.             .box4,.box5,.box6 {   
  18.                 width: 200px;   
  19.                 height: 150px;   
  20.                 margin: 30px auto;   
  21.                 background-color: cyan;   
  22.                 text-align: center;   
  23.                 line-height: 150px;   
  24.             }   
  25.   
  26.             .box1 {   
  27.                 margin-bottom: 30px;   
  28.             }   
  29.   
  30.             .box2 {   
  31.                 margin-top: 20px;   
  32.             }   
  33.   
  34.             .box3 {   
  35.                 margin-bottom: 30px;   
  36.             }   
  37.   
  38.             .box4 {   
  39.                 margin-top: -30px;   
  40.             }   
  41.   
  42.             .box5 {   
  43.                 margin-bottom: -30px;   
  44.             }   
  45.   
  46.             .box6 {   
  47.                 margin-top: -50px;   
  48.                 background-color: green;   
  49.             }   
  50.   
  51.             p {   
  52.                 width: 220px;   
  53.                 margin:10px auto;   
  54.                 font-size: 16px;   
  55.                 line-height: 1.5;   
  56.             }   
  57.   
  58.         </style>  
  59.     </head>  
  60.   
  61.     <body>  
  62.         <div class="container">  
  63.             <div class="box1">box1</div>  
  64.             <div class="box2">box2</div>  
  65.             <p>box1的margin-bottom為30px，box2的margin-top為20px，兩個(gè)margin都是正數(shù)，取絕對(duì)值大的。</p>    
  66.         </div>  
  67.         <div class="container">  
  68.             <div class="box3">box3</div>  
  69.             <div class="box4">box4</div>  
  70.             <p>box3的margin-bottom為30px，box4的margin-top為-30px，兩個(gè)margin一正一負(fù)，相加。</p>    
  71.         </div>  
  72.         <div class="container">  
  73.             <div class="box5">box5</div>  
  74.             <div class="box6">box6</div>  
  75.             <p>box5的margin-bottom為-30px，box6的margin-top為-50px，兩個(gè)margin都是負(fù)數(shù)，取絕對(duì)值大的。</p>    
  76.         </div>  
  77.     </body>  
  78. </html>  

1.    兩個(gè)margin都是正數(shù)，取絕對(duì)值大的；

2.    一個(gè)margin是正數(shù)，另一個(gè)margin是負(fù)數(shù)，相加；

3.    兩個(gè)margin都是負(fù)數(shù)，取絕對(duì)值大的。

以上這篇CSS margin全面了解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/cc156676/archive/2016/07/21/5690270.html

相關(guān)文章

  • CSS深入學(xué)習(xí)之讓你認(rèn)識(shí)不一樣的margin

    這篇文章主要給大家介紹了CSS中margin的用法和常見問題的分析，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
    2017-06-28

  • CSS中margin邊界疊加問題及解決方案

    本文主要介紹了CSS中margin邊界疊加問題及解決方案。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-03-27

  • 淺談css margin重疊

    下面小編就為大家?guī)硪黄獪\談css margin重疊。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-07-19

  • CSS 之margin知識(shí)點(diǎn)(必看)

    下面小編就為大家?guī)硪黄狢SS 之margin知識(shí)點(diǎn)(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-07-10

  • css布局之負(fù)margin妙用及其他實(shí)現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了css布局之負(fù)margin妙用及其他實(shí)現(xiàn)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-07-07

  • 細(xì)說CSS中margin屬性的使用

    這篇文章和大家詳細(xì)說一說CSS中margin屬性的使用，重點(diǎn)描述了關(guān)于margin，我們?nèi)粘２惶菀装l(fā)現(xiàn)的“坑，感興趣的小伙伴們可以參考一下
    2016-02-25

  • 深入解析CSS中margin屬性的使用

    這篇文章主要介紹了CSS中的margin屬性的使用,margin是元素盒模型(box model)的基礎(chǔ)屬性,常被用來設(shè)置外邊距,實(shí)際用途非常廣泛,需要的朋友可以參考下
    2016-02-02

  • CSS中使用負(fù)margin值來調(diào)整居中位置

    這篇文章主要介紹了CSS中使用負(fù)margin值來調(diào)整居中位置的方法,文中同時(shí)提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下
    2015-07-15

  • CSS屬性探秘系列(六)：margin

    margin 簡寫屬性在一個(gè)聲明中設(shè)置所有外邊距屬性。該屬性可以有 1 到 4 個(gè)值。這個(gè)簡寫屬性設(shè)置一個(gè)元素所有外邊距的寬度，或者設(shè)置各邊上外邊距的寬度。塊級(jí)元素的垂直相
    2014-10-22

  • 通過css屬性margin:auto讓Div中的Table居中

    在div標(biāo)簽中加入text-align:center里面的Table是不會(huì)居中的，在Table中加上 margin:auto就可以實(shí)現(xiàn)居中效果，下面有個(gè)示例，大家可以參考下
    2014-03-19

最新評(píng)論