CSS定位——文檔流定位


關於CSS的定位機制Ⅰ

㈠概念

對於盒子模型來說,也就是頁面元素,這些盒子究竟在頁面的什么位置,怎樣排列它,那么找到它的位置,確定它的位置,這個就是定位機制所決定的。

 

㈡分類

文檔流, 浮動定位,層定位

 

㈢三種類型定位的功能

⑴文檔流定位(normal flow)   默認

我們不需要額外的設置,每種元素它們在當前的網頁上面呈現出來的狀態都不同,文檔流定位就相當於我們平常寫字一樣,都是從上到下,從左到右,只是有的元素會單獨占一行,有的元素跟其他元素在一行上顯示。

⑵浮動定位(float)

改變默認的文檔流定位的情況,用div區域做出兩個盒子希望它水平的並排排列,這時候要讓它脫離文檔流,讓它浮動起來。一個向左浮動,一個向右浮動。這樣就形成了這種並排排列的感覺。當我們要對一個大盒子里面拆分成若干列的時候,通常采用這樣的浮動定位。

⑶層定位(layer)    設置一個position屬性

希望當前網頁元素向圖層一樣前后層疊在一起,有一個疊加的效果,擺在上面的層可以遮蔽掉下面的層,此時選擇層定位的方式。

 

㈣文檔流定位

Ⅰ元素分類---block

⑴元素的特點

1.獨占一行

2.元素的height,width,margin,padding都可以設置

⑵常見的block元素

<div>,<p>,<h1>....<h6>,<ol>,<ul>,<table>,<form>

⑶元素的轉換類型:display屬性

例如:a{display:block;}   inline元素a轉換為block元素,從而使a元素具有塊狀元素的特點。

 

Ⅱ 元素分類—inline

⑴元素的特點

1.不單獨占一行,即寬度夠用的情況下,所有的inline類型的元素都在一行顯示

2.width,height不可設置

3.width就是它包含的文字或圖片的寬度,不可改變

⑵常見的inline元素

<span>,<a>

⑶將元素顯示為inline元素

例如:div{display:inline;}

⑷inline元素之間有一個間距的問題

方法:將inline轉換成block等其他類型的元素來進行顯示。

 

Ⅲ 元素的分類—inline-block

⑴元素的特點

①不單獨占用一行

②元素的height,width,margin,padding都可以設置

⑵常見的inline-block元素:<img>

⑶將元素顯示為inline-block元素

例如:display:inline-block;

 

Ⅳ 元素類型轉換:display屬性

⑴display:none                            元素不會被顯示

⑵display:block                           顯示為block元素

⑶display:inline                           顯示為inline元素

⑷display:inline-block                 顯示為inline-block元素

 

小結:如下圖所示

 

      希望有所幫助。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM