CSS布局模型盒
Css盒模型(Box Model)是用來描述CSS中塊狀對象的一種模型。通過該模型,可以將CSS的塊狀對象的各種屬性十分貼切、形象地表現(xiàn)出來,以協(xié)助網頁設計者理解CSS塊狀布局的原理。盒模型是CSS布局的基礎。
1.盒模型的結構
在CSS中,所有的塊狀對象都被視為一個矩形框。該矩形框的所有與位置相關的屬性都被視為盒模型的一部分。盒模型的結構如圖4-5所示。
CSS定義的塊狀對象都包括邊界區(qū)、邊框、填充區(qū)和內容4個部分。使用CSS可以定義這些區(qū)域的大小,而不影響塊狀對象的內容。在網頁中,標準的CSS塊狀對象高度計算公式如下所示。
而標準的Css塊狀對象寬度計算公式則如下所示。
理解了網頁的塊狀對象高度和寬度的計算方法,就可以根據(jù)這些方法來定義這些對象在網頁中的排列方式。
2.邊界
在Css中,邊界又被稱作外補丁。定義塊狀對象的邊界,需要使用復合屬性margin以及其4種子屬性,如表4-25所示。
使用不帶復合屬性的margin屬性也可以為網頁對象設置4邊的邊界值。其方法是為margin屬性設置多個屬性值。為margin屬性設置兩個屬性值時,其第I個屬性值定義網頁對象頂部和底部的邊界,而第2個屬性值定義網頁對象左側和右側的邊界,其代碼如下所示。
為margin屬性設置3個屬性值時,其第1個屬性值定義網頁對象頂部的邊界,個屬性值定義網頁對象左側和右側的邊界,第3個屬性值定義網頁對象底部的邊界,代碼如下所示。
為margin屬性設置4個屬性值時,其4個屬性值分別定義網頁對象的頂部、右側、底部和左側的邊界寬度,其代碼如下所示。
3.填充
在Css中,填充又被稱作內補丁。定義塊狀對象的填充,需要使用復合屬性padding以及其4種子屬性,如表4-26所示。
使用不帶復合屬性的padding屬性也可以為網頁對象設置4邊不同的填充值。其方法是為padding屬性設置多個屬性值.為padding屬性設置兩個屬性值時,其第l個屬性值定義網頁對象頂部和底部的填充,而第2個屬性值定義網頁對象左側和右側的填充,其代碼如下所示。
為margin屬性設置3個屬性值時,其第1個屬性值定義網頁對象頂部的填充,第2個屬性值定義網頁對象左側和右側的填充,第3個屬性值定義網頁對象底部的填充,其代碼如下所示。
為margin屬性設置4個屬性值時,其4個屬性值分別定義網頁對象的頂部、右側、底部和左側的填充寬度,其代碼如下所示。
推薦新聞
更多行業(yè)-
建設應用型網站的意義
建沒應用型網站對企業(yè)的日常經營管理以及發(fā)展前景有著重要的意義,其功能具...
2015-01-09 -
徐州網站建設如何設計才能吸引用戶
事實上,網站建設公司在為企業(yè)搭建網站時,往往會考慮效果而忘記實際效果。...
2021-12-14 -
建站之網站具備品之三段JS代碼的作用
建站之網站具備品之三段JS代碼的作用在搜索引摯的算法中,所有的站長都知...
2011-12-30 -
電子商務網站發(fā)展的三個階段
在電子商務網站設計的初期階段,其首要任務是自我推廣,使用戶對本網站產生...
2015-01-09 -
網頁自薦書該如何做?
網站設計發(fā)展速度之快,要制作網頁自薦稱書,首先需要建立自己的個人主頁。...
2014-07-29 -
黑客與網絡安全
中國互聯(lián)網絡信息中心調查發(fā)現(xiàn),僅2010年上半年,就有59. 2%的網...
2014-06-17
預約專業(yè)咨詢顧問溝通!
免責聲明
非常感謝您訪問我們的網站。在您使用本網站之前,請您仔細閱讀本聲明的所有條款。
1、本站部分內容來源自網絡,涉及到的部分文章和圖片版權屬于原作者,本站轉載僅供大家學習和交流,切勿用于任何商業(yè)活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關法律法規(guī),當本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準。
4、如果侵害了您的合法權益,請您及時與我們,我們會在第一時間刪除相關內容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com