定位


CSS 定位和浮動
http://www.w3school.com.cn/css/css_positioning.asp

CSS 為定位和浮動提供了一些屬性背零,利用這些屬性,可以建立列式布局情组,將布局的一部分與另一部分重疊爬凑。
定位的基本思想很簡單金刁,它允許你定義元素框相對于其正常位置應該出現的位置辜王,或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置撕瞧。

一切皆為框

div陵叽、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容丛版,即“塊框”巩掺。
span 和 strong 等元素稱為行內元素,這是因為它們的內容顯示在行中页畦,即“行內框”胖替。
使用 display 屬性改變生成的框的類型。這意味著豫缨,通過將 display 屬性設置為 block独令,可以讓行內元素(比如 <a> 元素)表現得像塊級元素一樣。還可以通過把 display 設置為 none好芭,讓生成的元素根本沒有框燃箭。這樣的話,該框及其所有內容就不再顯示舍败,不占用文檔中的空間招狸。


CSS 定位機制

CSS 有三種基本的定位機制:普通流敬拓、浮動和絕對定位。
普通流中的元素的位置由元素在 (X)HTML 中的位置決定裙戏。
塊級框從上到下一個接一個地排列乘凸,框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置挽懦『惨猓可以使用水平內邊距木人、邊框和外邊距調整它們的間距信柿。

CSS position 屬性

static
元素框正常生成。塊級元素生成一個矩形框醒第,作為文檔流的一部分渔嚷,行內元素則會創(chuàng)建一個或多個行框,置于其父元素中稠曼。
relative
元素框偏移某個距離形病。元素仍保持其未定位前的形狀,它原本所占的空間仍保留霞幅。
absolute
元素框從文檔流完全刪除漠吻,并相對于其包含塊定位。元素定位后生成一個塊級框司恳,而不論原來它在正常流中生成何種類型的框途乃。
fixed
元素框的表現類似于將 position 設置為 absolute,不過其包含塊是視窗本身扔傅。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末耍共,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子猎塞,更是在濱河造成了極大的恐慌试读,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荠耽,死亡現場離奇詭異钩骇,居然都是意外死亡,警方通過查閱死者的電腦和手機铝量,發(fā)現死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門倘屹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人款违,你說我怎么就攤上這事唐瀑。” “怎么了插爹?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵哄辣,是天一觀的道長请梢。 經常有香客問我谐宙,道長定血,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任喜爷,我火速辦了婚禮当窗,結果婚禮上够坐,老公的妹妹穿的比我還像新娘。我一直安慰自己崖面,他們只是感情好元咙,可當我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著巫员,像睡著了一般庶香。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上简识,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天赶掖,我揣著相機與錄音,去河邊找鬼七扰。 笑死奢赂,一個胖子當著我的面吹牛,可吹牛的內容都是我干的颈走。 我是一名探鬼主播膳灶,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼疫鹊!你這毒婦竟也來了袖瞻?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤拆吆,失蹤者是張志新(化名)和其女友劉穎聋迎,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體枣耀,經...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡霉晕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了捞奕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片牺堰。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖颅围,靈堂內的尸體忽然破棺而出伟葫,到底是詐尸還是另有隱情,我是刑警寧澤院促,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布筏养,位于F島的核電站斧抱,受9級特大地震影響,放射性物質發(fā)生泄漏渐溶。R本人自食惡果不足惜辉浦,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望茎辐。 院中可真熱鬧宪郊,春花似錦、人聲如沸拖陆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽慕蔚。三九已至丐黄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間孔飒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工艰争, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留坏瞄,地道東北人。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓甩卓,卻偏偏與公主長得像鸠匀,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子逾柿,可洞房花燭夜當晚...
    茶點故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案缀棍? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,751評論 1 92
  • CSS 定位 CSS有三種基本的定位機制:普通流爬范,浮動,絕對定位(absolute, fixed):普通流是默認定...
    _空空閱讀 5,733評論 0 15
  • 目錄 內容 一. 我對標簽、元素萧诫、盒子的理解 相信很多人和我之前一樣斥难,對于web的許多概念也都知道是什么意思,大家...
    科研者閱讀 691評論 2 2
  • 浮動 CSS允許浮動任何元素帘饶。 浮動元素 首先哑诊,會以某種方式將浮動元素從文檔的正常流中刪除,不過它還是會影響布局及刻。...
    exialym閱讀 1,216評論 0 6
  • 一镀裤、浮動元素有什么特征穷当?對父容器、其他浮動元素淹禾、普通元素馁菜、文字分別有什么影響? 特征:1、浮動模型是一種可視化格式...
    青鳴閱讀 994評論 0 0