自學了半年前端,一開始學的時候沒有把基礎打牢,頁面布局時經常出問題.寫了幾個頁面后逐漸積累了一些經驗,在這里我把它整理出來:
文檔流:網頁中的元素在網頁中所占據的位置.網頁中並不是所有的元素都占據文檔流的
舉例:某個網站的布局如下,標題區域占據文檔流,內容區域就會排在標題區域的下面
當標題區域不占據文檔流時,標題區域和內容區域發生了重合:
通俗的說:標題區域失去文檔流之后,內容區域不知道他的存在了,所以他會認為顯示在網頁(body)中的只有自己一個元素,因此內容區域會顯示在最上面.
而標題區域實際上並沒有消失不見.所以他們會發生重合的情況.
定位:
css中定位用position實現,position有四個值:
position:absolute(絕對定位):不占據文檔流,可以設置偏移量.
position:relative(相對定位):占據文檔流,無論偏移量為何值,始終占據最初的文檔流
position:fixed(固定定位):不占用文檔流,永遠固定在屏幕的某個具體位置.
position:static(默認定位):static是position的默認值,也就是說"position:static"這條在css里寫不寫都是一樣的.static是position四個定位里唯一一個不開啟定位的屬性
定位的繼承:
<body> <div class="div4"> <div class="div3"> <div class="div2"> <div class="div1"> <div class="div0"></div> </div> </div> </div> </div> </body>
(1)何為定位繼承:在下面的例子中,如果div0繼承了div1,div1的偏移量為10px,那么div0的默認偏移量就是10px,如果給div0設置20px的偏移量,那么div0的偏移量就是(10+20)px
(2)繼承誰的定位:網頁中的元素會其繼承定位父元素的位置.
這里有一組結構上嵌套的div,他們呈現的網頁上的效果如下:
div0的定位是"top:20px",但它這個20像素是相對於誰的呢?div1,div4,還是body?
這要看哪個div開啟了定位,如果div1開啟了定位,那么div0就會相對於div1橫向的偏移20像素,如果div1沒有開啟定位,那么div0就會向外找div2是否開啟了定位......直到找到body或者找到其他開啟了定位的祖先元素:
被div0繼承定位的元素,就是div0的定位父元素.
相對定位+外邊距
下圖是一個手機端的優惠券領取界面,每一個優惠券div內部的布局都是相同的.為了讓保持內部的布局不變,讓里面的圖片和文字永遠相對於父級div定位,就必須將父級元素開啟定位.
如果使用絕對定位,元素不占用文檔流,那所有的優惠券div都會重疊在一起
因此要使用相對定位,相對定位如果設置了偏移量,元素所占用的文檔流就會和網頁實際顯示的位置出現偏差,因此,如果想要使用相對定位,在本例中應該使用內外邊距控制元素位置,而不是偏移量.
浮動:浮動有左浮動(float:left)和右浮動(float:right)兩種情況,浮動不占據文檔流.
清除浮動:
可以使用clear屬性清除浮動,clear可以取四個值,分別是none\right\left\both
以(clear:right)來說明,字面意思是清除某元素左側的浮動元素,但實際上並不是:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.leftDiv{
width: 100px;
height: 100px;
border: 1px solid #f00;
float: left;
clear: right;
}
.rightDiv{
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
}
</style>
</head>
<body>
<div class="leftDiv"></div>
<div class="rightDiv"></div>
</body>
</html>
程序執行的結果如圖所示:
紅色方塊(leftDiv)已經設置了右浮動,但是並沒有改變右側的黑色方塊(divRight),為什么呢?
float:right的意思是不允許左邊有浮動對象,但是這個屬性是應用在紅色方塊上的,他不會影響到黑色方塊,如果想要清除掉用測浮動的黑色方塊,應該在黑色方塊上設置清除左浮動.
還是上面的代碼,只需要在右邊的div上加一個clear:left就ok了
.rightDiv{
clear:left;
}
執行結果:
總結起來就是:clear確實是清除某側的浮動,但是clear只會影設置該屬性的元素自身,不會影響到其他元素.
解決高度塌陷問題:
這是一個浮動很常見的應用場景
浮動不占據文檔流,為了不讓下面的元素和該元素重合在一起,需要給他設置一個能夠占據文檔流的父級div,高度和浮動元素的高度相等:
但因為浮動元素不占據文檔流,他的父級div會認為他不存在.因此他無法將父級元素撐開,在下圖中,父級div變成了一條線,這就是高度塌陷問題:
如果給父級元素設置一個固定的高度,會非常不利於網頁的維護.這時就希望浮動元素能夠把他的父元素撐開:
.clearfix:after{ content: ""; display: block; clear: both; } .clearfix{ zoom: 1; }
給父元素添加clearfix這個樣式就可以做到,原理是在父元素的后面加一個屬性,清除左右浮動讓他跑到最下面,設置為block使之可以獨占一行.
這個方法使用方便,而且可復用,能夠解決兼容性問題.