国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

百分比與圣杯布局

yy736044583 / 2131人閱讀

摘要:圣杯布局與雙飛翼的比較項(xiàng)目實(shí)驗(yàn)在對百分比布局和圣杯布局有了一定了解以后,我呢寫了一個將這兩個聯(lián)系在一起,沒有,只有。

最近在開發(fā)一個簡單的頁面的時候,需要給頁面去做一個布局,具體部分就是頭部header和內(nèi)容區(qū)域。這里有一個要求就是頭部定好寬度以后,需要讓container占有整個屏幕,那最好的辦法就是直接計(jì)算頁面的高度,然后減去header的高度,即可得到container的高度。可是,這樣需要js去計(jì)算瀏覽器寬高度,感覺有點(diǎn)麻煩,然后也在想有沒有更好的辦法。

使用百分比

對于一些國外網(wǎng)站,比較常見的就是百分比布局的方式。那針對于這個頁面,body為真?zhèn)€頁面高度,那header占有了一部分,剩下的直接用百分比表示不就可以啦。

了解百分比

百分比值是一種相對值,任何時候要分析它的效果,都需要正確找到它的參照。

css常見的百分比
屬性 參照物
width 基于父類的width
height 基于父類的width
margin 基于父類的width
padding 基于父類的width
left top right bottom 父類的width height width height
font-size 繼承的font-size
line-height 基于當(dāng)前的font-size
width 與 height

在給wrapper設(shè)置寬度和高度的時候,如下,在設(shè)置height為100%的時候,發(fā)現(xiàn)css不起作用。

    
.wrapper { width: 100%; height: 100% }

這里主要是因?yàn)闆]有在wrapper的父類設(shè)置明確的高度定義。這里如果需要讓100%起作用,需要將wrapper的各個父類都設(shè)置高度為100%;

* {
    margin:0;
    padding; 0;
}

html, body {
    height: 100%;
}

圣杯布局

對于圣杯布局和雙飛翼布局,如果是做前端有了一定基礎(chǔ)以后,應(yīng)該經(jīng)常聽到這兩種布局,兩者都是針對于三欄布局設(shè)計(jì)的,是網(wǎng)站開發(fā)中很不錯的布局選擇。

了解圣杯布局

針對于圣杯布局和雙飛翼布局,網(wǎng)上有很多介紹,這里給出一個鏈接,也是我認(rèn)為寫的比較不錯的一篇文章吧。圣杯布局與雙飛翼的比較

項(xiàng)目實(shí)驗(yàn)

在對百分比布局和圣杯布局有了一定了解以后,我呢寫了一個demo將這兩個聯(lián)系在一起,沒有px,只有%。

demo介紹

這里我主要是為了百分比練習(xí)的,里面有很多一些強(qiáng)制性的內(nèi)容,比如不能使用px,在核心內(nèi)容區(qū)域只能使用圣杯布局(這也是為了圣杯布局擁有的優(yōu)勢想體現(xiàn)出來)。

首先頁面分為上下兩塊,上面為頭部header,下面為container,需要占有整個屏幕。在contianer里面需要使用百分比的圣杯布局,兩側(cè)left與right都是占有20%的寬度,中間需要占有60%的寬度,頁面布局如下:

index.html




    
    
    
    百分比布局
    


    
Main
Left
Right

style.css

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html, body, .fullpage {
    height: 100%;
}

.fullpage {
    width: 100%;
    /* background: lightblue; */
}

.header {
    height: 10%;
    background: lightslategray;
}

.container {
    /* 
        height: 100%; 
        這里設(shè)置了100%以后,會擴(kuò)展頁面的高度10%,因?yàn)闀^承父類高度100%

        下面使用90%以后完全就不是問題啦,就是占有整個屏幕
    */
    height: 90%;
    padding: 0 20%;
}

/* 
    接下來需要設(shè)置整個屏幕核心部分,那就是使用雙飛翼和圣杯布局
*/

.middle,
.left,
.right {
    float: left;
}

.middle {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: lightgreen;
}

.left {
    position: relative;
    left: -20%;
    width: 20%;
    height: 100%;
    margin-left: -100%;
    background: lightpink;
}

.right {
    position: relative;
    right: -20%;
    width: 20%;
    height: 100%;
    margin-left: -20%;
    background: lightseagreen;
}

結(jié)果如下

這里發(fā)現(xiàn)left和right的寬度不再是20%,而是12%(這里基于寬度1000px作為測驗(yàn)基準(zhǔn)),main部分寬度沒有錯誤,仔細(xì)計(jì)算,發(fā)現(xiàn)left與right的寬度首先是基于100%計(jì)算的,在container使用padding=20%以后,中間部分變成了60%。

可是百分比不是基于父類寬度進(jìn)行計(jì)算的么,這里的父類contianer的寬度依然是1000px(100%),這里需要了解盒子模型以及百分比繼承的屬性width了,width我個人理解是對于一個塊中可是區(qū)域的寬度,在沒有設(shè)置border-box屬性,塊的寬度是width+border+padding。所以設(shè)置了padding,container可視區(qū)域?yàn)?0%,此時main依然為100%60%=60%,但是對于left與right為20%60%=12%,所以在后面使用position定位到-20%,無法回到剛開始的位置,因?yàn)楸旧淼膶挾纫呀?jīng)改變了。同時因?yàn)閜osition中的left屬性是繼承父類的width的,所以這里再次設(shè)置left為20%也不會滿足條件。

