在前端程式設計師眼中，頁面其實可以被視為乙個個盒子組成的
那麼，這些盒子是如何構建起整個頁面的呢？
如何理解盒模型？
文字解析：
在上一節裡面
我們知道了文件流和網頁中的dom都可以看作是盒子
而無論是文件流還是網頁狀態，要把一些元素比如h1 h2 h3放到另外乙個元素中
都需要他們屬於這個元素的子節點，這個元素則是h1 h2 h3的父節點
這個父節點，它就像是乙個打包盒，把它的子級元素打包到一起，然後作為乙個整體來進行布局
這個打包盒我們通常會用哪個元素呢？
答案是div
雖然從理論上來講大多數html元素都可以擔任打包盒這個職責
但在不考慮語義的情況下，通常都會使用div
無法區分更多的語義
因此創造出了各種專有的打包盒：
如section article hgroup等等
由此我們可以知道div是盒子，而其他的元素也都是盒子
如果想要將盒子在乙個二維的頁面中陳列開
除了它們自身出現的順序以外，還由5個基本屬性來調節它們的位置和大小
這5個屬性分別是：
寬 高 內邊距 邊框和外邊距
寬和高 決定了盒子內部空間有多大
盒子裝的內容都是放在這個區域當中
邊框就是盒子本身
可以修改盒子的厚度 材料以及顏色
內邊距和外邊距好比是給盒子內外新增的透明抗震材料
改變內邊距可以改變內容與盒子之間的距離
改變外邊距則可以改變盒子之間的距離，通過這些基本屬性改變盒子的⼤小會影響到布局
⽽盒⼦⼤小的計算模型有兩種
標準盒⼦模型和ie盒⼦模型
通過改變css屬性box-sizing的值來改變
第⼀種標準盒⼦模型
box-sizing為content-box
這種行為模式下，盒⼦子的寬和⾼只決定元素的content內容部分
⽽內邊距padding和邊框border是在content外部另外繪製
也就是說
width = content
第⼆種ie盒⼦模型
box-sizing為border-box
這種⾏為模式下，為盒⼦設定的寬和⾼決定了元素的邊框border⼤小，
那麼盒⼦的內邊距padding和邊框border都將在已設定好的寬⾼內繪製
也就是說
width = content + padding + border
因此如果為兩個盒子設定同樣的css屬性
不同的盒模型將會佔據不同的⻚面寬度
標準盒⼦模型下的盒⼦會這樣計算:
width = content = 300px
然後再額外計算padding和border的值
因此盒⼦實際佔據了了500px
ie盒⼦模型下的盒子則會這樣計算
width = content + padding + border = content + 50px * 2 + 50px * 2 = 300px
不用額外計算padding和border的值
width 設定是多少，盒子就實際佔據多少
不過通過減量計算得到盒子的content部分就只剩下100px了
在實際的開發中
為了在橫向方向上盡量不出現滾動條
通常會希望盒⼦實際佔據的寬度不超過⻚面寬度
標準盒⼦模型的解決⽅案是通過數學計算
設定寬度時需要⽤希望的寬度減去內邊距和邊框寬度
但這樣開發起來實在太過複雜
幸好我們有ie盒子模型
內邊距和邊框不會再增加盒⼦寬度
有的開發者甚⾄會這樣設定他們的css**
以保證所有盒⼦的計算都統一而且簡單直觀
怎麼樣是不是很簡單？
學會後趕緊上手寫點**練習一下吧。
第五課 文法
1.名詞 場所 行 來 帰 使用移動動詞時，移動的方向用助詞 表示。京都 行 我要去京都。日本 來 我來到了日本。帰 我要回家。注 助詞 讀作 2.行 行 完全否定疑問詞所問的全部範疇時，用助詞 與否定形式一起使用。行 也不去。何 食 什麼也不吃。第6課 沒有任何人在。第10課 3.名詞 交通工具 ...
C語言第五課
主要內容 二維陣列 字串陣列 多維陣列 理解 一 二維陣列 有兩個下標的陣列稱為二維陣列 定義 型別修飾符 陣列名 常量表示式1 常量表示式2 第一維的長度 第二維的長度 示例 定義乙個2行3列的二維陣列 int array 2 3 這是乙個標準的二維陣列 二維陣列的元素也稱為雙下標變數 0 1 2...
C語言第五課
c函式若不宣告型別，則預設為 int 型 在函式中，指標可以 被調函式 修改 主調函式 1 int func int a main 2 void func int num main int num 2 func int b 野指標會 指向任一地方 int pum printf x pum 指標偏移的...