成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

阿里團(tuán)隊(duì)常用的布局——雙飛翼布局

GeekGhc / 2910人閱讀

摘要：雙飛翼布局新手來(lái)說(shuō)不太好理解，光靠死記不行，理解了以后就能輕易寫(xiě)出來(lái)。獻(xiàn)上代碼雙飛翼雙飛翼布局的好處是淘寶團(tuán)隊(duì)提出一種優(yōu)化寫(xiě)法，寫(xiě)在前面，優(yōu)先加載，優(yōu)先渲染，而且兼容性好。

雙飛翼布局新手來(lái)說(shuō)不太好理解，光靠死記不行，理解了以后就能輕易寫(xiě)出來(lái)。獻(xiàn)上代碼：

<head>
    <meta charset="UTF-8">
    <title>雙飛翼title>
    <style>
        .wrap {
            width: 90%;
            margin: 0 auto;
        }

        .left {
            width: 200px;
            height: 700px;
            background: red;
            float: left;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            height: 700px;
            background: red;
            float: right;
            margin-left: -200px;
        }

        .main {
            width: 100%;
            float: left;
            background: pink;
        }

        .content {
            height: 700px;
            background: yellow;
            margin: 0 210px;
        }
    style>
head>
<body>
<div class="wrap">
    <div class="main">
        <div class="content">contentdiv>
    div>
    <div class="left">leftdiv>
    <div class="right">rightdiv>
div>
body>

雙飛翼布局的好處：是淘寶團(tuán)隊(duì)提出一種優(yōu)化寫(xiě)法，main寫(xiě)在前面，優(yōu)先加載，優(yōu)先渲染，而且兼容性好。

理解雙飛翼布局的幾個(gè)關(guān)鍵點(diǎn)：

①main是自適應(yīng)寬度的，所以width:100%;

②main、left、right都是float:left;，但是main的寬度是100%，所以left、right被擠到第二行；

③如何讓left和right移動(dòng)到正確的位置呢？

理解時(shí)應(yīng)該考慮浮動(dòng)的特性，假設(shè)main是固定寬度的，全都左浮動(dòng)以后，main、left、right應(yīng)該排在同一行。

那么要讓left移動(dòng)到左邊就容易了，只需要向左邊移動(dòng)一個(gè)main的寬度就可以了，所以就是margin-left:-100%;

因?yàn)閙ain的寬度是100%，要讓right移動(dòng)到右邊，則只需要給right一個(gè)200的寬度，讓它移動(dòng)上去就行了，所以就是margin-left:-200px;

④此時(shí)，left和right實(shí)際上是疊在main的左右兩邊的，這就是在寫(xiě)結(jié)構(gòu)時(shí)，要在main里面多寫(xiě)一層content的原因，只要給content一個(gè)margin:0 210px;里面的內(nèi)容就不會(huì)被left和right擋住，雙飛翼布局也就實(shí)現(xiàn)了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1425.html

相關(guān)文章

  • CSS常用布局

    摘要：頭部主要內(nèi)容左邊欄右邊欄尾部顯示為頭部主要內(nèi)容左邊欄右邊欄尾部圣杯布局和雙飛翼布局的原理這篇文章講解得比較清楚，我就不再贅述。 ====== 樣例代碼不能顯示，請(qǐng)看原文https://magicly.me/css-layout/ ====== 布局是CSS中一個(gè)很重要的部分，甚至我覺(jué)得是最重要也是最難的部分，其他諸如字體大小、顏色等等都是很容易的。最近總結(jié)一下使用過(guò)的CSS常...

    aaron 評(píng)論0 收藏0

  • CSS布局十八般武藝都在這里了

    摘要：清單一些說(shuō)明注意文檔的書(shū)寫(xiě)順序，先寫(xiě)兩側(cè)欄，再寫(xiě)主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到。可以通過(guò)設(shè)置的屬性或使用雙飛翼布局避免問(wèn)題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專(zhuān)欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

    includecmath 評(píng)論0 收藏0

  • CSS中的負(fù)邊距

    摘要：之后仔細(xì)的百度了一下，發(fā)現(xiàn)了這么一個(gè)叫做內(nèi)外補(bǔ)丁負(fù)值法的東西。在這個(gè)解決方案中，又涉及到了傳說(shuō)中的負(fù)。深入研究之后又發(fā)現(xiàn)了圣杯布局雙飛翼布局等很多示例，確實(shí)要好好研究負(fù)邊距這個(gè)東西了。相關(guān)推薦那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距 2015-04-22 時(shí)候?qū)懙睦衔?，因?yàn)橄Ｍ盟阅昧顺鰜?lái)。 那天被一個(gè)同學(xué)問(wèn)了一個(gè)問(wèn)題，三列的div，要求父div的高度和三個(gè)div的高度都和三個(gè)中字?jǐn)?shù)...

    cocopeak 評(píng)論0 收藏0

  • 兩招搞定三欄布局——圣杯布局、雙飛翼布局

    摘要：如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局這是一道經(jīng)典的面試題，常用的方法是圣杯布局雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。在雙飛翼中避免左右盒子被覆蓋，是通過(guò)設(shè)置的左右來(lái)實(shí)現(xiàn)的。 如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

    Kaede 評(píng)論0 收藏0

  • 【布局】圣杯布局&雙飛翼布局

    摘要：差別通俗點(diǎn)講就是圣杯布局像是，杯子掛上兩只耳朵，，所有容量都給了杯身，耳朵只能掛在兩側(cè)。雙飛翼布局像是，鳥(niǎo)的雙翼，，身子是鳥(niǎo)的一大部分，雙翼也是身體的一部分。其他布局其他布局方案已經(jīng)整理到此文中，歡迎大家前往指正整理布局方案 背景 隨著前端技術(shù)的發(fā)展推進(jìn)，web端的布局方式已基本成熟，那么在網(wǎng)站布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開(kāi)發(fā)者們開(kāi)始從效率的角度優(yōu)化自己的代碼...

    LeviDing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<