关于width: 100%的一些看法
生活随笔
收集整理的這篇文章主要介紹了
关于width: 100%的一些看法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一.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之后可能高度塌陷);上面只是確定了是基于哪個元素的百分比.其實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寬度)
三.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>復制代碼四.總結
0.什么時候起作用?子元素肯定要是塊級元素或則display為block等情況.1.基于誰?基于父元素或祖輩元素(跟當前元素的position有關),position為absolute則基于第一個非static祖輩元素,為fixed則基于body2.子元素的寬度是基于父元素(或者說目標元素)的內容寬度還是總的盒子的寬度?當子元素的position為absolute或fixed的時候,width為總的寬度(padding寬度+ 內容寬度+border寬度),而其他情況都是基于目標元素的內容寬度3.子元素的百分比寬度樣式設置的是子元素的內容寬度還是總的寬度?這個只跟子元素的box-sizing有關,當為border-box的時,設置的是盒子的總寬度,當為content-box是設置的盒子的內容寬度4.若父元素寬度固定,子元素的寬度怎么計算?若不固定怎么計算?當父元素寬度確定時,子元素的寬度百分比能很好計算出來(包括父元素寬度固定,子元素設置為float),只用根據上面三點計算;當父元素的寬度不確定時,父元素會自動鋪滿上層元素,但當父元素position為absolute或fixed或浮動時,父元素的寬度會縮到最小,這時子元素的寬度不好計算,有可能為0,有可能其他子元素把父元素的寬度撐開,這時子元素也有寬度
以上是本人觀察到的情況,不知道是否完全正確
轉載于:https://juejin.im/post/5cdcf5cff265da039a3d9596
總結
以上是生活随笔為你收集整理的关于width: 100%的一些看法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【学习笔记】第三章 python3核心技
- 下一篇： 如何用 Flutter 实现混合开发？闲