有關CSS浮動和定位定義和用法介紹
- 巴扎黑原創
- 2017-08-09 15:51:521978瀏覽
一、浮動
1.浮動元素
1.對於浮動元素，有幾點需要記住：
首先，會以某種方式將浮動元素從文檔的正常流中刪除，不過他還是會影響佈局；
2. 採取css的特有方式，浮動元素幾乎“集自成一派”，不過他們還是對文檔的其餘部分有影響；
3. 當一個元素浮動時，其他元素會「環繞」該元素。浮動元素周圍的外邊距不會合併。
4.不浮動：float:none用來防止元素浮動。
2.浮動的詳細內幕
在詳細了解浮動的內容之前，首先我們要知道什麼是包含區塊。
浮動元素的包含區塊時是其最近的區塊級祖先元素。
css提供了一系列的規則來控制浮動元素的擺放：
浮動元素的左(或右)外邊界不能超出其包含區塊的左(或右)內邊界；
浮動元素的左(或右)外邊界必須是來源文件中先前出現的左浮動(或右浮動)元素的右(或左)外邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下方。
左浮動元素的右外邊界不會在其右邊右浮動元素的做外邊界的右邊。
一個浮動元素的頂端不能比其父元素的內頂端更高；
浮動元素的頂端不能比之前所有的浮動元素或區塊級元素的頂端較高。
如果來源文件中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所產生框的任何行框的頂端更高
左（或右）浮動元素的左邊（右邊）有另一個浮動元素，前者的右外邊界不能在其包含塊的右（左）邊界的右邊（左邊）
浮動元素必須盡可能高的放置
左浮動元素必須向左進盡可能遠，右浮動元素則必須向右盡可能遠。
3.實用行為
首先，我們先來看看浮動元素比其父元素高時會有什麼結果。
css2.1澄清了浮動元素行為的一個面向：浮動元素會延伸，從而包含其所有後代浮動元素。 所以，將父元素置為浮動元素，就可以把浮動元素包含在其父元素內。
4.負外邊距
負外邊距可能導致浮動元素移到其父元素的外部。透過設定負外邊距，元素可能看起來比其父元素更寬，同樣的道理，浮動元素也可能超過其父元素。
看上去，這個規則好像是和前面的相矛盾(浮動元素放在其父元素之外了)；
但是仔細研究一下上一節的規則就可以發現，這個在技術上其實是允許的，一個浮動元素的外邊界必須在父元素內，不過由於外邊距為負，放置浮動元素的內容時就好像覆蓋了自己的外邊界一樣。
5.浮動元素、內容和重疊
還有一個有趣的問題，如果一個浮動元素與正常流中的內容重疊會怎麼樣？
css2.1指定以下規則：
行內框與一個浮動元素重疊時，其邊框，背景和內容都在浮動元素「之上」顯示。
方塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素「之下」顯示，而內容在浮動元素「之上」顯示。
6.清除
有時候，我們可能不總是希望內容流過浮動元素，某些情況下，可能要刻意避免這種行為。例如：
為了確保所有的h3元素不會放在左浮動元素的右邊，可以設定h3{clear:left;}。這可以理解為「確保一個h3的左邊沒有浮動圖像」;
二、定位
#1.基本概念
利用定位，可以準確的定義元素框相對於其正常位置應該出現在哪裡，或相對於父元素、另一個元素設定瀏覽器視窗本身的位置。
2.定位的類型
static（初始值）：
元素框正常生成，區塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。relative：
元素框偏移某個距離。元素仍保持其未定位前的形狀，他原本所佔的空間仍保留。absolute：
元素框從文件流完全刪除，並相對於其包含區塊定位，包含區塊可能是文件中的另一個元素或初始包含區塊。元素原先在正常文件流中的所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後產生一個區塊級框，而不論原來他在正常流中產生何種類型的框。fixed:
元素框的表現類似於將position設為absolute，不過其包含區塊是視窗本身。
3.包含區塊
對於浮動元素，其包含區塊的定義為最近的區塊級祖先元素。
對於定位，情況則比較複雜：
- 「根元素」的包含塊(也稱初始包含塊)由用戶代理建立，在HTML中，根元素就是html元素，不過有些瀏覽器會使用body作為根元素。
- 對於一個非根元素，如果其position值是relative或static，則包含區塊則由最近的區塊級框、表單元格或行內區塊祖先框的內容邊界過程。
- 對於一個非根元素，如果其position值是absolute，則包含區塊設定為最近的position值不是static的祖先元素。
4.偏移屬性
上面我們介紹了三種定位機制使用了四種屬性來描述定位元素各邊相對於其包含區塊的偏移。我們將這四個屬性成為偏移屬性，這對於完成定位是很重要的一部分。
- 對於top和bottom，相對於包含區塊的高度
- 對於right和left，相對於包含區塊的寬度
這些屬性描述了距離包含區塊最近邊的偏移，所以又得名offset。
5.寬度和高度
設定寬度和高度
如果想為定位元素指定一個特定的寬度，顯然要用width屬性，類似的，利用height，也可以為定位元素聲明特定的高度。
限制寬度和高度
可以使用min-width和min-height，為元素的內容區定義一個最小尺寸。
類似的，也可以使用屬性max-width和max-height來限制元素的尺寸。
6.內容溢出與剪裁
溢位
假設因某些原因，一個元素固定為某個特定大小，但內容在元素中放不下，此時就可以利用overflow屬性來控制這種情況；
- visible：
預設值，表示元素的內容在元素框之外也能看見。一般的，這會導致內容超出自己的元素框，但不會改變框的形狀。
- hidden：
元素的內容會在元素框的邊界處裁剪，不會提供滾動介面使用戶存取超出剪裁區域的內容；
- scroll：
元素的內容會在元素框的邊界處裁剪，但是會提供一個滾動機制供使用者使用。
7.內容剪裁
如果一個絕對定位元素的內容溢出其內容框，而且overflow設定為要求裁剪該內容，透過使用屬性clip可以改變剪裁區域的形狀。
clip:rect(top,right,bottom,left);
8.元素可見性
除了剪裁溢出，也能控制整個元素的可見度。
visibility:
- visible 可見的
- hidden 不可見的。
- collapse
- inherit
visibility：collapse 當在表格元素中使用時，此值可刪除一行或一列，但它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 “hidden”。
visibility:hidden 當元素透過設定visibility處於「不可見」狀態時，元素還是會影響文件的佈局，就好像他還是可見一樣。換句話說，元素還在那裡，只是你看不見它。這與display:none有差別，後者不但不可見。也會從文件中刪除，所以對文件佈局沒有影響。
9.絕對定位
包含區塊與絕對定位元素
元素絕對定位時，則會完全移除文件流程。然後相對於其包含塊定位。這說明，絕對定位的元素可能覆蓋其他元素，或被其他元素覆蓋。
絕對定位元素的包含區塊是最近的position值不為static的祖先元素，創作人員通常會選擇一個元素作為絕對定位元素的包含區塊，將其position指定為relative而且沒有偏移。
自動邊偏移
元素的靜態位置一詞大致的意義是：元素在正常流中原本的位置。更確切的講，「頂端」靜態位置是從包含區塊的上邊界到假想框的上外邊距邊界之間的距離。
10、非替換元素的放置和大小
一般地，元素的大小和位置取決於其包含區塊。各個屬性的值也會有一些影響，不過最主要的還是其包含塊。
11.替換元素的放置與大小
非替換元素和替換元素的定位規則大不相同。這是因為替換元素有固有的高度和寬度，因此其大小不會改變。
在決定替換元素位置與大小時，所涉及的行為以下列規則描述最為容易：
- 如果width設定為auto，width的實際使用值由元素內容的固有寬度決定。
- 從左向右讀的語言中，如果left的值為auto，要把auto換成靜態位置。從右向左同理;
- 如果left或right仍為auto，則將margin-left或margin-right的auto值替換為0;
- 如果此時margin-left和margin-right都還定義為auto，則將他們設定為相等的值，從而將元素在其包含區塊中居中；
- 在此之後，如果只剩下一個auto值，則將其修改為等於等式的餘下部分。
12、Z軸上的放置
##透過屬性z-index進行控制13、固定定位 固定定位和絕對定位很類似，只不過固定元素的包含塊是視窗。固定定位時，元素會完全從文件流程中移除，不會有相對於文件中任何部分的位置。 14、相對定位 理解起來最簡單的定位機制就是相對定位。採取此機制時，將透過使用偏移屬性來移動定位元素。以上是有關CSS浮動和定位定義和用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！