資訊專欄INFORMATION COLUMN
摘要：前言前端頁面的構(gòu)建過程中，盒模型相關(guān)的概念會(huì)一直如影隨形，因此需要深刻地理解好盒模型。本文將從盒模型描述標(biāo)準(zhǔn)盒模型傳統(tǒng)盒模型屬性，常見問題。
【前言】前端頁面的構(gòu)建過程中，盒模型相關(guān)的概念會(huì)一直如影隨形，因此需要深刻地理解好盒模型。本文會(huì)先簡單描述一下盒模型，然后描述一些平常會(huì)遇到的注意點(diǎn)。
本文將從1、盒模型描述；2、W3C標(biāo)準(zhǔn)盒模型/IE傳統(tǒng)盒模型 ；3.box-sizing屬性；4，常見問題。
之前跟朋友一起打羽毛球的時(shí)候看到羽毛球場(chǎng)地，我X，這不就是傳說中的盒模型么，因此我還被他們調(diào)侃代碼中毒太深。首先，po一張圖。
眾所周知，羽毛球運(yùn)動(dòng)中，雙打的安全區(qū)域是標(biāo)注的紅色線框內(nèi)，單打的安全區(qū)域是標(biāo)注的黃色線框內(nèi)，單雙打重疊的區(qū)域就是上面標(biāo)注的藍(lán)色框框了，一個(gè)羽毛球廠的邊界線就是最外層的白色框框，且各個(gè)羽毛球場(chǎng)中間總會(huì)留一些間隙，就是外層白色框框與邊界的距離。
將這些對(duì)比盒模型的話：
1.藍(lán)色框框就是我們?nèi)粘Ｋf的內(nèi)容框content，內(nèi)容只會(huì)在這個(gè)區(qū)域展示； 2.最外層的那個(gè)邊界線就是我們所說的border， 3.content和border中間的距離就是內(nèi)邊距padding 4.最外層的邊界線與旁邊的白邊的間距就是外邊距margin。
回歸到盒模型就如下圖所示：
1.W3C標(biāo)準(zhǔn)盒模型 如下圖如果設(shè)置
添加下面的css屬性，則在chrome下的預(yù)覽效果及l(fā)ayout是.box{
background-color: lightpink; width: 255px; height: 300px; border: 20px solid #f00; padding: 20px; margin: 20px; }
從上方可以看出來
內(nèi)盒尺寸（大?。?= width + padding + border 外盒尺寸（空間尺寸）= width + pading + border + margin 經(jīng)過計(jì)算可以得出： div的內(nèi)盒寬度 = width+ (padding + border )*2 = 335，內(nèi)盒外盒高度= height+ (padding + border)*2=380 div的外盒寬度 = width+ (padding + border +margin)*2 = 375，外盒外盒高度= height+ (padding + border + margin*2 =420 內(nèi)容區(qū)域content的寬度 = width = 255,content的高度= height=300
2.IE傳統(tǒng)盒模型 如果在ie下預(yù)覽及l(fā)ayout則是下面的效果
從上方可以看出來
內(nèi)盒尺寸（大?。?= width 外盒尺寸（空間尺寸）= winth + margin div的內(nèi)盒寬度 = width= 255，內(nèi)盒外盒高度= height= 300 div的內(nèi)盒高度 = height + margin= 255+ 20*2=295，內(nèi)盒外盒高度= 300+ margin= 300+ 20*2=340 內(nèi)容content的寬度 = 內(nèi)盒寬度- padding -border = 255- （20 + 20）*2 = 175,content的高度= 內(nèi)盒高度- padding -border =300- （40 + 10）*2 =220
【總結(jié)】
W3C標(biāo)準(zhǔn)盒模型： 內(nèi)盒尺寸（大?。?= width + padding + border 外盒尺寸（空間尺寸）= width + pading + border + margin IE傳統(tǒng)（IE6）盒模型 內(nèi)盒尺寸（大小） = width 外盒尺寸（空間尺寸）= winth + margin三、box-sizing屬性
【基礎(chǔ)概念】：以特定方式定義匹配某個(gè)區(qū)域的特定個(gè)元素【兼容性IE8+】
【屬性值】
content-box:寬度和高度分別用到元素的內(nèi)容框，即上方所示的W3C標(biāo)準(zhǔn)盒模型【默認(rèn)值】 border-box:寬度和高度分別用到元素的內(nèi)容框、內(nèi)邊距，邊框，即上方所示的IE傳統(tǒng)盒模型 inherit:繼承父元素的box-sizing屬性
【tpis】移動(dòng)端，建議添加box-sizing:border-box值，因?yàn)槲覀冺撁婢植炕旧鲜前磪^(qū)域已經(jīng)布局好了，但是有的時(shí)候改變一個(gè)元素的邊距值，可能會(huì)導(dǎo)致鈣元素的大小變大直接元素下移，頁面錯(cuò)亂。但是添加了box-sizing:border-box可以保證頁面整理布局不會(huì)亂。
四、常見問題1.margin重疊問題
塊級(jí)元素水平方向不會(huì)重疊，垂直方向可能會(huì)重疊（若重疊，邊距取較大的值；出現(xiàn)負(fù)值則取兩者差值的絕對(duì)值）
如下圖所示，若上面的元素設(shè)置margin:20px；下面的元素設(shè)置margin:10px。則兩個(gè)元素在垂直方向的margin會(huì)重疊且取相對(duì)大的值。
這里情況比較復(fù)雜，這里先簡單說下，會(huì)在一篇寫margin相關(guān)的文章詳細(xì)闡述下。
2.margin不生效
最多出現(xiàn)在firefox，或者受浮動(dòng)及定位影響，可以考慮用padding代替。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112410.html
摘要：作者將原素材文章進(jìn)行了新內(nèi)容的添加和重新排列，但是因?yàn)槲恼掳俣惹岸思夹g(shù)學(xué)院面向大學(xué)生的前端技術(shù)學(xué)習(xí)平臺(tái)前端掘金由百度創(chuàng)辦的免費(fèi)前端技術(shù)學(xué)習(xí)實(shí)踐交流分享平臺(tái)。簡直是前端黑科技巧使你的更加專業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。 神器！解放你的雙手——UI 設(shè)計(jì)稿全自動(dòng)切圖和標(biāo)注的一些工具推薦 - 前端 - 掘金原文收錄在我的 GitHub博客 (https://github.com/jaw...
摘要：比如表示上下左右都是像素塊元素居中的樣式，表示上下表示左右而表示上，左右，下。瀏覽器對(duì)塊元素的默認(rèn)樣式問題如下塊元素的盒模型樣式復(fù)合屬性寫法如果我們想給添加樣式，可以這樣寫為了精簡代碼，也可以采用如下的復(fù)合屬性寫法 學(xué)習(xí) HTML 和 CSS 將近一個(gè)月，我以為：層級(jí)（嵌套）關(guān)系和盒模型（Box Model）是理解和學(xué)習(xí)這兩門語言的基石，正如圖層概念是 Photoshop 的基礎(chǔ)。因此...
摘要：深入布局盒模型元素分類在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。從元素的布局特性來分，主要可以分為三類元素塊級(jí)元素，行內(nèi)元素，行內(nèi)塊級(jí)元素。行內(nèi)級(jí)元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們...
閱讀 1646·2023-04-25 18:27
閱讀 1399·2021-10-19 11:44
閱讀 575·2021-10-14 09:42
閱讀 2150·2021-10-11 10:59
閱讀 2784·2021-09-24 09:47
閱讀 1730·2019-08-30 14:20
閱讀 1164·2019-08-30 14:08
閱讀 742·2019-08-29 15:15
