怪异盒子模型
1.內(nèi)外邊距的差別
- padding 盒子邊框本身以內(nèi)的間距,當(dāng)內(nèi)邊距設(shè)置過大時(shí),盒子本身的大小會(huì) 被撐大
- margin 盒子邊框以外的間距,外邊距大小不會(huì)影響盒子的大小,可能會(huì)影響盒子的位置
2.補(bǔ)充塊元素和行內(nèi)元素
-
塊和行內(nèi)塊元素的寬度和高度默認(rèn)是繼承父元素的寬度 和高度的百分比.
-
行內(nèi)元素是不能設(shè)置寬width和高度height,它的寬度和高度是根據(jù)內(nèi)容來的.
-
同一行如果多個(gè)元素的寬度相加大于父元素容器的寬度,放不下的換行顯示.
-
圖片標(biāo)簽一般設(shè)置固定的寬度,高度設(shè)置為auto 圖片標(biāo)簽大小會(huì)根據(jù)比咧縮小或者放大.
3.外邊距的補(bǔ)充
外邊距穿透:大盒子里面有一個(gè)小盒子,
? 如果大盒子沒有設(shè)置邊框或者內(nèi)邊距,當(dāng)里面的小盒子外邊距過大時(shí),小盒子的外邊距會(huì)穿透大盒子,導(dǎo)致兩個(gè)盒子一起移動(dòng).
如果大盒子設(shè)置邊框和內(nèi)邊距,當(dāng)里面的小盒子外邊距過大時(shí),小盒子不會(huì)穿透大盒子,只有小盒子在大盒子里面移動(dòng).
4.怪異盒子模型
-
box-sizing :border-content; 標(biāo)準(zhǔn)盒子模型,平常不設(shè)置就默認(rèn)是標(biāo)準(zhǔn)盒子模型
-
box-sizing :border-box; 怪異盒子模型
標(biāo)準(zhǔn)盒子模型與怪異盒子模型的區(qū)別:
當(dāng)內(nèi)邊距和邊框的寬度<內(nèi)容width時(shí), 盒子的總寬度=width的值
? 內(nèi)容 content區(qū)域會(huì)被壓縮,但是內(nèi)容同樣會(huì)顯示出來,并且內(nèi)容多的時(shí)候會(huì)溢出
? 當(dāng)內(nèi)邊距和邊框的寬度>內(nèi)容width時(shí), 盒子的總寬度=內(nèi)邊框+內(nèi)邊距
? 這時(shí)的內(nèi)容區(qū)域就為0,但文本內(nèi)容同樣會(huì)顯示出來.
5.怪異盒子的應(yīng)用
優(yōu)點(diǎn):1. 固定盒子區(qū)域,在得到盒子大小后,可以自動(dòng)壓縮內(nèi)容區(qū)域的寬度,不需要我們?nèi)ビ?jì)算.
2.普通盒子環(huán)境下,有些時(shí)候我們給盒子里面的內(nèi)容過大 ,會(huì)導(dǎo)致整體盒子被撐大,就會(huì)改變?cè)O(shè)計(jì)要求的大小,而怪異盒子模型就不會(huì).
在設(shè)置怪異后,設(shè)置width就為盒子的整體寬度,內(nèi)容區(qū)域的實(shí)際寬度會(huì)自動(dòng)擠壓(條件是內(nèi)邊距和邊框的寬度<提前設(shè)置好的內(nèi)容區(qū)域width)
box-sizing: border-box;總結(jié)
