CSS中min-width屬性有什么用

這篇文章主要介紹了CSS中min-width屬性有什么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　在網頁中，如果一個元素沒有設置最小寬度(min-width)，這時當瀏覽器縮小到一定程度時，元素中的布局可能會發生變化。如果想要保持布局不變，可以給該元素（如div)設置最小寬度屬性，比如：

　　min-width屬性

　　<style>

　　 #footer{

　　  min-width:960px;/*最小寬度設置為960像素，當瀏覽器寬度小于該值時，該元素不再自適應，而是部分元素被遮擋住。*/

　　 }

　　</style>

　　min-width屬性設置元素的最小寬度。

　　說明

　　該屬性值會對元素的寬度設置一個最小限制。因此，元素可以比指定值寬，但不能比其窄。不允許指定負值。

　　默認值： none

　　繼承性： no

　　版本： CSS2

　　JavaScript語法： object.style.minWidth="50px"

　　可能的值

　　值 描述

　　length 定義元素的最小寬度值。默認值：取決于瀏覽器。

　　% 定義基于包含它的塊級對象的百分比最小寬度。

　　inherit 規定應該從父元素繼承min-width屬性的值。

　　min-width作用及效果

　　當瀏覽器縮小到一定程度時，元素中的布局可能會發生變化。如果想要保持布局不變，可以給該元素（如div)設置最小寬度屬性。

　　把瀏覽器寬度縮小到min-width以下像素的時候，這個div不會再縮小，而瀏覽器就會產生滾動條

　　然后我用min-height的思維去理解min-width，然后發現溴大了….

　　<divclass="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</div>

　　.test{

　　min-width:100px;

　　height:60px;

　　background-color:#E5B783;

　　}

　　結果如圖：

　　其實大家就是想知道為什么會出現那樣的情況，于是做了這樣的測試

　　<divclass="parent">

　　<divclass="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</div>

　　</div>

　　.parent{

　　width:200px;

　　height:auto;

　　}

　　.test{

　　min-width:100px;

　　height:60px;

　　background-color:#E5B783;

　　}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS中min-width屬性有什么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!