Heim > Artikel > Web-Frontend > Umfassendes Verständnis der CSS-Marge

Umfassendes Verständnis der CSS-Marge

高洛峰Original: 2017-02-16 13:36:231771Durchsuche

1. Der Rand kann negativ sein

Im Box-Modell können die Breite/Höhe, der Abstand und der Rand des Inhaltsbereichs nicht negativ sein, aber der Rand ist eine Ausnahme, er kann negativ sein.

Ich weiß nicht viel über die Fähigkeiten der Verwendung negativer Margin-Werte. Ich werde in Zukunft mehr hinzufügen, wenn ich die Gelegenheit dazu habe. Hier ist eine klassische Anwendung Floating, um ein flüssiges Layout zu erreichen, das die DOM-Struktur nicht verändert.

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>不改变DOM结构的流体布局</title>  
        <style>  
            .container {   
                width:600px;   
                margin-left: auto;   
                margin-right: auto;   
                background-color: orange;   
                font-size: 16px;   
                line-height: 1.5;   
            }   
  
            .box1 {   
                width:100%;   
                float:left;   
            }   
  
            .box2 {   
                margin-right: 220px;   
                padding-left: 20px;   
            }   
  
            img {   
                width:200px;   
                float:left;   
                margin-left:-200px;   
            }   
  
            .clearfix:after {   
                content: "";   
                display: table;   
                clear: both;   
            }   
  
            .clearfix {   
                *zoom: 1;   
            }   
  
        </style>  
    </head>  
    <body>  
        <div class="container clearfix">  
            <div class="box1">  
                <div class="box2">  
                <h3>不改变DOM位置的流体布局</h3>  
                <p>假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？</p>  
                <p>通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。</p>  
                <p>但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？</p>  
                <p>下面就介绍一种新的思路来完成布局。</p>  
                <ul>  
                    <li>将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。</li>  
                    <li>将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。</li>  
                    <li>但是有一个问题，图像盖住了文本内容，这可怎么办？</li>  
                    <li>重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！</li>  
                </ul>  
                </div><!--关闭box2-->  
            </div><!--关闭box1-->  
            <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />  
        </div><!--关闭container-->  
    </body>  
</html>

2. Der prozentuale Wert des Rands

Wenn der Wert des Randattributs ein Prozentsatz ist, wird er immer basierend auf der Breite des übergeordneten Elements berechnet.

Schauen Sie sich bitte die Demo unten an, die mich lange gequält hat. . . Ich habe es nur zu spät herausgefunden und es würde mich zum Weinen bringen, wenn ich zu viel darüber reden würde. . .

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>margin的百分数值</title>  
        <style>  
            .container {   
                width: 500px;   
                height: 300px;   
                margin: 50px auto;   
                background-color: orange;   
                border: 1px solid black;   
            }   
  
            .box {   
                width: 250px;   
                height: 150px;   
                margin-left: auto;   
                margin-right: auto;   
                background-color: cyan;   
            }   
  
            .box1 {   
                margin-top: 75px;   
                margin-bottom: 75px;   
                padding: 5px;   
            }   
               
            .box2 {   
                margin-top: 25%;   
                margin-bottom: 25%;   
                padding: 5px;   
            }   
        </style>  
    </head>  
  
    <body>  
        <div class="container">  
            <div class="box box1">  
                <p>父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。</p>  
                <p>OK，居中啦！！！</p>  
            </div>  
        </div>  
        <div class="container">  
            <div class="box box2">  
                <p>既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都为25%，应该也能垂直居中。</p>  
                <p>额，这什么鬼？说好的居中呢？</p>  
            </div>  
        </div>  
    </body>  
</html>

3. Das Zusammenführen von Rändern in vertikaler Richtung

Dieses Problem verursacht oft Verwirrung, aber Sie müssen sich nur einen Satz merken, der zusammengeführt wird Solange sie in engem Kontakt stehen, verschmelzen sie, und nur enger Kontakt wird verschmelzen.

Das Zusammenführen von Rändern in vertikaler Richtung ist eigentlich leicht zu verstehen, wenn es bei benachbarten Elementen auftritt, aber wenn es zwischen einem übergeordneten Element und einem untergeordneten Element auftritt, ist es etwas seltsam.

