【css】浮動和定位對元素的寬度-外邊距或其餘元素的影響

時間  2019-12-01
標籤 css 浮動 定位 元素 寬度 邊距 其餘 影響 欄目 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:
 
看起來同樣？其實不同，咱們用控制檯的盒模型的檢查器看一下：
 
在這裏，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:
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將變成：
在設置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:
證實毫無影響
 
1.3子元素絕對定位，則分兩種狀況討論
 
 <1>默認狀況下以body元素寬度爲參考基準
咱們把inner-100percent對應的style改爲：
複製代碼 
.inner-100percent{
   position:absolute;
   width: 100%;
   height:100px;
   background: darkcyan;
}
複製代碼

 

而後咱們就會看到以下一個糟糕的場景，inner-100percent的寬度變成了body也就是全屏的寬度
 
那麼當咱們使用定位致使這種狀況的時候應該怎麼辦呢？看下面：
 
 <2>若存在被定位的上層元素，則以距離最近的相對定位的元素寬度爲基準：
咱們給inner-100percent加上一個相對定位的父級元素： 
<div class="outer">
      <div style="position:relative;">
        <div class="inner-100percent"></div>
      </div>
</div>

 

demo:
因而又恢復正常了
 
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

 （注意inner-auto原本是有顏色的）css

 
此時該div的寬度已被擠壓爲0了，從控制檯上看inner-auto:
因此，當咱們在絕對定位，固定定位，浮動時候，要記得給元素設寬度。
 
三.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:
 
上下兩個div之間的距離爲10px;嗯？爲何是10px呢，咱們將4個div的margin都爲10px,兩個div的上下距離不該該是10px +10px = 20px嗎？沒錯， 在通常狀況下（沒有浮動，不是行內框），並排的div 的margin能夠彼此重疊,並且重疊後值爲二者中較大的那個
 
 
 
四.浮動將打破這種層疊關係，假若咱們給div1,dv2,div3加上浮動 
.div2,.div3,.div4{
         float: left;
}
 
demo:
間距變爲20px，這時候margin已經不重疊了
 
五.浮動/定位對其餘元素物理空間的影響
 
這首先要提到咱們常常掛在耳邊的一個詞——「脫離文檔流」
 
脫離文檔流 == 不佔據元素的空間（物理上） 
.div2,.div3{
        float: left;
}
 
demo:
 
 
其中float,position:absolute/fixed可以脫離文檔流 ，而position:relative不可以脫離文檔流
 
在這裏，咱們把脫離文檔流的那一部分元素歸爲「浮動流」，而把沒有脫離文檔流的那一部分元素歸爲「標準流」，那麼：
 
1.浮動流順序排列，這個順序是和HTML中元素的順序一致的,HTMl中先浮動的元素排在前面，這個「前面」指的是靠近屏幕邊緣的一端，「後面指的是遠離屏幕的一端」
以上面的例子爲基礎 
.div1,.div2,.div3,.div4{
        float: left;
}

 

.div1,.div2,.div3,.div4{
       float: right;
}

 

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

 

浮動流的起始位置被最早設置浮動的元素本來的位置決定了。其餘元素的只能跟在「領頭浮動元素」的後面
 
但即便其餘元素的沒有跟在「領頭元素」的後面，而是向相反方向浮動，也始終不能高於「領頭浮動元素」
複製代碼 
.div2,.div3{
     float: left;
}
.div4{
     float:right;
}
複製代碼

 

3.浮動流自己並不會影響標準流元素的定位,可是卻影響着標準流文本的定位
 
若是咱們仔細看一下五中開頭的demo會發現一個難以忍受的bug:
"div4"這個文本不是被包裹在div4這個元素裏面嗎，爲何被浮動元素div2「懟」下來了？剛剛不是還說好浮動 ==脫離文檔流 == 不佔其餘元素的物理空間的嗎？對啊，這裏說的是元素，並非文本。浮動元素會影響文本的位置！
 
咱們甚至能夠無腦地推測，float的一開始設計的做用就是爲了解決如下的這個問題——
讓文本環繞一個圖片，就像下面這個W3C的案例同樣：

 

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:

 

 

【備註】： 正如上面所說，浮動會脫離文檔流從而不佔據其餘元素的物理位置,而咱們讓div1向左浮動了，這表示咱們在考慮div2的佈局的時候徹底能夠把div1看成不存在。那麼這個時候又因爲div2默認爲width:auto;而且此時參考元素爲body，那麼設margin-left:230px;（略大於div1的寬度），那麼因爲width:auto會自動計算寬度，此時div2寬 = body寬度（全屏寬度）- 230px = 除去div1部分剩餘的屏幕寬度，實現右欄自適應佈局

相關文章