天天看點

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

一.width:auto和width:100%的差別

  1.width:100%的作用是占滿它的參考元素的寬度。(一般情況下參考元素 == 父級元素,這裡寫成參考元素而不是父級元素,在下面我會再細說) 2.width:auto也是以“占滿參考元素寬度”為目标。但不同的地方在于,它能根據margin和padding的值動态地調整width的值。當參考元素的寬度一定時,子元素的margin或者padding多一點,那麼子元素的width就會少一點。   說白了width:auto試圖達成這一等式:子元素的width+padding(左和右)+margin(左和右) = 參考元素的的width(參考元素一般為父元素) 【舉個例子】:

<style type="text/css">
    .outer{
        width:200px;
        height:100px;
        border:1px solid black;
        margin:20px;
    }
    .inner-100percent{
        width: 100%;
        height:100px;
        background: darkcyan;
    }
    .inner-auto{
        width:auto;
        padding:0px 10px;
        height:100px;
        background:salmon;
    }
</style>      
<div class="outer">
        <div class="inner-100percent"></div>
    </div>
    <div class="outer">
        <div class="inner-auto"></div>
</div>      

demo:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

  看起來一樣?其實不一樣,我們用控制台的盒模型的檢查器看一下:  

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

在這裡,10px的padding * 2 + width(auto) = 200px(參考元素的寬度)   我們再對上面CSS更改一下,将inner-auto的部分修改為:

.inner-auto{
        width:auto;
        padding:0px 10px;//設定左右内邊距為10px
        margin:0px 10px;//設定左右外邊距為10px
        height:100px;
        background:salmon;
  }      

demo:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

10px的padding * 2 + 10px的margin*2 + width(auto) = 200px(參考元素的寬度)   【注意】:width:100%不會将自身的margin和padding包含計算在參考元素的width内,是以如果我們把inner-100percent的CSS部分改成:

.inner-100percent{
        width: 100%;
        height:80px;
        padding:0px 10px;
        background: darkcyan;
  }      

  demo将變成:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

在設定width:100%後,子元素“溢出”了父元素   【注意】寬度預設為width:auto,但高度預設height:0   二.浮動/定位對width:auto和width:100%的影響   1.浮動/定位對width:100%的影響 浮動/定位是通過改變元素width的參考基準來影響width:100%的,有以下三點規律   1.1  預設情況下:以它的父級元素寬度為參考基準 這也就是我們上面看到的demo所展示的   1.2: 子元素相對定位,仍然以它的父級元素寬度為參考基準 我們給inner-100percent的style加上相對定位

.inner-100percent{
   position:relative;
   width: 100%;
   height:100px;
   background: darkcyan;
}      

  demo:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

證明毫無影響   1.3子元素絕對定位,則分兩種情況讨論    <1>預設情況下以body元素寬度為參考基準 我們把inner-100percent對應的style改成:

.inner-100percent{
   position:absolute;
   width: 100%;
   height:100px;
   background: darkcyan;
}      

然後我們就會看到如下一個糟糕的場景,inner-100percent的寬度變成了body也就是全屏的寬度

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

  那麼當我們使用定位導緻這種情況的時候應該怎麼辦呢?看下面:    <2>若存在被定位的上層元素,則以距離最近的相對定位的元素寬度為基準: 我們給inner-100percent加上一個相對定位的父級元素:

<div class="outer">
      <div style="position:relative;">
        <div class="inner-100percent"></div>
      </div>
</div>      

demo:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

于是又恢複正常了   1.4子元素浮動 對width:100%無影響(這裡不做展示)   2.浮動/定位對width:auto的影響   2.1預設情況下,width:auto占滿一行 不做展示 2.2子元素相對定位,無影響,仍占滿一行 不做展示 3.3子元素絕對定位,固定定位,浮動,width:auto等同于width:0 将上面的style改成:

.inner-auto{
        position:absolute;//或position:fixed;或float:left
        width:auto;
        height:100px;
        background:salmon;
}      

此時對inner-auto

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

 (注意inner-auto本來是有顔色的)

  此時該div的寬度已被擠壓為0了,從控制台上看inner-auto:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

是以,當我們在絕對定位,固定定位,浮動時候,要記得給元素設寬度。   三.margin的"層疊現象"  

<style type="text/css">
    *{margin: 0;padding: 0;}
    .div{
        width:100px;
        height:50px;
        margin: 10px;
        border:1px solid black;
    }
    .div1{
        background:seagreen;
    }
    .div2{
        background: cornflowerblue;
    }
    .div3{
        background: gold;
    }
    .div4{
        background: lightcoral;
    }
