亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距

tianhang / 1770人閱讀

摘要：奇妙的圣杯與雙飛翼相信很多人和我在學(xué)習(xí)前端差不多的時(shí)候就聽(tīng)說(shuō)過(guò)了圣杯布局與雙飛翼布局。他往前移動(dòng)之后，文檔流也會(huì)跟著移動(dòng)元素寬度負(fù)邊距負(fù)邊距可以增加元素的寬度，對(duì)于沒(méi)有的元素，負(fù)邊距可以加寬他們。

[TOC]

沒(méi)錯(cuò)，題目就是模仿《那些年，我們一起清除過(guò)的浮動(dòng)》而來(lái)的。

奇妙的圣杯與雙飛翼

相信很多人和我在學(xué)習(xí)前端差不多的時(shí)候就聽(tīng)說(shuō)過(guò)了圣杯布局與雙飛翼布局。關(guān)于取名無(wú)非是覺(jué)得長(zhǎng)得像圣杯，或者是長(zhǎng)得像小鳥(niǎo)。至于其中的區(qū)別也只有一小點(diǎn)，其中主要的思想可謂是基本一致！

這兩個(gè)布局要實(shí)現(xiàn)的樣式都是下面的這種形式：

也就是中間的那一部分，長(zhǎng)得像圣杯或者是飛翔的小鳥(niǎo)，left 和 right 寬度已知，中間自適應(yīng)填充。一般情況下，如果這樣寫(xiě)代碼，顯然是很好實(shí)現(xiàn)布局的。

head

    

        
left

        
main

        
right

    

 
foot

但是相應(yīng)的按照 DOM 的加載順序，content 部分依次會(huì)加載 left、main、right。這對(duì)于有潔癖的人可能是無(wú)法忍受的，甚至是覺(jué)得不符合常理。

正常情況下，我們希望先加載的是主要部分，然后再開(kāi)始加載 left 和 right 兩個(gè)相對(duì)來(lái)說(shuō)不是很重要的東西。所以 HTML 代碼應(yīng)該這樣寫(xiě)：

head

    

        
main

        
left

        
right

    


foot

另外一方面來(lái)說(shuō)，我們倡導(dǎo)語(yǔ)義化的 HTML，也就是說(shuō)在編寫(xiě) HTML 的時(shí)候不應(yīng)該受制于 CSS 的干擾，所以這樣的寫(xiě)法來(lái)達(dá)到上面的布局也應(yīng)該是必要的。

那么如果這樣寫(xiě)應(yīng)該如何去寫(xiě) CSS 樣式呢？

首先我們的想法可能是先搭建起 head content 和 foot，content 里面的東西全部用左浮動(dòng)解決，對(duì) content 要清除浮動(dòng)讓他撐起高度。代碼如下：

* {
    margin: 0;
    padding: 0;
}
.cleanfix {
    clear: both;
}
.cleanfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    zoom: 1;
}
.head, .foot {
    width: 100%;
    height: 80px;
}
.head {
    background-color: #4eb5f7;
}
.foot {
    background-color: #999999;
}
.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: #B9E078;
}
.right {
    width: 60px;
    height: 80px;
    background-color: #FF9900;
}
.main {
    background-color: crimson;
}

這樣的話就能實(shí)現(xiàn)下面的布局：

我們要的目的是 main 布局自適應(yīng)，這樣的話我們給 main 100% 的寬度：

.main {
  100%;
}

這樣的話布局就會(huì)變成這樣：

接下來(lái)，我們想要 left 跑上去，這個(gè)時(shí)候就可以使用奇妙的負(fù)邊距了。

main, left, right 我們都可以看做是在一個(gè)浮動(dòng)流中，依次的順序也是 main left right。目前是因?yàn)?main 占了100% 從而導(dǎo)致 left 與 right 不能和 main 浮在同一行了，這個(gè)時(shí)候我們可以利用負(fù)邊距來(lái)讓 left 向前移動(dòng) （即 margin-left 為正的時(shí)候就是和左邊的盒子的外邊距，那么為負(fù)的時(shí)候就是像前移動(dòng)了）。加上下面的特技

.left {
    margin-left: 100%;
}

那么移動(dòng)多少呢？為了讓 left 跑到最左邊，那么就像上面的一樣移動(dòng)到 -100% ，也就是向左移動(dòng)的最大值了。這樣，會(huì)得到下面的布局：

