定位+浮動的原理自己的理解

1胖喳,static(默認)
當你沒有為一個元素(例如div)指定定位方式時熄捍,默認為static,也就是按照文檔的流式(flow)定位岛宦,將元素放到一個合適的地方。所以在不同的分辨率下耍缴,采用流式定位能很好的自適合砾肺,取得相對較好的布局效果。
一般來說防嗡,我們不需要指明當前元素的定位方式是static——因為這是默認的定位方式变汪。除非你想覆蓋從父元素繼承來的定位系統(tǒng)。
left,top屬性對static沒有效果蚁趁,static是靠margin這些定位的裙盾。
2,relative(相對定位)
在static的基礎上,如果我想讓一個元素在他本來的位置做一些調整(位移)闷煤,我們可以將該元素定位設置為relative童芹,同時指定相對位移(利用top,bottom,left,right)。
有一點需要注意的是鲤拿,相對定位的元素仍然在文檔流中
,仍然占據(jù)著他本來占據(jù)的位置空間——雖然他現(xiàn)在已經(jīng)不在本來的位置了署咽。

3近顷,absolute(絕對定位)
如果你想在一個文檔(Document)中將一個元素放至指定位置,你可以使用absolute來定位宁否,將該元素的position設置為absolute窒升,同時使用top,bottom,left,right來定位。
如果沒有父元素慕匠,位置是相對于body來進行的饱须。
絕對定位會使元素從文檔流中被刪除
,結果就是該元素原本占據(jù)的空間被其它元素所填充台谊。

4蓉媳,mix relative and absolute(混合相對定位和絕對定位)
如果對一個父元素設置relative,而對它的一個子元素設置absolute锅铅,

則子元素的絕對定位的參照物為父元素
酪呻。

利用混合定位,我們可以用類似下面的css來實現(xiàn)兩列(Two Column)定位

5, fixed(固定定位)
我們知道absolute定位的參照物是“上一個定位過的父元素(static不算)”盐须,那么如果我想讓一個元素定位的參照物總是整個文檔(viewport)玩荠,怎么辦呢?
答案是使用fixed定位贼邓,fixed定位的參照物總是當前的文檔阶冈。利用fixed定位,我們很容易讓一個div定位在瀏覽器文檔的左上塑径,右上等方位女坑。比如你想添加一個信息提示的div,并將該div固定在右上方.

6,float(浮動)
對于浮動晓勇,需要了解的是:
*浮動會將元素從文檔流中刪除堂飞,他的空間會被其它元素補上。
*浮動的參數(shù)物是父元素绑咱,是在父元素這個容器中飄绰筛。
*為了清除浮動造成的對浮動元素之后元素的影響,我們在浮動元素之后加一個div描融,并將這個div的clear設置為both铝噩。
*如果兩個元素都設置了浮動,則兩個元素并不會重疊窿克,第一個元素占據(jù)一定空間骏庸,第二個元素緊跟其后毛甲。如果不想讓第二個元素緊跟其后,可以對第二個浮動的元素使用clear具被。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末玻募,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子一姿,更是在濱河造成了極大的恐慌七咧,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,496評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叮叹,死亡現(xiàn)場離奇詭異艾栋,居然都是意外死亡,警方通過查閱死者的電腦和手機蛉顽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評論 3 385
  • 文/潘曉璐 我一進店門蝗砾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人携冤,你說我怎么就攤上這事悼粮。” “怎么了噪叙?”我有些...
    開封第一講書人閱讀 157,091評論 0 348
  • 文/不壞的土叔 我叫張陵矮锈,是天一觀的道長。 經(jīng)常有香客問我睁蕾,道長苞笨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,458評論 1 283
  • 正文 為了忘掉前任子眶,我火速辦了婚禮瀑凝,結果婚禮上,老公的妹妹穿的比我還像新娘臭杰。我一直安慰自己粤咪,他們只是感情好,可當我...
    茶點故事閱讀 65,542評論 6 385
  • 文/花漫 我一把揭開白布渴杆。 她就那樣靜靜地躺著寥枝,像睡著了一般。 火紅的嫁衣襯著肌膚如雪磁奖。 梳的紋絲不亂的頭發(fā)上囊拜,一...
    開封第一講書人閱讀 49,802評論 1 290
  • 那天,我揣著相機與錄音比搭,去河邊找鬼冠跷。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的蜜托。 我是一名探鬼主播抄囚,決...
    沈念sama閱讀 38,945評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼橄务!你這毒婦竟也來了幔托?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,709評論 0 266
  • 序言:老撾萬榮一對情侶失蹤仪糖,失蹤者是張志新(化名)和其女友劉穎柑司,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锅劝,經(jīng)...
    沈念sama閱讀 44,158評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,502評論 2 327
  • 正文 我和宋清朗相戀三年蟆湖,在試婚紗的時候發(fā)現(xiàn)自己被綠了故爵。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,637評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡隅津,死狀恐怖诬垂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情伦仍,我是刑警寧澤结窘,帶...
    沈念sama閱讀 34,300評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站充蓝,受9級特大地震影響隧枫,放射性物質發(fā)生泄漏。R本人自食惡果不足惜谓苟,卻給世界環(huán)境...
    茶點故事閱讀 39,911評論 3 313
  • 文/蒙蒙 一官脓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧涝焙,春花似錦卑笨、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至隧哮,卻和暖如春桶良,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背近迁。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評論 1 266
  • 我被黑心中介騙來泰國打工艺普, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 46,344評論 2 360
  • 正文 我出身青樓歧譬,卻偏偏與公主長得像岸浑,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子瑰步,可洞房花燭夜當晚...
    茶點故事閱讀 43,500評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案矢洲? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,737評論 1 92
  • 學習建議 定位读虏、浮動是 CSS 核心知識點,必須熟練掌握袁滥。 1.文檔流的概念指什么盖桥?有哪種方式可以讓元素脫離文檔流...
    饑人谷_任磊閱讀 1,080評論 0 3
  • 1.浮動元素有什么特征?對父容器题翻、其他浮動元素揩徊、普通元素、文字分別有什么影響? 浮動元素 浮動元素是設置float...
    Volcaner閱讀 344評論 0 0
  • 浮動 CSS允許浮動任何元素嵌赠。 浮動元素 首先塑荒,會以某種方式將浮動元素從文檔的正常流中刪除,不過它還是會影響布局姜挺。...
    exialym閱讀 1,211評論 0 6
  • 一炊豪、問答 (一)文檔流的概念指什么凌箕?有哪種方式可以讓元素脫離文檔流? 文檔流指的是將窗口分成一行一行,元素按從左至...
    該帳號已被查封_才怪閱讀 448評論 1 0