HTML float 和 absolute

妤鋒シ發布于2019-04-23 11:54 / 1214人閱讀

摘要：相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。對象遵循正常文檔流，但將依據，，，等屬性在正常文檔流中偏移位置。另外，對象脫離正常文檔流，使用，，，等屬性進行絕對定位。因為它原本所占的空間仍然占據文檔流。

block元素和inline元素在文檔流中的排列方式:

block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。
inline元素的margin和padding屬性: 水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

文檔流: 指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流: 將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。只有絕對定位absolute和浮動float才會脫離文檔流。




    
    Title
    





    菜單一
    菜單二
    

底部

效果如下：

使用 overflow: hidden




    
    Title
    



    菜單一
    菜單二

底部

效果如下：

position(定位)

一、static
static 默認值，無定位，不能當作絕對定位的參照物，并且設置標簽對象的left、top等值是不起作用的的。

二、position: relative／absolute
relative 相對定位。
相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left 等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

absolute 絕對定位。
定義：設置為絕對定位的元素框從文檔流完全刪除，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

  重點：如果父級設置了position屬性，例如 position:relative; 那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那子元素就設置position:absolute; 父元素設置 position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
總結：參照物用相對定位，子元素用絕對定位，并且保證相對定位參照物不會偏移即可。

三、position:fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。注意點：一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。在理論上，被設置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。




    
    Title
    




返回頂部

效果如下：

云服務器 GPU云服務器 float和position html5float absoluted absolute

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1330.html

【前端工程師手冊】布局

摘要：今天總結一下布局，之前校招面試的時候貌似很喜歡考布局，例如兩欄自適應布局三欄自適應布局等等，實現的方法多種多樣，總結一下以后就不亂了。脫離文檔流觸發使用脫離文檔流之后，我們再利用區域不會與浮動元素重疊的特性來使剩下的元素自適應。今天總結一下布局，之前校招面試的時候貌似很喜歡考布局，例如兩欄自適應布局、三欄自適應布局等等，實現的方法多種多樣，總結一下以后就不亂了。兩欄布局這里我們講...

maxmin 2019-08-30 14:15 評論0 收藏0
三列布局，中間自適應，關于float和positon方法

摘要：這種方法的局限性在于，必須設置父元素的高度為固定，因為的子元素已經脫離文檔流，不能撐開父元素，或者會遮蓋同級的兄弟元素。三列布局，中間自適應，嘗試了兩種方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { ...

jsyzchen 2019-08-30 12:53 評論0 收藏0
三列布局，中間自適應，關于float和positon方法

摘要：這種方法的局限性在于，必須設置父元素的高度為固定，因為的子元素已經脫離文檔流，不能撐開父元素，或者會遮蓋同級的兄弟元素。三列布局，中間自適應，嘗試了兩種方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { ...

joyqi 2019-08-01 15:08 評論0 收藏0
html和css常見的一些問題總結

摘要：至于說，，，屬性是脫離文檔流的，這個估計也是我們剛開始用得最多的，最方便的一個，同時也會給我們帶來許多問題，這一次你會發現與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來，這也是之前主要是用來做文字環繞效果有關。 html 標簽一般在html有塊級元素和行級元素，主要的塊級元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

EddieChan 2019-08-30 12:53 評論0 收藏0
html和css常見的一些問題總結

摘要：至于說，，，屬性是脫離文檔流的，這個估計也是我們剛開始用得最多的，最方便的一個，同時也會給我們帶來許多問題，這一次你會發現與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來，這也是之前主要是用來做文字環繞效果有關。 html 標簽一般在html有塊級元素和行級元素，主要的塊級元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

chadLi 2019-08-01 15:09 評論0 收藏0