css盒模型是本節(jié)教程的重點(diǎn)。前面幾個(gè)知識(shí)點(diǎn),如果您會(huì)用表格布局的話,就非常好理解和掌握了。這里的盒模型是和table布局的一個(gè)不同點(diǎn)。學(xué)習(xí)web標(biāo)準(zhǔn),首先要弄懂的就是這個(gè)盒模型,這就是DIV排版的核心所在。傳統(tǒng)的表格排版是通過(guò)大小不一的表格和表格嵌套來(lái)定位排版網(wǎng)頁(yè)內(nèi)容,改用CSS排版后,就是通過(guò)由CSS定義的大小不一的盒子和盒子嵌套來(lái)編排網(wǎng)頁(yè)。這種排版方式的網(wǎng)頁(yè)代碼簡(jiǎn)潔,表現(xiàn)和內(nèi)容相分離,維護(hù)方便,能兼容更多的瀏覽器,比如PDA設(shè)備也能正常瀏覽。
那么它為什么叫盒子呢?先說(shuō)說(shuō)我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名:內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。
我們可以把它想像成現(xiàn)實(shí)中上方開口的盒子,然后從正上往下俯視,邊框相當(dāng)于盒子的厚度,內(nèi)容相對(duì)于盒子中所裝物體的空間,而填充呢,相當(dāng)于為防震而在盒子內(nèi)填充的泡沫,邊界呢相當(dāng)于在這個(gè)盒子周圍要留出一定的空間,方便取出。是不是這樣就很容易理解盒模型了。
所以整個(gè)盒模型在頁(yè)面中所占的寬度是由左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊界組成,而css樣式中width所定義的寬度僅僅是內(nèi)容部分的寬度,這是許多朋友容易搞混的地方
這里的邊界我們也稱之為:外邊距、外補(bǔ);填充也叫:內(nèi)邊距、內(nèi)補(bǔ)丁。
|
首頁(yè)| 關(guān)于億泰| 服務(wù)支持| 產(chǎn)品體驗(yàn)| 客戶案例| 新聞中心| 基礎(chǔ)服務(wù)| 聯(lián)系我們| 網(wǎng)站地圖
淄博網(wǎng)站建設(shè)服務(wù)地區(qū):張店、臨淄、博山、淄川、周村、博興、鄒平、廣饒、桓臺(tái)、高青、開發(fā)區(qū)、濱州、東營(yíng)
版權(quán)所有:淄博億泰信息技術(shù)有限公司 Copyright © Corporation, All Rights Reserved 備案號(hào): 魯ICP備15029606號(hào)-5 魯公安網(wǎng)備 37030302000245號(hào)