【修真院web小課堂】實(shí)現(xiàn)首尾固定的三種方式
大家好，我是IT修真院成都分院第11期的學(xué)員起暮，一枚正直純潔善良的WEB程序員 今天給大家分享一下卖氨，實(shí)現(xiàn)首尾固定的三種方式。
一、背景介紹
有些界面我們需要實(shí)現(xiàn)首尾固定的布局筒捺，比如任務(wù)七里面的游戲界面柏腻，使用后可觀賞性更強(qiáng)。
二系吭、解決方案
1.absolute頭尾固定布局
對(duì)head五嫂、main、foot各自使用絕對(duì)定位來實(shí)現(xiàn)村斟。
2.fixed首尾固定布局
對(duì)head贫导、main、foot各自使用絕對(duì)定位來實(shí)現(xiàn)蟆盹。
3.彈性布局實(shí)現(xiàn)首尾固定布局
對(duì)head孩灯、main、foot各自使用絕對(duì)定位來實(shí)現(xiàn)逾滥。
三峰档、編碼實(shí)戰(zhàn)
關(guān)鍵知識(shí)點(diǎn)：
CSS?overflow?屬性
實(shí)例
設(shè)置overflow屬性進(jìn)行滾動(dòng)：
div?
{
? ? width:150px;
? ? height:150px;
? ? overflow:scroll;
}
屬性定義及使用說明
overflow屬性指定如果內(nèi)容溢出一個(gè)元素的框，會(huì)發(fā)生什么寨昙。
四讥巡、更多討論
1、這三種定位方式的優(yōu)缺點(diǎn)
個(gè)人覺得看個(gè)人習(xí)慣舔哪，只是彈性布局在某些舊版本的瀏覽器上兼容性不好欢顷，要注意兼容性寫法。
2捉蚤、絕對(duì)定位和固定定位的區(qū)別
絕對(duì)定位是相對(duì)于瀏覽器窗口而言抬驴；絕對(duì)定位會(huì)隨著滾動(dòng)條的移動(dòng)而移動(dòng)；而固定定位是相對(duì)于屏幕內(nèi)的網(wǎng)頁窗口來說缆巧，滾動(dòng)條移動(dòng)它不動(dòng)布持。而絕對(duì)定位是相對(duì)于父級(jí)元素。
3陕悬、絕對(duì)定位和相對(duì)定位的區(qū)別
A：相對(duì)定位（position: relative）：如果對(duì)某一個(gè)元素進(jìn)行相對(duì)定位题暖，它將出現(xiàn)在它所在的位置上。然后捉超，可以通過設(shè)置垂直（或水平)位置（top,right,bottom,left四值）胧卤，讓這個(gè)元素”相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。注：設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離拼岳。元素仍然保持其未定位前的形狀灌侣，它原本所占的空間仍保留；
B：絕對(duì)定位(position: absolute)：絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素裂问，如果元素沒有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。
4堪簿、脫離文檔流的定位方式
絕對(duì)定位痊乾、浮動(dòng)、固定定位
