關於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元素
小結:如下圖所示
希望有所幫助。