CSS 布局的三種機(jī)制

一、標(biāo)準(zhǔn)流

塊級(jí)元素

  • 獨(dú)占一行确丢,從上到下排列
  • 默認(rèn)寬度同父元素
    div绷耍、hr、p蠕嫁、h锨天、ul、ol剃毒、dl病袄、form、table

行內(nèi)元素

  • 一行內(nèi)顯示赘阀,超出自動(dòng)換行
    span益缠、a、i基公、em

二幅慌、浮動(dòng)

  • 任何元素都可以添加,變?yōu)閴K級(jí)元素(相當(dāng)于行內(nèi)塊)
  • 脫離標(biāo)準(zhǔn)流轰豆,到指定位置
  • 漂浮在普通流的上面
  • 添加浮動(dòng)屬性胰伍,元素不占位置

多個(gè)盒子處于一行處理

  • 行內(nèi)塊屬性
    默認(rèn)有縫隙齿诞,難以處理
  • 浮動(dòng)完美解決

屬性

  • none
  • left
  • right

注:一般為了避免和標(biāo)準(zhǔn)流影響,浮動(dòng)元素必須有一個(gè)標(biāo)準(zhǔn)流的父親規(guī)范

與父盒子

  • 貼著盒子的內(nèi)邊框
  • 不會(huì)超過盒子的內(nèi)邊距

與兄弟盒子

  • 浮動(dòng)的元素只會(huì)影響當(dāng)前的或者后面的標(biāo)準(zhǔn)流盒子骂租,不影響前面的標(biāo)準(zhǔn)流
  • 建議兄弟盒子都浮動(dòng)祷杈,方便處理

清除浮動(dòng)

  • 很多情況下父元素不方便給高度,子元素浮動(dòng)后不占位置渗饮,導(dǎo)致父盒子無高度但汞,影響整個(gè)頁面布局
  • 清除浮動(dòng),父盒子自動(dòng)獲取子元素最大的高度
  • clear
    屬性left互站、right私蕾、both(常用)
    a> 額外標(biāo)簽法
    浮動(dòng)元素末尾添加空標(biāo)簽,并為該標(biāo)簽添加屬性clear: both;
    注:W3C推薦胡桃,通俗易懂踩叭,但無意義
    b> 父級(jí)添加overflow
    overflow屬性設(shè)為hidden|auto|scroll
    注:內(nèi)容增多時(shí)不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏,無法顯示需要溢出的元素
    c> 使用after偽元素
    .clearfix:after { content:""; display:block; height:0; clear:both; visibility:hidden;}
    .clearfix {*zoom:1;} /IE6标捺、7專有/
    d> 雙偽元素
.clearfix:before,
.clearfix:after {
  content:"";
  display: table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;
}

三懊纳、定位

  • 定位 = 定位模式 + 邊偏移
  • 邊偏移
    top、bottom亡容、left嗤疯、right
  • 定位模式 position
    static、relative闺兢、absolute茂缚、fixed,默認(rèn)靜態(tài)定位

靜態(tài)定位

  • 默認(rèn)定位方式
  • 按照標(biāo)準(zhǔn)流特性擺放屋谭,無偏移

相對(duì)定位

  • 相對(duì)于原來自身在標(biāo)準(zhǔn)流中的位置偏移
  • 保留原來標(biāo)準(zhǔn)流中的位置

絕對(duì)定位

  • 以帶有定位的父級(jí)元素來移動(dòng)位置(父元素?zé)o定位時(shí)脚囊,以瀏覽器為基準(zhǔn))
  • 完全脫離標(biāo)準(zhǔn)流,不占位置
  • 子絕父相 (子級(jí)絕對(duì)定位桐磁,父級(jí)相對(duì)定位)

固定定位

  • 絕對(duì)定位的特殊形式悔耘,以瀏覽器可視窗口為基準(zhǔn)

定位拓展

  • margin auto在絕對(duì)定位|固定定位中無效,水平居中寫法
    左移父級(jí)的一半我擂,再返回自身的一半
.abs {
          position: relative;
}
 .abs .son {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin-left: -100px;
        }
  • 在相對(duì)衬以、絕對(duì)、固定定位中校摩,z-index 調(diào)整堆疊順序看峻,默認(rèn)0,賦值正整數(shù)或負(fù)整數(shù)衙吩,在其他流中無效
  • float互妓、固定定位和絕對(duì)定位,造成inline-block效果
  • 浮動(dòng)、絕對(duì)定位不會(huì)造成外邊距合并
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末冯勉,一起剝皮案震驚了整個(gè)濱河市澈蚌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌珠闰,老刑警劉巖惜浅,帶你破解...
    沈念sama閱讀 211,265評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瘫辩,死亡現(xiàn)場離奇詭異伏嗜,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)伐厌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門承绸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人挣轨,你說我怎么就攤上這事军熏。” “怎么了卷扮?”我有些...
    開封第一講書人閱讀 156,852評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵荡澎,是天一觀的道長。 經(jīng)常有香客問我晤锹,道長摩幔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,408評(píng)論 1 283
  • 正文 為了忘掉前任或衡,我火速辦了婚禮车遂,結(jié)果婚禮上坡疼,老公的妹妹穿的比我還像新娘柄瑰。我一直安慰自己狱意,他們只是感情好详囤,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評(píng)論 5 384
  • 文/花漫 我一把揭開白布隆箩。 她就那樣靜靜地躺著羔杨,像睡著了一般理澎。 火紅的嫁衣襯著肌膚如雪糠爬。 梳的紋絲不亂的頭發(fā)上执隧,一...
    開封第一講書人閱讀 49,772評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音屋摔,去河邊找鬼。 笑死亚侠,一個(gè)胖子當(dāng)著我的面吹牛硝烂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播狮杨,決...
    沈念sama閱讀 38,921評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼清寇,長吁一口氣:“原來是場噩夢啊……” “哼华烟!你這毒婦竟也來了持灰?” 一聲冷哼從身側(cè)響起堤魁,我...
    開封第一講書人閱讀 37,688評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤衩藤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后匈仗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,130評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評(píng)論 2 325
  • 正文 我和宋清朗相戀三年牛欢,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,617評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出俱笛,到底是詐尸還是另有隱情,我是刑警寧澤珊豹,帶...
    沈念sama閱讀 34,276評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站劫恒,受9級(jí)特大地震影響贩幻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜两嘴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評(píng)論 3 312
  • 文/蒙蒙 一丛楚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧憔辫,春花似錦趣些、人聲如沸农尖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽渠概。三九已至锦亦,卻和暖如春舶替,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背孽亲。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評(píng)論 1 265
  • 我被黑心中介騙來泰國打工坎穿, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人返劲。 一個(gè)月前我還...
    沈念sama閱讀 46,315評(píng)論 2 360
  • 正文 我出身青樓玲昧,卻偏偏與公主長得像,于是被迫代替她去往敵國和親篮绿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子孵延,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評(píng)論 2 348

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