一.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本來是有顔色的)
此時該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部分剩餘的螢幕寬度,實作右欄自适應 其實啊,我隻是把你們喝咖啡的時間,都用來喝啤酒而已 标簽: 前端, css樣式表
轉載于:https://www.cnblogs.com/asylm/p/7404214.html