最大宽度 | max-width (Miscellaneous Level 2) - CSS 中文开发手册 - Break易站
最大宽度 | max-width (Miscellaneous Level 2) - CSS 中文开发手册
max-width CSS属性设置元素的最大宽度。它可以防止使用的width属性值变得大于指定的值max-width。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* <length> value */ max-width : 3.5em ; /* <percentage> value */ max-width : 75% ; /* Keyword values */ max-width : none ; max-width : max-content; max-width : min-content; max-width : fit-content; max-width : fill-available; /* Global values */ max-width : inherit; max-width : initial; max-width : unset; |
max-width覆盖width,但min-width覆盖max-width。
Initial value | none |
---|---|
应用对象 | all elements but non-replaced inline elements, table rows, and row groups |
是否可继承 | no |
百分比值 | refer to the width of the containing block |
媒体 | visual |
计算值 | the percentage as specified or the absolute length or none |
动画类型 | a length, percentage or calc(); |
规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
<length>最大宽度,表示为 <length>。<percentage>最大宽度,以<percentage>包含块的宽度表示。
关键字值
none宽度没有最大值。
max-content内在的首选宽度。
min-content内在的最小宽度。
fill-available包含块的宽度减去水平边距,边框和填充。(请注意,某些浏览器这个关键字实现一个古老的名字,available。)
fit-content同为max-content.
形式语法
1 | <length> | <percentage> | none | max-content | min-content | fit-content | fill-available |
实例
在本例中,“子”将为150像素宽或“父”宽度,以较小者为准:
1 2 3 4 5 | <div id= "parent" > <div id= "child" > Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. </div> </div> |
1 2 3 4 5 6 7 8 9 10 | #parent { background : lightblue; width : 300px ; } #child { background : gold; width : 100% ; max-width : 150px ; } |
该fit-content值可用于根据其内容所需的内在大小来设置元素的宽度:
1 2 3 4 5 | <div id= "parent" > <div id= "child" > Child Text </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 | #parent { background : lightblue; width : 300px ; } #child { background : gold; width : 100% ; max-width : -moz-fit-content; max-width : -webkit-fit-content; } |
规范
Specification | Status | Comment |
---|---|---|
CSS Intrinsic & Extrinsic Sizing Module Level 3The definition of 'max-width' in that specification. | Working Draft | Adds the max-content, min-content, fit-content, and fill-available keywords.(Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.) |
CSS TransitionsThe definition of 'max-width' in that specification. | Working Draft | Defines max-width as animatable. |
CSS Level 2 (Revision 1)The definition of 'max-width' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 7.0 | 4.0 | 2.0.2 (416), buggy before |
applies to <table> 1 | No support | No support | (Yes) | No support | (Yes) | No support |
max-content, min-content, fit-content, and fill-available | No support 3 | No support | 3.0 (1.9)-moz 2 | No support | No support | No support 3 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!