一個(gè)頁面在html的世界里,意味著 是一個(gè)個(gè)的標(biāo)簽組成的
一個(gè)頁面在css的世界里,是一個(gè)個(gè)盒子+盒子的位置組成的

簡單來說:一個(gè)頁面就是一堆盒子的構(gòu)成,這是主心骨,至于盒子大小,位置如何,顯示效果,和移動(dòng)狀態(tài)都是基于先有盒子這個(gè)核心里面,請記住,一個(gè)頁面就是一堆盒子

盒模型:
一個(gè)完整的盒子=content+padding+border+margin組成
盒模型一般又分為兩種(瀏覽器廠商大戰(zhàn),歷史遺留問題) ie/w3c兩種,兩者區(qū)別在于對(duì)Content(內(nèi)部盒子)的定義不同,注意這里的Content是大寫開頭,區(qū)別于上面的content
ieContent=content+padding+border
W3CContent=content

這有什么影響呢? 這會(huì)影響到寬高值,我們常用到css代碼中的width和hight但是很少注意到,這里的值指的是盒子的內(nèi)部盒子Content的寬高值,而不是整個(gè)元素的寬高

舉顆栗子:
width:100px;
height:100px;
在ie的某個(gè)div元素下用這樣的代碼,就意味著,content寬+padding寬+margin寬三者總的寬度是100px;
而在w3c下,只是單純指的content內(nèi)容的寬高值

在css3中,我們可以用box-sizing 的屬性中的content-box和border-box的值來使得對(duì)應(yīng)的元素可以根據(jù)不同的盒模型來顯示

那么我們應(yīng)該什么時(shí)候分別用content-box和border-box呢? 看你的項(xiàng)目,如果要兼容ie那就用border-box,如果不用兼容ie就用標(biāo)準(zhǔn)盒子content-box

盒模型又細(xì)分外部盒子,內(nèi)部盒子,兩者分別掌控者一個(gè)盒子內(nèi)外展示的狀態(tài);display其實(shí)就是為他們兩設(shè)置的

舉顆栗子:
dispaly:inline-block
display :inline-block的意思就是外部根據(jù)inline行來顯示,也就是內(nèi)聯(lián)元素與塊元素文檔流的區(qū)別,block指的是一個(gè)盒子的內(nèi)部內(nèi)容根據(jù)block來顯示也就是根據(jù)塊元素流來顯示盒子

dispaly的作用就是影響一個(gè)盒子的顯示狀態(tài),或者更具體一點(diǎn)說是影響一個(gè)盒子內(nèi)外的文檔流狀態(tài);除此之外它還影響了元素的流,一個(gè)元素不設(shè)置width值的時(shí)候,默認(rèn)是auto

幾個(gè)同類型的元素,比如幾個(gè)div但是display的值不一樣,那么默認(rèn)的width值顯示的效果也是不一樣