2019獨角獸企業重金招聘Python工程師標準>>>

一.浮動:float:一個元素浮動時,其他內容會"環繞"該元素.

• 浮動元素的外邊距不會合并
• 浮動的元素不能超出其包含快的內邊界
• 浮動元素彼此會避免重疊
• 浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高
• 如果沒有足夠的空間,浮動元素會被擠到一個新的行上
• 左浮動元素會盡可能的向左,和盡可能的向高處放置(右浮動同理)

二.清楚浮動:clear,禁止浮動元素出現其傍邊,浮動的元素會往下推

值: ? ? ? ?left | right | both | none | inherit

初始值: none

應用于: 塊級元素

繼承性: 無

計算值: 根據指定確定

三.定位:position

值: ? ? ? ?static| relative| absolute| fixed| inherit

初始值: static

應用于: 所有元素

繼承性: 無

計算值: 根據指定確定

1.包含塊概念:

• "根元素"的包含塊(也稱為初始包含塊)由用戶代理建立.在html中,根元素就是html,不過有些瀏覽器會使用body作為根元素.在大多數瀏覽器中,初始包含塊是一個視窗大小的矩形.
• 對于一個非根元素,如果其position值是relative或static,包含塊則由最近的塊級框、變單元格或行內塊祖先框的內容邊界構成。
• 對于一個非根元素，如果其position值為absolute,其包含塊設置為最近的position值不是static的祖先元素(可以是任何類型).這個過程如下

? ? ? ? ?--1.如果這個祖先元素是塊級元素,包含塊則設置為該元素的內邊距邊界.

? ? ? ? ?--2.如果是行內元素,包含塊則設置為該祖先元素的內容邊界.

? ? ? ? ?--3.如果沒有祖先,則元素的包含塊為初始包含塊.

2.

• relative:元素框偏移某個距離.元素仍保持其為定位前的形狀,它原本所占的空間仍保留.
• absolute:元素從文檔流完全刪除,并相對于其包含塊定位.元素原本所占空間不保留.
• fixed:元素框的表現類似于absolute,不過其包含塊是視窗本身.

3.偏移屬性:對于三種定位機制(relative,absolute和fixed)使用了四個屬性來描述定位元素各邊相對于其包含塊的偏移.(正值表示向內偏移,負值向外)

????????????????? ? top ? ? right ? ? ?bottom ? ? ?left

值: ? ? ? ?<length>| <percentage>| auto| inherit

初始值: auto

應用于: 定位元素(也就是position值不是static的元素)

繼承性: 無

百分數:對于top和bottom,相對于包含塊的高度,對于right和left,相對于包含塊的寬度

計算值: 對于static元素為auto,對于長度值,是相應的絕對長度,對于百分數值,則為指定值,否則為auto

?

?

轉載于:https://my.oschina.net/langgege/blog/1503030

總結

以上是生活随笔為你收集整理的浮动与定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。