2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

一.浮動:float:一個(gè)元素浮動時(shí),其他內(nèi)容會"環(huán)繞"該元素.

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

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

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

初始值: none

應(yīng)用于: 塊級元素

繼承性: 無

計(jì)算值: 根據(jù)指定確定

三.定位:position

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

初始值: static

應(yīng)用于: 所有元素

繼承性: 無

計(jì)算值: 根據(jù)指定確定

1.包含塊概念:

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

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

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

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

2.

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

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

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

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

初始值: auto

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

繼承性: 無

百分?jǐn)?shù):對于top和bottom,相對于包含塊的高度,對于right和left,相對于包含塊的寬度

計(jì)算值: 對于static元素為auto,對于長度值,是相應(yīng)的絕對長度,對于百分?jǐn)?shù)值,則為指定值,否則為auto

?

?

轉(zhuǎn)載于:https://my.oschina.net/langgege/blog/1503030

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。