</style>
<body>
    <div class="div div1">div1</div>
    <div class="div div2">div2</div>
    <div class="div div3">div3</div>
    <div class="div div4">div4</div>
</body>      

  demo:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

  上下兩個div之間的距離為10px;嗯?為什麼是10px呢,我們将4個div的margin都為10px,兩個div的上下距離不應該是10px +10px = 20px嗎?沒錯, 在一般情況下(沒有浮動,不是行内框),并排的div 的margin可以彼此重疊,而且重疊後值為兩者中較大的那個  

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

    四.浮動将打破這種層疊關系,倘若我們給div1,dv2,div3加上浮動

.div2,.div3,.div4{
         float: left;
}      

  demo:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

間距變為20px,這時候margin已經不重疊了   五.浮動/定位對其他元素實體空間的影響   這首先要提到我們經常挂在耳邊的一個詞——“脫離文檔流”   脫離文檔流 == 不占據元素的空間(實體上)

.div2,.div3{
        float: left;
}      

  demo:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

    其中float,position:absolute/fixed能夠脫離文檔流 ,而position:relative不能夠脫離文檔流   在這裡,我們把脫離文檔流的那一部分元素歸為“浮動流”,而把沒有脫離文檔流的那一部分元素歸為“标準流”,那麼:   1.浮動流順序排列,這個順序是和HTML中元素的順序一緻的,HTMl中先浮動的元素排在前面,這個“前面”指的是靠近螢幕邊緣的一端,“後面指的是遠離螢幕的一端” 以上面的例子為基礎

.div1,.div2,.div3,.div4{
        float: left;
}      
CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響
.div1,.div2,.div3,.div4{
       float: right;
}      
CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

2.浮動流的起始位置由最先設定浮動的元素未浮動時的位置決定   我們再回到上述的例子,div2,div3,div4向左浮動的時候

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

浮動流的起始位置被最先設定浮動的元素原本的位置決定了。其他元素的隻能跟在“領頭浮動元素”的後面   但即使其他元素的沒有跟在“領頭元素”的後面,而是向相反方向浮動,也始終不能高于“領頭浮動元素”

.div2,.div3{
     float: left;
}
.div4{
     float:right;
}      
CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

3.浮動流本身并不會影響标準流元素的定位,但是卻影響着标準流文本的定位   如果我們仔細看一下五中開頭的demo會發現一個難以忍受的bug:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

"div4"這個文本不是被包裹在div4這個元素裡面嗎,為什麼被浮動元素div2“怼”下來了?剛剛不是還說好浮動 ==脫離文檔流 == 不占其他元素的實體空間的嗎?對啊,這裡說的是元素,并不是文本。浮動元素會影響文本的位置!   我們甚至可以無腦地推測,float的一開始設計的作用就是為了解決以下的這個問題—— 讓文本環繞一個圖檔,就像下面這個W3C的案例一樣:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

4.浮動流位居标準流之上(也就是說浮動流的元素會覆寫标準流的元素) 這個根據上面那個例子就可以看出來,這裡就不多說了   六.實踐案例 好,說了這麼多,還是用以上的知識點來一個實踐的案例比較痛快,下面這個案例是CSS布局方面的經典考題:兩列布局,左邊固定高寬,右邊自适應:

<style type="text/css">
    *{margin: 0;padding: 0;}
    .div{
        border:1px solid black;
        margin: 10px;
    }
    .left{
        float: left;
        width: 200px;
        height:200px;
        background:darkcyan
    }
    .right{
        margin-left:230px;
        height: 400px;
    }
</style>
</head>
<body>
    <div class="div left">我是div1</div>
    <div class="div right">我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2</div>
</body>      

demo:

CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響
CSS中浮動和定位對元素寬度/外邊距/其他元素所占空間的影響

【實作思路】:正如上面所說,浮動會脫離文檔流進而不占據其他元素的實體位置,而我們讓div1向左浮動了,這表示我們在考慮div2的布局的時候完全可以把div1當作不存在。那麼這個時候又由于div2預設為width:auto;并且此時參考元素為body,那麼設margin-left:230px;(略大于div1的寬度),那麼由于width:auto會自動計算寬度,此時div2寬 = body寬度(全屏寬度)- 230px = 除去div1部分剩餘的螢幕寬度,實作右欄自适應 其實啊,我隻是把你們喝咖啡的時間,都用來喝啤酒而已     标簽: 前端, css樣式表

轉載于:https://www.cnblogs.com/asylm/p/7404214.html