構建靜態頁面之 [ 浮動 ]

Scliang 發布于2019-08-02 11:21 / 2309人閱讀

摘要：浮動描述是對頁面布局的一種表現方式設置浮動的元素會脫離文檔流設置浮動的元素會改變后面元素的顯示位置屬性表示設置元素浮動屬性值表示設置元素左浮動屬性值表示設置元素右浮動設置浮動的元素會脫離文檔流，指定元素后面的元素會自動向前，形成重疊的顯

浮動描述

是對頁面布局的一種表現方式

設置浮動的元素會脫離文檔流

設置浮動的元素會改變后面元素的顯示位置

float屬性

表示設置元素浮動

left屬性值 - 表示設置元素左浮動

right屬性值 - 表示設置元素右浮動

設置浮動的元素會脫離文檔流，指定元素后面的元素會自動向前，形成重疊的顯示效果


    
    浮動

元素類型的浮動 塊級元素浮動

垂直方向排列改為水平方向排列

顯示寬度由父級寬度的 100% 變為 0（在沒設寬的情況下）


    
    元素類型的浮動

內聯元素浮動

允許設置寬度和高度


    
    元素類型的浮動

行內塊級元素浮動

去掉了元素之間的間隙


    
    元素類型的浮動

父子關系的浮動

子級元素的浮動范圍，不能超出父級元素的所在區域范圍

父級元素浮動，子級元素也會跟隨父級一同浮動


    
    父子關系的浮動

兄弟關系的浮動

如果下一個兄弟元素浮動，下一個兄弟元素不會超過上一個兄弟元素所占的區域位置


    
    兄弟關系的浮動

高度塌陷

父級元素沒設高度，子級元素設置浮動 - 父級元素會高度塌陷

高度塌陷 - 僅存在父子關系中

解決方法

為父級元素設置高度

開啟BFC環境

浮動可以開啟 - 脫離文檔流

將元素類型改為行內塊級元素可以開啟 - 行內塊級元素的本身問題

overflow屬性屬性值為hidden時可以開啟 - 解決內容溢出

設置絕對定位可以開啟 - 脫離文檔流

注意：開啟BFC方法所帶來的副作用


    
    高度塌陷

GPU云服務器云服務器 jsp 設置頁面之靜態頁面動靜態頁面 html靜態頁面

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

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

構建靜態頁面之 [ 浮動 ]

摘要：浮動描述是對頁面布局的一種表現方式設置浮動的元素會脫離文檔流設置浮動的元素會改變后面元素的顯示位置屬性表示設置元素浮動屬性值表示設置元素左浮動屬性值表示設置元素右浮動設置浮動的元素會脫離文檔流，指定元素后面的元素會自動向前，形成重疊的顯浮動描述是對頁面布局的一種表現方式設置浮動的元素會脫離文檔流設置浮動的元素會改變后面元素的顯示位置 float屬性表示設置元素浮動 ...

snowell 2019-08-29 16:32 評論0 收藏0
構建靜態頁面之 [ 布局 ]

摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內塊級元素（text-a...

andot 2019-08-29 16:31 評論0 收藏0
構建靜態頁面之 [ 布局 ]

摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內塊級元素（text-a...

JessYanCoding 2019-08-02 16:31 評論0 收藏0
【靜態頁面架構】CSS之定位

摘要：架構浮動是以屬性設置容器指定的位置當前元素設置為浮動后，只影響當前元素后面的所有元素的位置塊級元素不再獨占一行，多元素之間會水平方向排列設置浮動后，會從頁面的文檔流脫離默認寬度是父級寬度的高度是后者的所有元素高度之和左浮動寬度默認是 CSS架構 1.浮動；是以float屬性設置容器指定的位置 div { width: 200px; ...

scq000 2019-08-29 16:34 評論0 收藏0
前端面試題目匯總

摘要：線程在執行過程中與進程還是有區別的。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。關于js 1.原型鏈 2.AJAX請求數據時解決緩存的辦法3.js的繼承 ...

lastSeries 2019-08-21 11:42 評論0 收藏0