Sehen wir uns ein Beispiel an:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>垂直方向上的margin合并</title>  
        <style>  
            .container {   
                width: 500px;   
                height: 300px;   
                margin: 50px auto;   
                background-color: orange;   
            }   
  
            .box {   
                width: 300px;   
                height: 200px;   
                margin-left: auto;   
                margin-right: auto;   
                background-color: cyan;   
                margin-top: 25px;   
                padding: 5px;   
            }   
  
            .border {   
                border: 1px solid black;   
                /*padding: 1px;*/   
            }   
        </style>  
    </head>  
  
    <body>  
        <div class="container">  
            <div class="box">  
                <p>父元素的margin-top为50px，子元素的margin-top为25px；</p>  
                <p>咦，子元素的margin-top呢？为什么都顶到父元素上边界了？</p>  
                <p>额，因为父元素与子元素的margin-top亲密接触了呀，所以它们合并在一起了啊。</p>  
            </div>  
        </div>  
        <div class="container border">  
            <div class="box">  
                <p>可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。</p>  
                <p>很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了啊。</p>  
                <p>或者给父元素设置padding也是可以的喔。</p>  
            </div>  
        </div>  
    </body>  
</html>

Methoden zur Vermeidung von Randverschmelzungen in vertikaler Richtung: Fügen Sie Rahmen oder Polsterungen zum übergeordneten Element hinzu, um den engen Kontakt zwischen den Rändern des übergeordneten Elements zu unterbrechen Element und das untergeordnete Element Can.

Regeln für die Randzusammenführung:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>margin合并规则</title>  
        <style>  
            .container {   
                width: 300px;   
                height: 500px;   
                margin: 50px;   
                background-color: orange;   
                float: left;   
                border: 1px solid black;   
            }   
  
            .box1,.box2,.box3,   
            .box4,.box5,.box6 {   
                width: 200px;   
                height: 150px;   
                margin: 30px auto;   
                background-color: cyan;   
                text-align: center;   
                line-height: 150px;   
            }   
  
            .box1 {   
                margin-bottom: 30px;   
            }   
  
            .box2 {   
                margin-top: 20px;   
            }   
  
            .box3 {   
                margin-bottom: 30px;   
            }   
  
            .box4 {   
                margin-top: -30px;   
            }   
  
            .box5 {   
                margin-bottom: -30px;   
            }   
  
            .box6 {   
                margin-top: -50px;   
                background-color: green;   
            }   
  
            p {   
                width: 220px;   
                margin:10px auto;   
                font-size: 16px;   
                line-height: 1.5;   
            }   
  
        </style>  
    </head>  
  
    <body>  
        <div class="container">  
            <div class="box1">box1</div>  
            <div class="box2">box2</div>  
            <p>box1的margin-bottom为30px，box2的margin-top为20px，两个margin都是正数，取绝对值大的。</p>    
        </div>  
        <div class="container">  
            <div class="box3">box3</div>  
            <div class="box4">box4</div>  
            <p>box3的margin-bottom为30px，box4的margin-top为-30px，两个margin一正一负，相加。</p>    
        </div>  
        <div class="container">  
            <div class="box5">box5</div>  
            <div class="box6">box6</div>  
            <p>box5的margin-bottom为-30px，box6的margin-top为-50px，两个margin都是负数，取绝对值大的。</p>    
        </div>  
    </body>  
</html>

1. Beide Ränder sind positive Zahlen, nehmen Sie den größeren Absolutwert;

2 Eine Marge ist eine negative Zahl, addieren Sie sie.

3. Beide Margen sind negative Zahlen, nehmen Sie den größeren Absolutwert.

Das obige umfassende Verständnis der CSS-Marge ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere umfassende Informationen zu CSS-Margen und verwandte Artikel finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Magische Verwendung eines negativen Randes im CSS-Layout und anderen ImplementierungenNächster Artikel：Magische Verwendung eines negativen Randes im CSS-Layout und anderen Implementierungen

In Verbindung stehende Artikel

Mehr sehen