CSS margin全面了解-css教學-PHP中文網

首頁

web前端

css教學

CSS margin全面了解

高洛峰

Feb 16, 2017 pm 01:36 PM

一、margin可以為負值

在盒子模型中，內容區的width/height、padding、border都不能為負值，但是margin例外，它可以為負值。

關於margin負值的使用技巧，了解不多，日後有機會再補充，此處先貼一個經典應用，margin-left負值結合浮動實現不改變DOM結構的流體佈局。

<!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>

登入後複製

二、margin的百分比數值

當margin屬性的值為百分數時，其總是以父元素的width為基數進行計算。

請看下面這個demo，當初折磨了我N久的。。。只怪我知道太晚了，說多了都是淚啊。。。

<!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>

登入後複製

三、垂直方向上margin的合併

這個問題經常造成一些困惑，不過只需要記住一句話即可，垂直方向上的margin只要親密接觸就會合併，也只有親密接觸才會合併。

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

來看例子：

<!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>

登入後複製

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

margin合併的規則：

<!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. 兩個margin都是正數，取絕對值大的；

2. 一個margin是正數，另一個margin 都是負數，取絕對值大的。

以上這篇CSS margin全面了解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多CSS margin全面了解相關文章請關注PHP中文網！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn