您好,登錄后才能下訂單哦!
這篇文章主要介紹了CSS中min-width屬性有什么用,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
在網(wǎng)頁中,如果一個元素沒有設(shè)置最小寬度(min-width),這時當(dāng)瀏覽器縮小到一定程度時,元素中的布局可能會發(fā)生變化。如果想要保持布局不變,可以給該元素(如div)設(shè)置最小寬度屬性,比如:
min-width屬性
<style>
#footer{
min-width:960px;/*最小寬度設(shè)置為960像素,當(dāng)瀏覽器寬度小于該值時,該元素不再自適應(yīng),而是部分元素被遮擋住。*/
}
</style>
min-width屬性設(shè)置元素的最小寬度。
說明
該屬性值會對元素的寬度設(shè)置一個最小限制。因此,元素可以比指定值寬,但不能比其窄。不允許指定負(fù)值。
默認(rèn)值: none
繼承性: no
版本: CSS2
JavaScript語法: object.style.minWidth="50px"
可能的值
值 描述
length 定義元素的最小寬度值。默認(rèn)值:取決于瀏覽器。
% 定義基于包含它的塊級對象的百分比最小寬度。
inherit 規(guī)定應(yīng)該從父元素繼承min-width屬性的值。
min-width作用及效果
當(dāng)瀏覽器縮小到一定程度時,元素中的布局可能會發(fā)生變化。如果想要保持布局不變,可以給該元素(如div)設(shè)置最小寬度屬性。
把瀏覽器寬度縮小到min-width以下像素的時候,這個div不會再縮小,而瀏覽器就會產(chǎn)生滾動條
然后我用min-height的思維去理解min-width,然后發(fā)現(xiàn)溴大了….
<divclass="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</div>
.test{
min-width:100px;
height:60px;
background-color:#E5B783;
}
結(jié)果如圖:
其實(shí)大家就是想知道為什么會出現(xiàn)那樣的情況,于是做了這樣的測試
<divclass="parent">
<divclass="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</div>
</div>
.parent{
width:200px;
height:auto;
}
.test{
min-width:100px;
height:60px;
background-color:#E5B783;
}
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“CSS中min-width屬性有什么用”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。