CSS3開發(fā)常用核心技能

基礎(chǔ)網(wǎng)頁布局

布局分類

  • 一列布局
  • 兩列布局
  • 三列布局
  • 多列布局

一列布局:

二列布局:

三列布局:

<div class="container">
    <div class="header">我是header</div>
    <div class="content">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="middle">中間</div>
    </div>
    <div class="footer">我是footer</div>
</div>
        .content {
            min-height: 500px;
            height: auto;
            background-color: orange;
        }
        .content .left {
            float: left;
            width: 20%;
            height: 500px;
            background-color: orangered;
        }
        .container .right {
            float: right;
            width: 20%;
            height: 500px;
            background-color: yellow;
        }
        .container .middle {
            height: 500px;
            background-color: yellowgreen;
        }

?? middle 寫再最后邀桑,由于上面左右 div 是浮動的歌殃,所以 middle 就會浮上去漂辐;如果 middle 想先渲染出來旁涤,放到最開始座菠,由于它是 block 塊級元素扮叨,左右就會被擠下去姜钳;怎么辦呢坦冠?下面就要使用到圣杯布局了。

將左右的背景顏色取消掉哥桥,你會發(fā)現(xiàn)左右是疊在 middle 上辙浑,這個時候middle 實際占比是100%,然后根據(jù)左右的的占比拟糕,自動計算出內(nèi)容顯示占比判呕。

圣杯布局

圣杯布局的出現(xiàn)是為了解決:老套的布局必須按照源順序(在 DOM 中表現(xiàn)為先寫 Left,然后 Middle送滞,最后侠草,Right)等,它將可能導(dǎo)致代碼不夠靈活犁嗅,尤其是從 DOM 的載入順序上來說边涕,中間的內(nèi)容不能被首先加載。

圣杯布局實現(xiàn)套路

  • 兩邊帶有固定寬度中間可以流動(fluid)褂微;
  • 允許中間一欄最先出現(xiàn)功蜓;
  • 允許任意一欄放在最上面;
  • 僅需一個額外的 div 標(biāo)簽蕊梧; (最外層加一個div 容器包裹)
  • 僅需非常簡單的 CSS霞赫,帶上最少的兼容性補丁

利用上面的代碼,將 Middle 放到第一位:

    <div class="content">
        <!-- 主要內(nèi)容先渲染 -->
        <div class="middle">中間</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>

呈現(xiàn)效果:

想讓左邊的移動上來肥矢, 也給 middle float 屬性端衰,然后再讓left 左外邊距 -100%;

    .content {
        min-height: 500px;
        height: auto;
        background-color: orange;
    }
    .content .left {
        float: left;
        width: 150px;
        height: 500px;
        background-color: orangered;
    }
    .container .right {
        float: right;
        width: 150px;
        height: 500px;
        background-color: yellow;
    }
    .container .middle {
        float: left;
        width: 100%;
        height: 500px;
        background-color: yellowgreen;
    }

理解下 margin-left 叠洗, 設(shè)置與元素相關(guān)聯(lián)的盒子模型的左外邊距;

margin-left: 10px;  /* 絕對長度 */
margin-left: 1em;   /* 相對于字號的長度 */
margin-left: 5%;    /* 相對最近塊元素的寬度 */

右也改造下

        .container .right {
            float: left;
            width: 150px;
            height: 500px;
            background-color: yellow;
            margin-left: -150px; 
        }

到這里是不是基本圣杯布局雛形就出來了旅东,讓人不省心的就是中間內(nèi)容被被蓋了灭抑, 怎么辦呢?

讓最外部的父級容器承擔(dān)左右欄的距離好讓中間內(nèi)容顯示出來抵代,這個就上面說的多加一個 div 的意思了腾节。

image.png

通過 position 相對自己進行移動去填補預(yù)留空間

        .content .left {
            position: relative;
            left: -150px;
            float: left;
            width: 150px;
            height: 500px;
            margin-left: -100%;
            background-color: orangered;
        }
        .container .right {
            position: relative;
            left: 150px;
            float: left;
            width: 150px;
            height: 500px;
            background-color: yellow;
            margin-left: -150px;
        }

圣杯布局,你學(xué)會了沒有~

雙飛翼布局 + CSS HACK

