推廣 熱搜: WEB前端教程  雅思培訓班  雅思培訓 

WEB前端教程:CSS浮動定位

   日期:2019-04-22     瀏覽:724    
核心提示:1.定義定義元素框相對于其正常位置應該出現的位置2.分類普通流定位浮動定位相對定位絕對定位固定定位浮動定位指將元素排除在普通

1.定義

定義元素框相對于其正常位置應該出現的位置

2.分類

普通流定位

浮動定位

相對定位

絕對定位

固定定位

浮動定位指

將元素排除在普通流之外

元素將不在頁面中占據空間

將浮動元素放置在包含框的左邊或者右邊

浮動元素依舊位于包含框之內

浮動的框可以向左或者向右移動,直到他的外邊緣碰到包含框或另一個浮動框的邊框為止


浮動元素的外邊緣不會超過其父元素的內邊緣

浮動元素不會互相重疊

浮動元素不會上下浮動

行內元素浮動后會變為塊級元素

語法:float:none/left/right;


CSS 清除浮動:

描述:清除浮動是在使用了浮動之后必不可少的,為了網站布局的效果,清除浮動也變得非常麻煩。

屬性:clear

值:left、right、both

清除浮動的常用方式:

1.結尾處加空div標簽 clear:both (或在下一個元素上加clear:both;)

2.浮動元素的父級div定義 偽元素::after

3.浮動元素的父級div定義 overflow:hidden

4.浮動元素的父元素定高

display屬性

根據CSS規范的規定,每一個網頁元素都有一個display屬性,用于確定該元素的類型,每一個元素都有默認的display屬性值,比如div元素,它的默認display屬性值為“block”,稱為塊元素,而span元素的默認display屬性值為“inline”,稱為“行內”元素。

塊元素與行元素是可以轉換的,也就是說display的屬性值可以由我們來改變 。

display常見屬性值

1. none:隱藏對象

2. inline:指定對象為內聯元素

3. block:指定對象為塊元素

4. inline-block:指定對象為內聯塊元素

5. table-cell:指定對象作為表格單元格

6. flex:彈性盒

visibility:hidden和display:none和opacity:0的區別:

1.visibility:hidden和opacity:0會將元素隱藏,但是物理空間實際存在2.display:none 影藏元素,不保留物理空間

網頁中大部分對象默認是占用文檔流,也有一些對象是不占文檔流的,比如表單中隱藏域。當然我們也可以讓占用文檔流的元素轉換成不占文檔流,這就要用到CSS中屬性position、float、display來控制。默認情況下,所有元素都處在文檔流中,四種情況將使得元素離開文檔流:浮動float、絕對定位absolute、固定定位fixed、元素不顯示display:none,這種情況不占文檔流的空間,而普通元素的位置基于文檔流。

z-index堆疊順序

一旦修改了元素的定位方式,則元素可能會發生堆疊

可以使用z-index屬性來控制元素框出現的重疊順序

z-index僅能在定位的元素上生效

z-index屬性:

值為數值,數值越大表示堆疊順序越高,即離用戶越近

可以設置為負值,表示離用戶更遠 ,一般不要設置

Z-index 僅能在定位元素上奏效


 
標簽: WEB前端教程
打賞
 
更多>同類資訊

推薦圖文
推薦資訊
點擊排行
網站首頁  |  關于我們  |  聯系方式  |  使用協議  |  版權隱私  |  網站地圖  |  排名推廣  |  廣告服務  |  網站留言  |  RSS訂閱  |  違規舉報  |  粵ICP備19057289號-9
 
伦理电影在线手机观看神马一视频