CSS今日感悟

最近在制作一個網頁，在制作該網頁的過程中習得了一些奇技淫巧，特來記錄分享

導航欄子菜單對應

對于頂部導航欄的菜單項，如果還有子菜單項的顯示，大家應該都很了解，在菜單項中添加 position:relative 然后在菜單項中的子菜單中添加 position:absolute 然后定位即可，使用 :hover 來控制顯示。這樣的做法非常簡練，完全沒有使用到js代碼，注意這樣的方法必須要把子菜單放在菜單項的結構當中，類似于這樣的代碼：

現在問題來了，如果我想擺脫這種結構，想把子菜單項移到菜單項外部怎么辦？

這個時候應該怎么辦，由于CSS沒有兄弟選擇器，所以必須要借助JS來完成相應的操作，我以前的做法一般是兩個都寫好類，然后在鼠標移到菜單項的時候，通過JS尋找子菜單的類來顯示出子菜單。最近我又掌握了一種沒方便多少，但是看起來裝逼很多的方法。

那這個data-id是什么呢?不知道真相的圍觀群眾可能已經被嚇到了，其實什么都不是，就是個我自己編出來的屬性，然后在JS中獲得這個屬性的屬性值，再來尋找這個與這個屬性值相同的類就好啦。

在寬度確定的情況下的高度自適應

在這個網頁的制作中我使用了flex來做自適應，flex大家都知道，它可以將一塊區域由我們來分塊，這說明了什么？寬度是以為由css幫我們算好了，左邊占1/3，右邊占2/3。

現在我們需要考慮的就是如何讓高度能很好的自適應了。舉個例子，如果我們想要讓左右兩邊的高度相同，該怎么辦？有個很簡單的辦法都給定死了height唄，然后如果要自適應在就在不同的寬度中修改height。這樣的方法很經濟，過程很簡單，而且挺高效的。

這里我講一種很厲害的方法，它能讓高度隨著寬度自適應改變，寬度變高度則跟著變。那什么樣的屬性能跟著寬度變呢？我腦里冒出來兩個奇怪的東西:margin和padding兩兄弟，這兩兄弟的百分比設置，如果大家還有印象的話，很神奇是跟著父容器的寬度來確定的，就算是padding-top我們認為的垂直方向上的東西，也是跟著父容器的寬度來確定。那有這兩兄弟能怎么樣呢？首先我們知道margin是不能放入任何東西的，所以我們就使用padding來作為我們的實現的工具。

首先我們有一個明確寬度的容器，容器內沒有任何東西，所以高度也是0。這里我們使用一個::before選擇器，我們在容器的前面加上padding-top屬性，而屬性值是多少呢？就是我們需要的高度，高度是容器寬度的百分之多少。我們會發現整個容器真的就有了高度，而這個高度是由::before的padding-top所撐出來的，這里我還沒有去查證，::before的父容器是不是本身，但是看表現來看，應該就為本身的寬度。

然后我們給容器設置一個 position:relative 用來為自容器做準備。這個時候如果我們直接在容器內添加元素的話，我們會發現會呈現在容器的下面，這是為什么呢？很明顯因為我們使用的是padding-top屬性，上面但是不能直接顯示元素的，這個時候我們該怎么辦？我們給子容器設置 position:absolute，保險的話，我們分別再給 top, bottom， left, right 設置為0，這個時候我們就會發現了：

子容器就很自然的擠在了我們設置的padding-top中，又由于我們給父容器設置了relative，所以這個absolute的使用也非常安全，這樣我們就大功告成了。

這個方法必須要父容器寬度已知的情況才能使用。