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