CSS max-width属性,最大宽度
max-width属性及作用
CSS中的max-width属性,可以用来设置HTML元素的最大宽度,设置了最大宽度的HTML元素可以比指定的max-width小,但不能比该设置的值大,而且不允许负值。这是什么概念呢?比如,自适应的网页设计中,为了能够让页面中的元素在浏览器窗口大小改变的过程中依然保持整洁不乱,元素的大小也会在此过程中根据相应比例进行缩放或放大,如果设置了max-width,则该元素只能放大到该属性值设置的宽度(个人观点,仅供参考),比如下面的这个input元素的示例:
这个input元素的宽度width虽然设置成了100%,即与其父元素的宽度一样,但是将max-width设置成了600px。如果是PC端的用户,可以将浏览器的窗口进行缩放或放大,然后看看max-width的具体效果(宽度可以比属性值小,但不能比之大)。
max-width属性值
值 | 描述 |
---|---|
none | 默认,最大宽度无限制 |
length | 长度值,单位可以是px、cm等 |
百分比 | 单位为%,长度是相对于父元素的宽度的百分比 |
inherit | 从父元素继承最大宽度的属性 |
max-width属性实例代码,及在线编辑器
<div style='max-width:100px;width:100%;height:20%;background-color:orange'></div>