資訊專欄INFORMATION COLUMN
摘要：剛好，兩欄并列等高布局就出來了具體的實(shí)踐過程中可以把和的值設(shè)大一些，要保證任意兩欄的高度差不小于你設(shè)置的值。至此，總算把實(shí)現(xiàn)兩欄等高布局的原理弄懂了。這說明不要輕易看別人的簡歷血的教訓(xùn)啊地址兩欄并列等高布局實(shí)驗(yàn)
實(shí)習(xí)的時(shí)候在老大那里偶然看到了前端的面試題，于是順手拿過來做了一做。發(fā)現(xiàn)題目也不是很難，于是做完了便沾沾自喜的看別人的簡歷。
這時(shí)，XX哥跟我說，干嘛看別人簡歷啊？我說題目看完了。然后他就問我題目會不會。我說都會，他就抽出里面的一道題來問我。這個(gè)布局（指的是兩欄等高布局）怎么寫。當(dāng)時(shí)我以為只是浮動過去而已，于是沒多想就說這不就是浮動嘛。
然后他問，那怎么等高呢？我當(dāng)時(shí)就混亂了，原來這題是在考浮動等高！我從來沒有碰到過這樣的布局，在最近的一個(gè)項(xiàng)目中我也是通過父元素加背景模擬兩邊等高，至于如何做到真正的兩欄并列等高，我還不知道。于是他跟我說讓我去網(wǎng)上搜一搜。這樣的布局非常經(jīng)典，一下就搜出來了：
給兩個(gè)元素用padding來填充，然后用margin來消除padding帶來的影響，最后給父元素加一個(gè)overflow:hidden;就行了。
我相信大家一定看了之后都會用。但作為一個(gè)專業(yè)的前端工程師，我們必須弄明白為什么這樣做是可以的呀！我捉摸的許久，在想這樣的方法為什么可行。我在 CodePen 中做了如下實(shí)驗(yàn)：
1.設(shè)margin-bottom:-100px; padding-bottom:100px;設(shè)置一個(gè)較小的值有利于之后直觀的看出這兩個(gè)屬性是如何影響布局的；
2.把父元素的overflow:hidden;去掉。
在我做了這兩個(gè)事情之后，我發(fā)現(xiàn)兩個(gè)元素的下部padding完全顯示出來了，也就是說它們的padding值其實(shí)是一樣的，只是由于超出父元素被截?cái)嗔?，造成了它們等高的情況。那父元素怎么就恰好在最高的元素的底部截?cái)嘧寖蓹诘雀叩哪?？我又?zhí)行了以下操作：
1.把父元素的overflow:hidden;加上。
2.把最高的（試驗(yàn)中為內(nèi)容最多）的元素的margin-bottom:-100px;變?yōu)?b>margin-bottom:-140px;
這時(shí)我發(fā)現(xiàn)父元素高度減小了。減小了40px！由此我們可以推測未定高父元素的高度是這么計(jì)算的：最高的內(nèi)容的高度！那父元素的里面都是浮動元素，高度怎么計(jì)算呢？這里由于父元素用了overflow:hidden;觸發(fā)了bfc或者haslayout，所以浮動元素的高度也應(yīng)該被計(jì)算，同時(shí)，也把超出父元素的那一部分截掉了。剛好，兩欄并列等高布局就出來了！
具體的實(shí)踐過程中可以把margin-bottom和padding-bottom的值設(shè)大一些，要保證任意兩欄的高度差不小于你設(shè)置的值。
至此，總算把實(shí)現(xiàn)兩欄等高布局的原理弄懂了?；瞬簧贂r(shí)間，死了不少腦細(xì)胞。這說明不要輕易看別人的簡歷！血的教訓(xùn)?。。。?br>CodePen地址：兩欄并列等高布局實(shí)驗(yàn)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/110904.html
摘要：下面我們就一步一步揭開的神秘面紗，深入理解盒模型，這對我們在布局上會有一個(gè)質(zhì)的提升。與內(nèi)聯(lián)元素的百分比值與內(nèi)聯(lián)元素。 css是一門具象語言，并不像js那樣具有邏輯性，因此，就算入行了前端很久的工程師，也覺得css難以掌握。下面我們就一步一步揭開css的神秘面紗，深入理解css盒模型，這對我們在布局上會有一個(gè)質(zhì)的提升。 盒子模型 showImg(https://segmentfault....
摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下，布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設(shè)定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設(shè)計(jì)指南》的讀書筆記，用于加深學(xué)習(xí)效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個(gè)元素都有一個(gè)默認(rèn)的 display 值。對于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline ...
摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下，布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設(shè)定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設(shè)計(jì)指南》的讀書筆記，用于加深學(xué)習(xí)效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個(gè)元素都有一個(gè)默認(rèn)的 display 值。對于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline ...
摘要：多列等高布局是在一個(gè)容器里面，并排的多列，如果內(nèi)容的高度無法在一開始確定例如內(nèi)容是動態(tài)的，又需要讓各列自然地?fù)伍_不出現(xiàn)每列里面的滾動條，這時(shí)候需要用或者的方法把各列高度設(shè)置為最高列的高度。 多列等高布局是在一個(gè)容器里面，并排的多列，如果內(nèi)容的高度無法在一開始確定（例如內(nèi)容是動態(tài)的），又需要讓各列自然地?fù)伍_（不出現(xiàn)每列里面的滾動條），這時(shí)候需要用css或者js的方法把各列高度設(shè)置為最高列...
摘要：總結(jié)一下左邊固定，右邊自適應(yīng)的兩欄布局的七種方法?；镜臉邮绞牵瑑蓚€(gè)相距左側(cè)寬基本的樣式是，兩個(gè)盒子相距左側(cè)盒子寬，右側(cè)盒子寬度自適應(yīng)。沒有清除浮動的方法，若左側(cè)盒子高于右側(cè)盒子，就會超出父容器的高度。 總結(jié)一下左邊固定，右邊自適應(yīng)的兩欄布局的七種方法。其中有老生常談的float方法,BFC方法，也有CSS3的flex布局與grid布局。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及...
閱讀 1459·2021-11-25 09:43
閱讀 2321·2021-09-27 13:36
閱讀 1168·2021-09-04 16:40
閱讀 2041·2019-08-30 11:12
閱讀 3367·2019-08-29 14:14
閱讀 630·2019-08-28 17:56
閱讀 1409·2019-08-26 13:50
閱讀 1315·2019-08-26 13:29