我們看到 left 移動(dòng)到最左邊了，那 right 是不是也可以模仿 left 一起移動(dòng)呢？移動(dòng)多少？right 只需要向前移動(dòng)right的寬度個(gè)距離，即 60px

.right {
    margin-left: -60px;
}

得到下面的結(jié)果

和我們想象中的一樣， right 也移動(dòng)上去了，并且跑到了我們想要的位置。

但是稍微細(xì)心點(diǎn)就能發(fā)現(xiàn)上面的結(jié)果還是存在問(wèn)題的，紅色中間部分的 main 跑到哪里去了？

打開(kāi)開(kāi)發(fā)者工具審查元素就能看見(jiàn)好像是 left 和 right 覆蓋到上面去了。

那么如何去使得 main 部分往里面收收呢？這也就是圣馬布局與雙飛翼布局根本區(qū)別了

圣杯布局

圣杯布局的思想就是給包裹著三個(gè)元素的 content 加一個(gè) padding, 讓 padding-left 和 padding-right 的數(shù)值是 left 和 right 的寬度，然后利用相對(duì)定位把他們?cè)僖苿?dòng)在兩旁。

首先，給 content padding

.content {
    padding: 0 60px 0 40px;
}

然后利用相對(duì)定位移動(dòng) left 和 right

.left {
    position: relative;
    left: -40px;
}
.right {
    position: relative;
    right: -60px;
}

這樣也就完美的解決了問(wèn)題：

最后 CSS 的所有樣式是這樣的：

* {
    margin: 0;
    padding: 0;
}
.cleanfix {
    clear: both;
}
.cleanfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    zoom: 1;
}
.head, .foot {
    width: 100%;
    height: 80px;
}
.head {
    background-color: #4eb5f7;
}
.foot {
    background-color: #999999;
}

.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: #B9E078;
    margin-left: -100%;
}
.right {
    width: 60px;
    height: 80px;
    background-color: #FF9900;
    margin-left: -60px;
}
.main {
    background-color: crimson;
    width: 100%;
}
.content {
    padding: 0 60px 0 40px;
}

.left {
    position: relative;
    left: -40px;
}
.right {
    position: relative;
    right: -60px;
}

HTML 是這樣的：

head

    

        
main

        
left

        
right

    


foot
雙飛翼布局

延續(xù)到上面的情況，圣馬布局是這樣做的

圣馬布局的思想就是給包裹著三個(gè)元素的 content 加一個(gè) padding, 讓 padding-left 和 padding-right 的數(shù)值是 left 和 right 的寬度，然后利用相對(duì)定位把他們?cè)僖苿?dòng)在兩旁。

而雙飛翼布局是在 main 里面再添加一個(gè) div, 然后對(duì)這個(gè) div 進(jìn)行 margin-left 和 margin-right. 即

head

    

        

            
main

        

        
left

        
right

    


foot

CSS 部分對(duì) wrap 進(jìn)行處理：

.wrap {
    background-color: darkmagenta;
    margin-left: 40px;
    margin-right: 60px;
}

最后我們的CSS代碼是這樣的：

* {
    margin: 0;
    padding: 0;
}
.cleanfix {
    clear: both;
}
.cleanfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    zoom: 1;
}
.head, .foot {
    width: 100%;
    height: 80px;
}
.head {
    background-color: #4eb5f7;
}
.foot {
    background-color: #999999;
}

.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: #B9E078;
    margin-left: -100%;
}
.right {
    width: 60px;
    height: 80px;
    background-color: #FF9900;
    margin-left: -60px;
}
.main {
    background-color: crimson;
    width: 100%;
}

.wrap {
    background-color: darkmagenta;
    margin-left: 40px;
    margin-right: 60px;
}
總結(jié)

總結(jié)一下，圣馬布局和雙飛翼的流程大體上是這樣的

搭建 head content foot, content 內(nèi)部的三個(gè)元素全部左浮動(dòng)，然后清除浮動(dòng)防止影響 foot

給 main 100% 的寬度讓他占滿一行

給 left -100% 的margin-left 讓他移動(dòng)到最左邊，給 right 和他寬度一樣的負(fù) margin 讓他移動(dòng)到最右邊

