【css黑科技2】css百分比實現高度佔位自適應（margin/padding）
基本知識點
本文依賴於乙個基礎卻又容易混淆的css知識點：當padding/margin 取形式為百分比的值時，無論是left/right ，還是top/bottom ，都是以父元素的width 為參照物的！
哈，top/left 以父元素的width 為參照物還好理解，但top/bottom 不是以height 更符合我們的預期嗎？有疑惑很簡單，看官方解釋：
舉個栗子
我們有個頁面，如下圖，如果是在pc端好辦，容器的寬高都寫死是多少px，這樣即使載入不出來容器都不會變型。但是在移動端，由於各機型解析度相差太大，寫死px是絕對不可能的，終究還得靠百分比來實現的：
一行2列的容器寬度設個50%吧，這樣一行放倆容器，各佔螢幕寬度一半，沒問題。
寬度設個100%取容器的寬度，沒問題。
容器高度沒法設定啊，因為容器寬高的參照物不一樣，而且需求是高度與寬度一致，所以無法通過為容器高度設定百分比來達成，那就只能靠內容高度撐開了。
容器的內容高度就是的高度，若是正方形，則高度與寬度一致，也即與容器寬度一致，看起來沒問題是吧？實際上，在瀏覽器把載入出來以前，的高度是零，那可就沒辦法把容器撐開了，如下圖所示：
這樣一來，即使載入速度再快，也會有個高度撐開的過程，如果沒有載入成功，那更慘，整個頁面的結構都有可能會有問題，這肯定會被測試同學報bug的啦
給容器設定padding-top/bottom
啦啦啦，上文說的padding-top/bottom 的百分比值，是依賴父容器寬度的，這樣容器的寬度和高度都可以統一同乙個參照物了（父元素的寬度）
視覺結果如下：
容器的盒子模型如下：
從盒子模型可以看出，雖然容器的內容高度為0，但由於有了跟內容寬度一致的padding ，因此整體視覺效果上像是被撐開了。我們達成了最初的夢想
此方案瀏覽器相容性很不錯，唯一的缺陷是無法給容器設定max-height 屬性了，因為max-height 只能限制內容高度，而不能限制padding ！！,如下這個專案：
這個頭圖是按寬高比設定的大小，但是還需要考慮橫屏的情況，如下圖：
我們是不會輕易的狗帶的！！
給子元素/偽元素設定margin/padding撐開容器
從上面的方案的盒模型看出max-height 失效的原因是容器的高度本來就是padding 撐的，而內容高度為0，max-height 無法起作用。那想要優化這一點，唯一的方法就是利用內容高度來撐開而非padding ，這個方案跟消除浮動所用的方案非常相似：給容器新增乙個子元素/偽元素，並把子元素/偽元素的pading/margin 設為100%，使其實際高度相當於容器的寬度，如此一來，便能把容器的高度撐至與寬度達成我們預想的寬高比(1:1)了。由於新增子元素與html語義化相悖，因此更推薦使用偽元素:after 來實現此方案。
我們再來看看此時的盒子模型：
完美，可以看出，此時容器的內容高度與內容寬度一致，媽媽再也不用擔心我無法通過max-height 來限制容器高度了。
上面那個專案也是這樣解決了不能設定max-height 的痛點
另外，使用margin 的話需要考慮margin 摺疊的問題（參考**bfc相關），padding 則無此煩惱。
哈，容器就給你了，要往容器內新增內容，但不能新增額外高度，那只能是使用position:absolute 啦~
最後，奉上sass如下：
//佔位是否可控高度：false（無法控制min-height,但沒有多餘結構） true(可控制min-height，但要增加結構)分類:@mixin proporbox($arg:1, $type:false, $ ele:':before')
}@else
}
css標籤:
css,
padding
, margin
, 寬高比
div高度百分比
在用百分比的時候，一定要確定父親節點的高度 寬度是同樣的道理 比如 如果給div2設定height 100 那麼必須明確div1的高度，否則div2的100 就無法確定，如果要充滿整個瀏覽器視窗，那麼就要設定所有的長輩節點都為100 比如 如果想讓div2設定100 達到充滿整個瀏覽器視窗的效果，必...
css中幾種自適應寬高百分比
知識點 width 1vw 等於 可視視窗 寬度的1 height 1vh 等於 可視視窗 高度的1 calc 使用通用的數 算規則，但是也提供更智慧型的功能 1 使用 和 四則運算 2 可以使用百分比 px em rem等單位 3 可以混合使用各種單位進行計算 4 表示式中有 和 時，其前後必須要...
css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...