不定寬度元素排版及子元素固定寬高比問題

什麼情況需要做自適應呢?最常見的情況就是父元素的寬度不固定造成子元素排版改變。

我們根據不同的情況，做不同的適應。

父級元素寬度改變時，子元素大小也隨著改變，子元素的寬高參照同一標準計算的單位，例如vw以可視頁面寬度計算，rem以html的font-size計算等，效果如下

父級元素寬度改變，子元素的大小不變，改變一排能夠容納的最大個數。

這時候子元素的寬高值都不需要改變，當然就不需要自適應了。但是因為父元素一排可以容納最多的子元素並不是乙個剛好的值，剩餘空位無論如何分布，都是非常不美觀的。效果如下：

父級元素寬度改變，子元素的大小，一排能夠容納的最大個數都隨著改變。

此時實現子元素的寬度自適應，該元素具有最小寬度和最大寬度，實際寬度根據父元素的寬度和一排至少能放下的個數共同決定。頁面效果是不是美觀多了呢？

排版問題解決，接下來就需要想辦法設定未知寬度元素的高度，達到固定寬高比的效果

可替換元素和其他元素不同，它們本身有畫素寬度和高度的概念。我們可以自適應一邊的值，另一邊通過auto自動計算 。

padding-bottom

一直被忽視的乙個知識點，垂直方向上的內外邊距使用百分比做單位時，是基於包含塊的寬度來計算的。

利用這個特性，我們可以建立乙個沒有實際作用的空盒子，如果我們需要填充內容，那麼就需要使用絕對定位在內部再創造乙個容器。

.one-box

aspect-ratio的語法格式如下：aspect-ratio: /。

如下，我們可以將width或height設為auto，然後指定aspect-ratio。另乙個值就會按照比例自動變化。

/* 高度隨動 */

.box1 
/* 寬度隨動 */
.box2 

不定寬元素水平居中

1.父層 改變display為inline型別 設定為 行內元素 顯示 然後子層 使用text align center來實現居中。存在問題 將塊元素的display設定為inline型別，少了一些功能，比如 設定長度值。2.塊級元素水平居中不能使用text align center，一種常用的做法...

Extjs radiogroup子元素寬度調整

配置項 型別說明 allowblank boolean 設定是否必須選擇至少一項，true表示可以不選，false表示不能為空至少選一項，預設為true blanktext string 當allowblank設定為true並且沒有選擇任何核取方塊時的錯誤提示資訊 columns string nu...

不定寬塊狀元素居中

為什麼選擇方法一加入table標籤?是利用table標籤的長度自適應性 即不定義其長度也不預設父元素body的長度 table其長度根據其內文字長度決定 因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。第一步 為需要設定的居中的元素外面加入乙個 table ...