資源描述：
《基于CSS盒子模型float屬性解析.pdf》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、學術(shù)探討應(yīng)用技術(shù)與研究2015年第4期基于CSS盒子模型float屬性解析蔣昀昕(福建衛(wèi)生職業(yè)技術(shù)學院公共基礎(chǔ)部，福建福州350101)[摘要]本文介紹了盒子模型與標準文檔流的概念，闡述了盒子在標準流中的定位原則。重點解析了CSS中的浮動屬性，并通過具體的網(wǎng)頁布局實例進一步說明浮動屬性的用法。[關(guān)鍵詞]CSS；浮動；盒子模型；標準文檔流中圖分類號：TP311文獻標識碼：A文章編號：1008-66609(2015)04-0060-03流”。HTML文檔中的元素可以分為兩大類：塊級元素和行1引言內(nèi)元素。盒子模型是CSS控制頁面時一個重要的概念。只
2、有掌握了盒子模型以及其中每個元素的用法，才能真正地控制好頁面中的各個元素。本文主要介紹盒子模型的基本概念，以及在標準流情況下的盒子相互關(guān)系，解析了盒子模型的float屬性。2盒子模型的概念所謂盒模型，就是瀏覽器為頁面中的每個HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型（visualformattingmodel）在頁面上排布。可見的頁面版式主要由三個屬性控制：position屬性、display屬性和float屬性。其中，position屬性控制頁面上元素間的位置關(guān)系，display屬性控圖1標準盒子模型制元素是堆疊、并排或是根
3、本不在頁面上出現(xiàn)，float屬性提供控制的方式，以便把元素組成多欄布局[1]。(1)塊級元素（blocklevel）：總是以一個塊的形式表現(xiàn)出盒子模型是CSS的基石之一，它指定元素如何顯示以及來，并且跟同級的兄弟塊依次豎直排列，左右自動伸展，直到各元素之間如何相互交互。頁面上的每個元素都被瀏覽器包含它的元素的邊界，在水平方向不能并排?？闯墒且粋€矩形的盒子，這個盒子由元素的內(nèi)容、填充、邊框(2)行內(nèi)元素（inline）：對于文字這類元素，各個字母之間和邊界組成。網(wǎng)頁就是由許多個盒子通過不同的排列方式橫向排列，到最右端自動折行，這就是另一種元素，
4、稱為“行（上下排列，并列排列，嵌套排列）堆積而成。每個HTML元內(nèi)元素”。行內(nèi)元素不占據(jù)單獨的空間，依附于塊級元素，行素都可以看作是一個裝了東西的盒子。盒子里面的內(nèi)容到內(nèi)元素沒有自己的區(qū)域。它同樣是DOM樹中的一個節(jié)點，盒子的邊框之間的距離即填充(padding)，盒子本身有邊框在這一點上行內(nèi)元素和塊級元素是沒有區(qū)別的。(border)，而盒子邊框外和其它盒子之間，還有邊界(margin)。4盒子在標準流中的定位原則如圖1所示，默認情況下盒子的邊框是無，背景色是透明，所如果要精確地控制盒子的位置，就必須對margin有更深以我們在默認情況下看
5、不到盒子。入的了解。Padding只存在于一個盒子內(nèi)部，所以通常它不3標準文檔流會涉及與其它盒子之間的關(guān)系和相互影響的問題。Margin標準文檔流（NormalDocumentStream），簡稱“標準流”，則用于調(diào)整不同的盒子之間的位置關(guān)系，因此必須要對mar-是指在不使用其它的與排列和定位相關(guān)的CSS規(guī)則時，各種gin在不同情況下的性質(zhì)有更深入的了解[2]。元素的排列規(guī)則。通俗地說，將窗體自上而下地分成一行(1)行內(nèi)元素之間的水平margin：當兩個行內(nèi)元素緊鄰行，并在每行中按從左至右的順序排放元素，即稱為“文檔時，它們之間的距離為第1個
6、元素的margin-right加上第2個——————————————作者簡介：蔣昀昕，女，安徽合肥人，講師，碩士，研究方向：優(yōu)化算法。-60-應(yīng)用技術(shù)與研究學術(shù)探討2015年第4期元素的margin-left。預(yù)料。浮動圖片元素則不需要，因為圖片本身有其默認的寬(2)塊級元素之間的豎直margin：兩個塊級元素之間的度。距離不是margin-bottom與margin-top的總和，而是兩者中的在標準流中，塊級元素的盒子都是上下排列，行內(nèi)元素較大者。這個現(xiàn)象稱為margin的“塌陷”現(xiàn)象，意思是較小的的盒子都是左右排列，如果僅僅按照標準流的方
7、式進行布margin塌陷到了較大的margin中。局，就只有幾種可能性，限制太大。CSS的設(shè)計者也想到了(3)嵌套盒子之間的margin：當一個
塊包含中另一這樣排列限制的問題，因此又給出了float屬性進行盒子的排個
塊中時，便形成了典型的父子關(guān)系。其中子塊的列，從而使頁面排版布局的靈活性大大提高。如圖3所示，利margin將以父塊的content為參考。用float屬性使得相鄰塊級元素左右排列，形成兩欄布局框(4)將margin設(shè)置為負值：當margin為負數(shù)時，會使被設(shè)架。同理，如果你創(chuàng)建了三個浮動、固定寬度的元素，而且
8、水為負數(shù)的塊向相反的方向移動，甚至覆蓋在另外的塊上。當平空間也足以容納它們，那么它們就會并排在一起構(gòu)成三欄塊之間是父子關(guān)系時，通過設(shè)置子塊的margin參數(shù)為負數(shù)，
當前文檔最多預(yù)覽五頁，下載文檔查看全文
溫馨提示：
1. 部分包含數(shù)學公式或PPT動畫的文件，查看預(yù)覽時可能會顯示錯亂或異常，文件下載后無此問題，請放心下載。
2. 本文檔由用戶上傳，版權(quán)歸屬用戶，天天文庫負責整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細閱讀文檔內(nèi)容，確認文檔內(nèi)容符合您的需求后進行下載，若出現(xiàn)內(nèi)容與標題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤，付費完成后未能成功下載的用戶請聯(lián)系客服處理。
