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属性有什么用”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!