max-width

简介:

#main { width: 600px; margin: 0 auto; } 设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。 唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案... #main { max-width: 600px; margin: 0 auto; } 在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要,调整下浏览器窗口大小检查下吧! 顺便提下, 所有的主流浏览器包括IE7+在内都支持 max-width ,所以放心大胆的用吧。



本文转自    风雨萧条 博客,原文链接:     http://blog.51cto.com/1095221645/1745115   如需转载请自行联系原作者

相关文章
|
3月前
|
编解码 UED
媒体查询中 max-width 和 min-width 属性的作用
【10月更文挑战第24天】可以结合其他媒体特性,如高度、分辨率等,来进一步优化和定制媒体查询的效果。通过对这些属性的深入理解和灵活运用,我们能够更好地应对不同屏幕尺寸带来的挑战,打造出适应各种环境的优秀设计作品。
|
4月前
|
前端开发
min-width/max-width 和 min-height/max-height 属性间的覆盖规则
在CSS中,min-width/max-width及min-height/max-height属性用于控制元素的最小和最大尺寸。当min-width与max-width或min-height与max-height属性同时设置时,若它们的值有冲突,max-width和max-height具有更高的优先级。这意味着元素的实际宽度和高度将受限于max-width和max-height的规定,而min-width和min-height则确保了元素不会小于所设定的最小尺寸。
|
3月前
|
前端开发 容器
max-height 属性和 min-height 属性有什么区别?
【10月更文挑战第27天】`max-height`属性和`min-height`属性在控制元素高度方面各有特点和适用场景,通过合理地运用这两个属性,可以更灵活地实现各种页面布局效果,满足不同的设计和功能需求。
|
9月前
|
前端开发
line-height与height的区别
line-height与height的区别
86 0
|
前端开发
响应式 - 基于min-width和max-width属性的响应式布局
响应式 - 基于min-width和max-width属性的响应式布局
259 0
响应式 - 基于min-width和max-width属性的响应式布局
|
算法 C++
10min快速回顾C++语法(一)
本系列文章旨在短时间内回顾C/C++语法中的重点与易错点,巩固算法竞赛与写题过程中常用的语法知识,精准地解决学过但有遗忘的情况,为算法刷题打下坚实的基础。
134 0
|
编解码 iOS开发
meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用
meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用
617 0