一.position對width 設置為百分比的影響
<html><head><style type="text/css">img {width: 50%}body {margin: 8px;}</style>
</head><body><div style=" min-height: 10px; background: red; "><div><img src="/i/eg_smile.gif" /></div></div></body></html>復制代碼如下圖所示,首先我們有一個圖片被兩層div給包裹,而body有一個margin,圖片寬度為50%,最外層的div有一個最小高度(用于后面的測試,當img設置了其他position之后可能高度塌陷);
1.當不設置position的時候,img的50%是相對父元素(也就是第二層的div)的寬度的50%;因為最外層和第二層的寬度未設置,就是auto,就是自動鋪滿的
2.對img的position進行修改,發現當為relative的時候,寬度不變(仍相對于父元素),但當position為fixed和absolute的時候寬度變大了(因為這時候不是相對父元素了);經驗證當為fixed的時候,相對于body;當為absolute的時候寬度是相對于祖輩元素中第一個非static元素的寬度百分比直到body;
上面只是確定了是基于哪個元素的百分比.其實position為fixed和absolute時,可能還會影響到其他的,先看第二點.
二.border-box對width 設置為百分比的影響
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>測試border-box對百分比寬度的影響</title><style type="text/css">* {box-sizing: border-box;}.parent {background: steelblue;padding: 20px;width: 500px;}.child {background: wheat;height: 50px;width: 100%;padding: 10px;}</style>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>復制代碼1.如下圖所示,當div都為border-box;時,計算子元素的100%寬度,是相對于父元素的內容的寬度;
即: 子元素content width + 子元素padding width + 子元素border = 父元素content width * 百分比;(440px + 10px * 2 + 0 = 460px * 100%)
所以當都為border-box的時候,子元素在設置了width為100%,在不設置margin的情況下,子元素不會溢出父元素;
額外補充,當元素為border-box時,設置的寬度為內容寬度+padding寬度+border寬度的總和,所以parent元素的總寬度為500px,內容寬度為460px,padding寬度為40px;
2.如下圖,當div都為content-box時,子元素計算的100%寬度,是相對于仍然為父元素的內容的寬度;雖然都是內容的寬度并且width都通過樣式設置為了500px,但border-box設置的是盒子除去margin所占的總寬度(內容寬度需要用500px減去padding),而content-box時設置的寬度為盒子的內容寬度,所以child的寬度直接就為500px,但child所占的總寬度為600px(內容寬度+padding寬度,為了更明顯padding設為了50px),導致child溢出
額外補充,,當元素為content-box時,設置的寬度為內容寬度寬度,所以Parent元素的總寬度需要計算:內容寬度+padding寬度+border寬度的總和,就是500px+40px+0=540px. 對content-box的盒子設置width時,設置的是內容寬度,而對border-box的盒子設置width時,設置的是總的寬度(內容寬度+padding寬度+border寬度)
3.最后再聲明一點,寬度的計算方式都是根據父元素的內容寬度來計算的,至于這個百分比寬度是否包括padding,就只和子元素的box-sizing有關了,父元素的box-sizing不同也沒有關系(但父元素的自身的box-sizing和自身寬度計算有關,所以算是間接關系吧,也可以說沒關系);比如上面那個例子,如果我把child設置為border-box,那么child的寬度為500px,因為是border-box,所以設置的是總的寬度,即500px=內容寬度+padding寬度,所以可以推出內容寬度為400px
三.position的其他影響
我們通過做第二個實驗的時候,重新做第一個例子
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>測試border-box對百分比寬度的影響</title><style type="text/css">* {box-sizing: border-box;}.child {width: 100%;background: wheat;height: 20px;position: absolute;}.parent {padding: 20px;background: steelblue;width: 500px;position: relative;}.grad {padding: 20px;background: turquoise;}body {margin: 0px;}</style>
</head><body><div class="grad"><div class="parent"><div class="child"></div></div></div>
</body></html>復制代碼我們發現child元素的總寬度為500px,內容寬度為而Parent的總寬度為500px,內容寬度卻只有460px,所以child的寬度不是我們說的集成父元素的內容寬度,而是父元素的總的寬度
四.總結
0.什么時候起作用?
子元素肯定要是塊級元素或則display為block等情況.
1.基于誰?
基于父元素或祖輩元素(跟當前元素的position有關),position為absolute則基于第一個非static祖輩元素,為fixed則基于body
2.子元素的寬度是基于父元素(或者說目標元素)的內容寬度還是總的盒子的寬度?
當子元素的position為absolute或fixed的時候,width為總的寬度(padding寬度+ 內容寬度+border寬度),而其他情況都是基于目標元素的內容寬度
3.子元素的百分比寬度樣式設置的是子元素的內容寬度還是總的寬度?
這個只跟子元素的box-sizing有關,當為border-box的時,設置的是盒子的總寬度,當為content-box是設置的盒子的內容寬度
4.若父元素寬度固定,子元素的寬度怎么計算?若不固定怎么計算?
當父元素寬度確定時,子元素的寬度百分比能很好計算出來(包括父元素寬度固定,子元素設置為float),只用根據上面三點計算;當父元素的寬度不確定時,父元素會自動鋪滿上層元素,但當父元素position為absolute或fixed或浮動時,父元素的寬度會縮到最小,這時子元素的寬度不好計算,有可能為0,有可能其他子元素把父元素的寬度撐開,這時子元素也有寬度
以上是本人觀察到的情況,不知道是否完全正確
 實現負載均衡)
![[BZOJ4182]Shopping](http://pic.xiahunao.cn/[BZOJ4182]Shopping)
![8月19學習練習[兩三個TableView并排顯示]](http://pic.xiahunao.cn/8月19學習練習[兩三個TableView并排顯示])