針對(duì)移動(dòng)后 main 的兩邊會(huì)被 left 和 right 重合覆蓋掉做出不同的改變，這兒也就是兩個(gè)布局的本質(zhì)區(qū)別

圣杯布局會(huì)給 content 內(nèi)邊距，左右分別為 left 和 right的寬度，然后再利用相對(duì)定位移動(dòng) left 和 right

雙飛翼布局會(huì)在 main 里面再加一層 wrap ，然后把內(nèi)容都寫(xiě)在 wrap 里面，正對(duì) wrap 設(shè)置他的 margin, 左右外邊距和 left 與 right 一樣

奇妙的負(fù)邊距

相信在上面的圣馬布局與雙飛翼布局中已經(jīng)見(jiàn)識(shí)到了負(fù)邊距的奇妙之處了，這就是他的第一奇妙之處

浮動(dòng)元素 VS 負(fù)邊距

整個(gè)浮動(dòng)可以看是有一個(gè)浮動(dòng)流的存在，利用負(fù)邊距可以讓他在這個(gè)流中移動(dòng)，并且會(huì)疊加到相應(yīng)元素的上面

普通文檔流 VS 負(fù)邊距

普通元素的位置是相對(duì)于文檔流而發(fā)生變化的。負(fù)邊距也會(huì)使元素在文檔流中發(fā)生位移。不同于相對(duì)定位的是，這些元素移動(dòng)之后不會(huì)占據(jù)原來(lái)的空間。他往前移動(dòng)之后，文檔流也會(huì)跟著移動(dòng)

元素寬度 VS 負(fù)邊距

負(fù)邊距可以增加元素的寬度，對(duì)于沒(méi)有 width 的元素，負(fù)邊距可以加寬他們。

這樣就能夠很好的利用負(fù)邊距實(shí)現(xiàn) 一寸照片排列 的那種難題了。對(duì)于這種問(wèn)題，比較麻煩的辦法是浮動(dòng)之后 margin-right, 然后對(duì)每一行的最后一個(gè)元素設(shè)置 margin-right: 0。這樣就存在一個(gè)如何給最后一個(gè)元素設(shè)定這個(gè)margin-right的問(wèn)題了。

利用負(fù)邊距，我們可以加大子元素的margin, 然后浮動(dòng)里面所有的元素，等他們都浮動(dòng)起來(lái)的時(shí)候利用 overflow: hidden消除最右邊的邊距。

絕對(duì)定位 VS 負(fù)邊距

絕對(duì)定位就是相對(duì)于父親系元素的最近的一個(gè)定位元素的邊界來(lái)決定的，這個(gè)邊界也就是margin。

如果是負(fù)邊距的話就能機(jī)智的實(shí)現(xiàn)元素垂直水平居中了

.con {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%
    margin-left: -50px;
    margin-top: -50px;
}
參考文章

CSS布局奇淫巧計(jì)之-強(qiáng)大的負(fù)邊距

CSS布局中圣杯布局與雙飛翼布局的實(shí)現(xiàn)思路差異在哪?-知乎

博客原文地址

https://github.com/rccoder/blog/issues/6

歡迎 start 與 watch

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

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

相關(guān)文章

  • 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

  • CSS 布局經(jīng)典問(wèn)題初步整理

    摘要：布局經(jīng)典問(wèn)題初步整理標(biāo)簽前端本文主要對(duì)布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問(wèn)題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

    Amos 評(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

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對(duì)頁(yè)面的形象表達(dá)。一起來(lái)看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們?cè)诶锩嬗旨恿艘粋€(gè)內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時(shí)必問(wèn)的問(wèn)題，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對(duì)ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來(lái)最好的用戶(hù)體驗(yàn)嘛~ 事實(shí)上，圣杯布局其實(shí)和雙飛翼布局是一回事。它們實(shí)現(xiàn)的都...

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

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對(duì)頁(yè)面的形象表達(dá)。一起來(lái)看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們?cè)诶锩嬗旨恿艘粋€(gè)內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時(shí)必問(wèn)的問(wèn)題，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對(duì)ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來(lái)最好的用戶(hù)體驗(yàn)嘛~ 事實(shí)上，圣杯布局其實(shí)和雙飛翼布局是一回事。它們實(shí)現(xiàn)的都...

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

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

0條評(píng)論

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