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>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.