資訊專欄INFORMATION COLUMN
摘要：在世界中，提出了的應用場景自適應布局或者是流式布局中才會出現(xiàn)，從最小和最大上面我們知道他們是具有邊界行為的屬性。在端開發(fā)的時候的使用起著很關鍵的作用。
在css世界中，提出了min/max-weight的應用場景：自適應布局或者是流式布局中才會出現(xiàn)，從最小和最大上面我們知道他們是具有邊界行為的屬性。
在現(xiàn)在的pc端開發(fā)中，為了適應各種不同分辨率的顯示屏，min/max-width就會起到很關鍵的作用。
應用場景
下面列舉一個自己遇到的小情況（電腦分辨率為1920*1080），正常情況如下：
當我們不設置min-weight的時候
乍眼一看，沒什么變化，但是這也是理所當然的，最小寬度這個邊界值還沒有觸發(fā)，當我們縮小屏幕的時候，就會出現(xiàn)下面的這種情況：
此時的頁面布局就會出現(xiàn)錯亂，導致很差的視覺效果
接下來我們恢復對邊界值的設置，再來看下效果：
此時當我們達到我們設置的最小寬度的時候，頁面就不會出現(xiàn)錯亂情況了，max-weight的應用場景和其類似，有興趣的可以自己實踐下。
在pc端開發(fā)的時候min/max-weight的使用起著很關鍵的作用。
下面介紹書中的一些知識點：
min-height/min-width 的初始值為auto
max-height/max-width 的初始值為none
max/min-width 超越！Important，具有最高優(yōu)先級
img { max-width: 256px; } <--此時圖片的真實寬度應該為256px-->
超越最大
.container {
min-width: 1400px;
max-width: 1200px;
}
從字面來來看，超越最大，一個容器的最小寬度竟然比最大寬度還打，超越最大意思不就是min超越max，因此容器的實際寬度為1400px。
上面就是自己對min/max-height/width的理解，很多在張鑫旭大佬的css世界中學習到了很多的東西，希望大家有時間可以看下，歡迎補充。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52793.html
摘要：在世界中，提出了的應用場景自適應布局或者是流式布局中才會出現(xiàn)，從最小和最大上面我們知道他們是具有邊界行為的屬性。在端開發(fā)的時候的使用起著很關鍵的作用。 在css世界中，提出了min/max-weight的應用場景：自適應布局或者是流式布局中才會出現(xiàn)，從最小和最大上面我們知道他們是具有邊界行為的屬性。 在現(xiàn)在的pc端開發(fā)中，為了適應各種不同分辨率的顯示屏，min/max-width就會起...
摘要：我發(fā)現(xiàn)即使都是用的做動畫，有的屬性在動畫播放時卻會不流暢，出現(xiàn)定格動畫的效果，這里做個比較，方便我以后做動畫。流暢于流暢于其實這兩個沒法比，因為是直接縮放，會拉伸元素的，但如果用的是一個純色的，倒是可以用。 我發(fā)現(xiàn)即使都是用css3的transition做動畫，有的屬性在動畫播放時卻會不流暢，出現(xiàn)定格動畫的效果，這里做個比較，方便我以后做動畫。 transition支持的屬性類型 首...
摘要：哪些屬性可以繼承哪些不可繼承可繼承屬性字體系列屬性組合字體規(guī)定元素的字體系列設置字體的粗細設置字體的尺寸定義字體的風格偏大或偏小的字體文本系列屬性文本縮進文本水平對劉行高增加或減少單詞間的空白增加或減少字符間的空白控制 CSS哪些屬性可以繼承哪些不可繼承 可繼承屬性：1.字體系列屬性font:組合字體font-family:規(guī)定元素的字體系列font-weight:設置字體的粗細fon...
摘要：一無繼承性的屬性規(guī)定元素應該生成的框的類型文本屬性垂直文本對齊規(guī)定添加到文本的裝飾文本陰影效果空白符的處理設置文本的方向盒子模型的屬性，，，，，，，，，，，，，，，，，，，，，，，，，背景屬性一.無繼承性的屬性 1.display：規(guī)定元素應該生成的框的類型 2.文本屬性：vertical-align：垂直文本對齊 text-decoration：規(guī)定添加到文本的裝飾 ...
閱讀 1125·2021-11-24 10:21
閱讀 2561·2021-11-19 11:35
閱讀 1662·2019-08-30 15:55
閱讀 1293·2019-08-30 15:54
閱讀 1192·2019-08-30 15:53
閱讀 3498·2019-08-29 17:21
閱讀 3308·2019-08-29 16:12
閱讀 3412·2019-08-29 15:23