解決辦法

那如果為了滿足left與right寬度不改變,依然為20%,應(yīng)該怎么做呢?

首先在這個實(shí)驗(yàn)中我使用的就是圣杯布局,那圣杯布局的優(yōu)勢在于中間是適應(yīng)的,通過中間的為60%的寬度。那既然中間是自適應(yīng)的,那我可以使用函數(shù)進(jìn)行計(jì)算,然后求解left-right的寬度與padding。

假設(shè)padding-left與padding-right為z百分點(diǎn),設(shè)置left和right的初始寬度為y,設(shè)置最終left與right的寬度為W(這里是20%)

所以公式為 (1-2z) y = W = 20%
同時為了圣杯布局最后一步讓left塊重新到最左邊,這里的 z 的值應(yīng)該就是20%

所以最后求的的結(jié)果就是y = 1/3 也就是 33.333333% z = 20%
設(shè)置left與right的width

.left {
    position: relative;
    /* left: -33.333333%; */
    left: -20%;
    /* width: 20%; */
    width: 33.333333%;
    height: 100%;
    margin-left: -100%;
    background: lightpink;
}

.right {
    position: relative;
    /* right: -50%; */
    right: -20%;
    /* width: 20%; */
    width: 33.333333%;
    height: 100%;
    margin-left: -33.333333%;
    background: lightseagreen;
}

結(jié)果如下 此時left與right的寬度為20%(200px)

最后再設(shè)置position的left與right的值

.left {
    position: relative;
    left: -33.333333%;
    /* left: -20%; */
    /* width: 20%; */
    width: 33.333333%;
    height: 100%;
    margin-left: -100%;
    background: lightpink;
}

.right {
    position: relative;
    right: -33.333333%;
    /* right: -20%; */
    /* width: 20%; */
    width: 33.333333%;
    height: 100%;
    margin-left: -33.333333%;
    background: lightseagreen;
}

結(jié)果如下

demo完成,最后的自適應(yīng)也滿足,同時也滿足了圣杯布局方式和固定的20%和60%的占有比例。

總結(jié)

這里我確實(shí)有點(diǎn)過于追求百分比布局,圣杯布局本來就是兩側(cè)定寬,中間自適應(yīng),而我這里三個div都是自適應(yīng)的,所以也不算真正的圣杯布局。我在這里的目的主要是為了使用圣杯布局中的中間先渲染的一個方法,以及設(shè)計(jì)一個解決圣杯布局中使用百分比的策略。

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/113272.html

相關(guān)文章

  • 分比圣杯布局

    摘要:圣杯布局與雙飛翼的比較項(xiàng)目實(shí)驗(yàn)在對百分比布局和圣杯布局有了一定了解以后,我呢寫了一個將這兩個聯(lián)系在一起,沒有,只有。 最近在開發(fā)一個簡單的頁面的時候,需要給頁面去做一個布局,具體部分就是頭部header和內(nèi)容區(qū)域。這里有一個要求就是頭部定好寬度以后,需要讓container占有整個屏幕,那最好的辦法就是直接計(jì)算頁面的高度,然后減去header的高度,即可得到container的高度。可...

    blankyao 評論0 收藏0
  • 圣杯布局中對left盒子設(shè)置負(fù)內(nèi)邊距-100%的一點(diǎn)解釋

    摘要:但在前幾天偶然看到一篇講解圣杯布局的博客中,有同學(xué)對左側(cè)定寬盒子設(shè)置存在疑惑,大致是不清楚為什么這樣設(shè)置就會使盒子爬升到盒子的左側(cè),想了一下,還是把自己的理解記錄下來,希望能幫到在此處有疑惑的同學(xué),文中如有謬誤,歡迎指出。 圣杯布局算是一個古老的話題了,關(guān)于其來源網(wǎng)上資料眾多,在此不多做表述。但在前幾天偶然看到一篇講解圣杯布局的博客中,有同學(xué)對左側(cè)定寬盒子設(shè)置 margin-left:...

    JellyBool 評論0 收藏0
  • 圣杯布局中對left盒子設(shè)置負(fù)內(nèi)邊距-100%的一點(diǎn)解釋

    摘要:但在前幾天偶然看到一篇講解圣杯布局的博客中,有同學(xué)對左側(cè)定寬盒子設(shè)置存在疑惑,大致是不清楚為什么這樣設(shè)置就會使盒子爬升到盒子的左側(cè),想了一下,還是把自己的理解記錄下來,希望能幫到在此處有疑惑的同學(xué),文中如有謬誤,歡迎指出。 圣杯布局算是一個古老的話題了,關(guān)于其來源網(wǎng)上資料眾多,在此不多做表述。但在前幾天偶然看到一篇講解圣杯布局的博客中,有同學(xué)對左側(cè)定寬盒子設(shè)置 margin-left:...

    LdhAndroid 評論0 收藏0
  • 淺談面試中常考的兩種經(jīng)典布局——圣杯雙飛翼

    摘要:圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局,一直沒有總結(jié)過正好借這次機(jī)會總結(jié)一波,同時加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變,將內(nèi)容部分為兩邊騰開位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局,一直沒有總結(jié)過...

    SwordFly 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<