【前端學習】-盒模型

jonh_felix 發布于2019-08-29 13:09 / 1800人閱讀

摘要：前言前端頁面的構建過程中，盒模型相關的概念會一直如影隨形，因此需要深刻地理解好盒模型。本文將從盒模型描述標準盒模型傳統盒模型屬性，常見問題。

【前言】前端頁面的構建過程中，盒模型相關的概念會一直如影隨形，因此需要深刻地理解好盒模型。本文會先簡單描述一下盒模型，然后描述一些平常會遇到的注意點。
本文將從1、盒模型描述；2、W3C標準盒模型/IE傳統盒模型；3.box-sizing屬性；4，常見問題。

一、盒模型描述

之前跟朋友一起打羽毛球的時候看到羽毛球場地，我X，這不就是傳說中的盒模型么，因此我還被他們調侃代碼中毒太深。首先，po一張圖。

眾所周知，羽毛球運動中，雙打的安全區域是標注的紅色線框內，單打的安全區域是標注的黃色線框內，單雙打重疊的區域就是上面標注的藍色框框了，一個羽毛球廠的邊界線就是最外層的白色框框，且各個羽毛球場中間總會留一些間隙，就是外層白色框框與邊界的距離。
將這些對比盒模型的話：

1.藍色框框就是我們日常所說的內容框content，內容只會在這個區域展示；
2.最外層的那個邊界線就是我們所說的border，
3.content和border中間的距離就是內邊距padding
4.最外層的邊界線與旁邊的白邊的間距就是外邊距margin。

回歸到盒模型就如下圖所示：

二、W3C標準盒模型/IE傳統盒模型

1.W3C標準盒模型如下圖如果設置

添加下面的css屬性，則在chrome下的預覽效果及layout是

.box{
background-color: lightpink;
width: 255px;
height: 300px;
border: 20px solid #f00;
padding: 20px;
margin: 20px; }

從上方可以看出來

內盒尺寸（大小） = width + padding + border 
外盒尺寸（空間尺寸）= width + pading + border + margin
經過計算可以得出：
div的內盒寬度 = width+ (padding + border )*2 = 335，內盒外盒高度= height+ (padding + border)*2=380
div的外盒寬度 = width+ (padding + border +margin)*2 = 375，外盒外盒高度= height+ (padding + border + margin*2 =420
內容區域content的寬度 = width = 255,content的高度= height=300

2.IE傳統盒模型如果在ie下預覽及layout則是下面的效果

從上方可以看出來

內盒尺寸（大小） = width 
外盒尺寸（空間尺寸）= winth + margin
div的內盒寬度 = width= 255，內盒外盒高度= height= 300
div的內盒高度 = height + margin= 255+ 20*2=295，內盒外盒高度= 300+ margin= 300+ 20*2=340
內容content的寬度 = 內盒寬度- padding -border = 255- （20 + 20）*2 = 175,content的高度=  內盒高度- padding -border =300- （40 + 10）*2 =220

【總結】

W3C標準盒模型：
內盒尺寸（大小） = width + padding + border 
外盒尺寸（空間尺寸）= width + pading + border + margin
IE傳統（IE6）盒模型 
內盒尺寸（大小） = width 
外盒尺寸（空間尺寸）= winth + margin

三、box-sizing屬性

【基礎概念】：以特定方式定義匹配某個區域的特定個元素【兼容性IE8+】
【屬性值】

content-box:寬度和高度分別用到元素的內容框，即上方所示的W3C標準盒模型【默認值】
border-box:寬度和高度分別用到元素的內容框、內邊距，邊框，即上方所示的IE傳統盒模型
inherit:繼承父元素的box-sizing屬性

【tpis】移動端，建議添加box-sizing:border-box值，因為我們頁面局部基本上是按區域已經布局好了，但是有的時候改變一個元素的邊距值，可能會導致鈣元素的大小變大直接元素下移，頁面錯亂。但是添加了box-sizing:border-box可以保證頁面整理布局不會亂。

四、常見問題

1.margin重疊問題
塊級元素水平方向不會重疊，垂直方向可能會重疊（若重疊，邊距取較大的值；出現負值則取兩者差值的絕對值）
如下圖所示，若上面的元素設置margin:20px；下面的元素設置margin:10px。則兩個元素在垂直方向的margin會重疊且取相對大的值。
這里情況比較復雜，這里先簡單說下，會在一篇寫margin相關的文章詳細闡述下。

2.margin不生效
最多出現在firefox，或者受浮動及定位影響，可以考慮用padding代替。

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型機器學習模型選擇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112410.html

彈性盒子模型詳解

摘要：二彈性盒模型歷史彈性盒模型歷史英文原版或者查看中文翻譯版另外附上標準文檔彈性盒模型在過去幾年間制定了三版草案規范。給子元素直接添加屬性即可七后話以上是本文所有內容，以下是小白我的感慨。一、前言由于W3C在制定彈性盒模型內容有多版草案，在網上瀏覽了很多視頻和文章，版本有新有舊，所以準備寫一篇關于彈性盒模型的文章，一是輔助自己學習，二是幫忙其他前端學習者更容易地彈性盒模型。二、彈性盒...

rozbo 2019-08-28 18:27 評論0 收藏0
前端大雜燴 - 收藏集 - 掘金

摘要：作者將原素材文章進行了新內容的添加和重新排列，但是因為文章百度前端技術學院面向大學生的前端技術學習平臺前端掘金由百度創辦的免費前端技術學習實踐交流分享平臺。簡直是前端黑科技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。神器！解放你的雙手——UI 設計稿全自動切圖和標注的一些工具推薦 - 前端 - 掘金原文收錄在我的 GitHub博客 (https://github.com/jaw...

cucumber 2019-08-29 12:35 評論0 收藏0
盒模型一二三（一）：盒世界，知幾何

摘要：比如表示上下左右都是像素塊元素居中的樣式，表示上下表示左右而表示上，左右，下。瀏覽器對塊元素的默認樣式問題如下塊元素的盒模型樣式復合屬性寫法如果我們想給添加樣式，可以這樣寫為了精簡代碼，也可以采用如下的復合屬性寫法學習 HTML 和 CSS 將近一個月，我以為：層級（嵌套）關系和盒模型（Box Model）是理解和學習這兩門語言的基石，正如圖層概念是 Photoshop 的基礎。因此...

tuantuan 2019-08-28 18:15 評論0 收藏0
深入css布局 (1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內元素，行內塊級元素。行內級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們...

ky0ncheng 2019-04-23 13:43 評論0 收藏0