當(dāng)前位置：
首頁 >
关于width: 100%的一些看法
發(fā)布時(shí)間：2023/12/6
52
豆豆
生活随笔
收集整理的這篇文章主要介紹了
关于width: 100%的一些看法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一.position對width 設(shè)置為百分比的影響
<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>復(fù)制代碼如下圖所示,首先我們有一個(gè)圖片被兩層div給包裹,而body有一個(gè)margin,圖片寬度為50%,最外層的div有一個(gè)最小高度(用于后面的測試,當(dāng)img設(shè)置了其他position之后可能高度塌陷);上面只是確定了是基于哪個(gè)元素的百分比.其實(shí)position為fixed和absolute時(shí),可能還會影響到其他的,先看第二點(diǎn).
二.border-box對width 設(shè)置為百分比的影響
<!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>復(fù)制代碼1.如下圖所示,當(dāng)div都為border-box;時(shí),計(jì)算子元素的100%寬度,是相對于父元素的內(nèi)容的寬度;即: 子元素content width + 子元素padding width + 子元素border = 父元素content width * 百分比;(440px + 10px * 2 + 0 = 460px * 100%)所以當(dāng)都為border-box的時(shí)候,子元素在設(shè)置了width為100%,在不設(shè)置margin的情況下,子元素不會溢出父元素;
額外補(bǔ)充,當(dāng)元素為border-box時(shí),設(shè)置的寬度為內(nèi)容寬度+padding寬度+border寬度的總和,所以parent元素的總寬度為500px,內(nèi)容寬度為460px,padding寬度為40px;
2.如下圖,當(dāng)div都為content-box時(shí),子元素計(jì)算的100%寬度,是相對于仍然為父元素的內(nèi)容的寬度;雖然都是內(nèi)容的寬度并且width都通過樣式設(shè)置為了500px,但border-box設(shè)置的是盒子除去margin所占的總寬度(內(nèi)容寬度需要用500px減去padding),而content-box時(shí)設(shè)置的寬度為盒子的內(nèi)容寬度,所以child的寬度直接就為500px,但child所占的總寬度為600px(內(nèi)容寬度+padding寬度,為了更明顯padding設(shè)為了50px),導(dǎo)致child溢出
額外補(bǔ)充,,當(dāng)元素為content-box時(shí),設(shè)置的寬度為內(nèi)容寬度寬度,所以Parent元素的總寬度需要計(jì)算:內(nèi)容寬度+padding寬度+border寬度的總和,就是500px+40px+0=540px. 對content-box的盒子設(shè)置width時(shí),設(shè)置的是內(nèi)容寬度,而對border-box的盒子設(shè)置width時(shí),設(shè)置的是總的寬度(內(nèi)容寬度+padding寬度+border寬度)
三.position的其他影響
我們通過做第二個(gè)實(shí)驗(yàn)的時(shí)候,重新做第一個(gè)例子<!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>復(fù)制代碼四.總結(jié)
0.什么時(shí)候起作用?子元素肯定要是塊級元素或則display為block等情況.1.基于誰?基于父元素或祖輩元素(跟當(dāng)前元素的position有關(guān)),position為absolute則基于第一個(gè)非static祖輩元素,為fixed則基于body2.子元素的寬度是基于父元素(或者說目標(biāo)元素)的內(nèi)容寬度還是總的盒子的寬度?當(dāng)子元素的position為absolute或fixed的時(shí)候,width為總的寬度(padding寬度+ 內(nèi)容寬度+border寬度),而其他情況都是基于目標(biāo)元素的內(nèi)容寬度3.子元素的百分比寬度樣式設(shè)置的是子元素的內(nèi)容寬度還是總的寬度?這個(gè)只跟子元素的box-sizing有關(guān),當(dāng)為border-box的時(shí),設(shè)置的是盒子的總寬度,當(dāng)為content-box是設(shè)置的盒子的內(nèi)容寬度4.若父元素寬度固定,子元素的寬度怎么計(jì)算?若不固定怎么計(jì)算?當(dāng)父元素寬度確定時(shí),子元素的寬度百分比能很好計(jì)算出來(包括父元素寬度固定,子元素設(shè)置為float),只用根據(jù)上面三點(diǎn)計(jì)算;當(dāng)父元素的寬度不確定時(shí),父元素會自動鋪滿上層元素,但當(dāng)父元素position為absolute或fixed或浮動時(shí),父元素的寬度會縮到最小,這時(shí)子元素的寬度不好計(jì)算,有可能為0,有可能其他子元素把父元素的寬度撐開,這時(shí)子元素也有寬度
以上是本人觀察到的情況,不知道是否完全正確
轉(zhuǎn)載于:https://juejin.im/post/5cdcf5cff265da039a3d9596
總結(jié)
以上是生活随笔為你收集整理的关于width: 100%的一些看法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【学习笔记】第三章 python3核心技
- 下一篇： 如何用 Flutter 实现混合开发？闲