在講解盒子模型之前，要明確知道html和css是做什麼事的？

html（超文本標記語言）：負責畫頁面的，但是畫出來的頁面並不好看！只能說是把頁面中需要的元素全都羅列出來。

css（層疊樣式表）：上面說html畫出的頁面不好看，那麼就需要將不好看的頁面修飾的好看呀！用的技術就是我們說的css了！

那麼在使頁面變得好看炫酷的同時，就涉及到頁面各個元素之間的排版，頁面上的各個元素之間就需要一個思維模型的理論纔可以設計呀！

這個理論模型 ，就是盒子模型。我們看頁面之間的元素之間的關係：

那麼就元素1來看，他在頁面中佔用的寬度到底是什麼？高度到底是什麼？

寬：margin-left+border+padding-left+元素寬度+padding-right+border+margin-right

高：margin-top+border+padding-top+元素高度+padding-bottom+border+margin-bottom

對於這個理論的證明，我們可以寫一段 代碼：

打開谷歌瀏覽器的前臺調試（f12打開），查看盒子模型：

上面只是大致講解，本技術用文字表述，寫起來有點費勁，所以我配套了一個盒子模型對應的視頻，可以看具體調試步驟和盒子模型具體理論：

百度雲地址：

（1）盒子模型講解：

鏈接：https://pan.baidu.com/s/1aXqnYlAX2p0HC7odiMSgrw

提取碼：drbk

（2）盒子模型新版12306中案例練習：

鏈接：https://pan.baidu.com/s/15qI75x7zP6ej6b6aI_o6Eg

提取碼：03j1

推薦閱讀：

相關文章