雙飛翼布局由早期圣杯布局演變而來荤牍,始創(chuàng)于淘寶UED案腺,雙飛翼布局由左中右三欄組合,如同一只鳥(左翼康吵、身體劈榨、右翼)所以稱為雙飛翼布局。

圣杯布局和雙飛翼布局解決的問題是一樣的晦嵌,就是兩邊頂寬同辣,中間自適應(yīng)的三欄布局,中間欄要在放在文檔流前面以優(yōu)先渲染惭载。

圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的旱函,也就是三欄全部float浮動,但左右兩欄加上負margin讓其跟中間欄div并排描滔,以形成三欄布局棒妨。

不同在于解決"中間欄div內(nèi)容不被遮擋"問題的思路不一樣:

  • 圣杯布局,為了中間div內(nèi)容不被遮擋伴挚,將中間div設(shè)置了左右padding-left和padding-right后靶衍,將左右兩個div用相對布局position:relative并分別配合right和left屬性灾炭,以便左右兩欄div移動后不遮擋中間div

  • 雙飛翼布局茎芋,為了中間div內(nèi)容不被遮擋,直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容蜈出,在該子div里用margin-left和margin-right為左右兩欄div留出位置田弥。多了1個div,少用大致4個css屬性(圣杯布局中間div的padding-left和padding-right這2個屬性铡原,加上左右兩個div用相對布局position:relative及對應(yīng)的right和left共4個屬性偷厦,一共6個:而雙飛翼布局子div里用margin-left和margin-right共2個屬性,6-2=4)燕刻。

簡單說起來就是雙飛翼布局比圣杯布局多創(chuàng)建了一個div只泼,但不用相對布局了

其中使用

  • position
  • float
  • 負邊距
  • 登高
  • 盒子模型
  • 清除浮動
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市卵洗,隨后出現(xiàn)的幾起案子请唱,更是在濱河造成了極大的恐慌弥咪,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件十绑,死亡現(xiàn)場離奇詭異聚至,居然都是意外死亡,警方通過查閱死者的電腦和手機本橙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門扳躬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人甚亭,你說我怎么就攤上這事贷币。” “怎么了亏狰?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵片择,是天一觀的道長。 經(jīng)常有香客問我骚揍,道長字管,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任信不,我火速辦了婚禮嘲叔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘抽活。我一直安慰自己硫戈,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布下硕。 她就那樣靜靜地躺著丁逝,像睡著了一般。 火紅的嫁衣襯著肌膚如雪梭姓。 梳的紋絲不亂的頭發(fā)上霜幼,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音誉尖,去河邊找鬼罪既。 笑死,一個胖子當(dāng)著我的面吹牛铡恕,可吹牛的內(nèi)容都是我干的琢感。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼探熔,長吁一口氣:“原來是場噩夢啊……” “哼驹针!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起诀艰,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤扶镀,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后疑务,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡喜滨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了撤防。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虽风。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖寄月,靈堂內(nèi)的尸體忽然破棺而出辜膝,到底是詐尸還是另有隱情,我是刑警寧澤漾肮,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布厂抖,位于F島的核電站,受9級特大地震影響克懊,放射性物質(zhì)發(fā)生泄漏忱辅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一谭溉、第九天 我趴在偏房一處隱蔽的房頂上張望墙懂。 院中可真熱鬧,春花似錦扮念、人聲如沸损搬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽巧勤。三九已至,卻和暖如春弄匕,著一層夾襖步出監(jiān)牢的瞬間颅悉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工粘茄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留签舞,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓柒瓣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親吠架。 傳聞我的和親對象是個殘疾皇子芙贫,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 13,761評論 1 92
  • 一魂仍、負邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別? 負margin和position:...
    婷樓沐熙閱讀 874評論 0 4
  • 三欄式布局 涉及浮動和清除浮動,主要講解“圣杯”和“雙飛翼”兩種解決方法拣挪。這兩種方法實現(xiàn)的都是三欄布局擦酌,兩邊的盒子...
    紫電倚青霜閱讀 2,374評論 0 6
  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關(guān)注微信itclanCoder公眾號可收聽更多音頻 前言 關(guān)于網(wǎng)...
    itclanCoder閱讀 8,191評論 3 30
  • 前言 溫馨提示:本文較長,圖片較多菠劝,本來是想寫一篇 CSS 布局方式的赊舶,但是奈何 CSS 布局方式種類太多并且實現(xiàn)...
    sunshine小小倩閱讀 3,142評論 0 59