您所在的位置： &
8.3.6　设置宽度的最大值和最小值
8.3.6　设置宽度的最大值和最小值
清华大学出版社
《无懈可击的Web设计--使用HTML 5和CSS 3提高网站的灵活性与适应性（第3版）》第8章流动布局和弹性布局，本章将讨论如何创建流动布局和弹性布局——为我们无懈可击的设计方案增添一个工具。掌握如何恰当地使用它们，将给网页设计增加更多的灵活性。本节为大家介绍设置宽度的最大值和最小值。
8.3.6　设置宽度的最大值和最小值
构建流动布局时，设计者常常要面对的一个障碍就是行的长度。能够随心所欲地伸展布局，对用户而言非常有益。但到了一定程度时，行的长度可能长到使内容难以阅读，也可能窄到破坏页面上其他部分的外观。
在这里，CSS的max-width和min-width属性就派上用场了。给流动布局设置最大和最小宽度，可以防止栏被无限制地伸长或收缩。很遗憾，IE6 不支持这种功能。但对支持这种功能的浏览器来说，它会带来很大的提高，而且添加起来十分便捷。
例如，在我们的测试示例中，如果给容纳整个布局的&div id="wrap"&设置一个 maxwidth，就可以确保列不会宽得离谱：#wrap&{ &max-width:&1200 &}&
图 8-14 显示了添加 max-width 规则之后的结果。布局依然十分灵活，但在窗口宽度超过 1 200 像素时，布局就会停止扩展。
图 8-14　如果窗口宽度超过 1 200 像素，布局将停止扩展也可以选择为单个列应用max-width 属性。例如，不让内容栏超过600像素，但布局作为一个整体是可以无限制扩展的(见图 8-15)。#content&{ &max-width:&600 &}&
图 8-15　如果内容栏被拉伸超过 600 像素，内容就会停止扩展
相应的，也可以给整个布局(或单个列)设置一个 min-width 属性，防止布局收缩到无法阅读的宽度：#wrap&{ &max-width:&1200 &min-width:&600 &}&
图8-16显示了添加min-width规则后页面的布局，将布局的最小宽度锁定为600像素，当窗口宽度低于这个值时布局就不会再收缩。同时水平滚动条会出现。
图8-16　如果布局宽度低于600像素，水平滚动条就会出现
可以使用CSS来灵巧地调整流动布局内部的图片。参阅Ethan Marcotte撰写的关于此主题的文章( 和图书)“Responsive Web Design”。第9章也将讨论这个主题。
当栏的内部包含了宽度固定的对象(如图片)时，这种方法就显得非常方便，否则当栏缩小到比定宽对象更窄时，栏就会被撑破。
例如，在内容栏中放入一个宽度为500像素的图片，但把窗口调整到使内容栏宽度小于500像素，那么侧边栏就会将图片的一部分遮盖(见图 8-17)；或者发生更糟糕的事情，在某些浏览器下，这会破坏整个布局。
图 8-17　当放入一个500像素宽的图片，把窗口调整到使内容栏，宽度小于500像素时，将会出现重叠现象如果给&div&容器设置 min-width(正如刚才设置 max-width 那样)，就能防止任何覆盖和布局损坏。至少对 IE6 以外的大部分浏览器都有效。这些简单的附加设置对 IE6并没有坏处，而对其他浏览器则有很大益处，这一点对管理流动布局至关重要。
#wrap&{ &max-width:&1200 &min-width:&750 &}&
【责任编辑： TEL：（010）】&&&&&&
关于&&&&&&的更多文章
现今，无论是移动设备还是平板电脑亦或是PC屏幕，都有着各异的屏
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
《C#高级编程(第8版)》是C# 2012和.NET 4.5高级技术的
《Android 4 游戏入门经典(第3版)》将赋予您惊人的灵
本书这一卷是介绍构建面向对象的联网与并发中间件的开
本书是按照全国计算机技术与软件专业技术资格（水平）考试《软件设计师考试大纲》的要求，参照《软件设计师教程》及近年来考试试
51CTO旗下网站【图文】2.2 最大值、最小值问题_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
2.2 最大值、最小值问题
上传于||暂无简介
大小：1.15MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢： & 大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案。你可以设置一...&
& 大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案。你可以设置一...&
： & 使用css编码可以提高网页速度，网页的美观度，更好的控制页面布局，工具有方便新手开发者...&
： & CSS3 为 Web 开发带来了非常令人兴奋的变化，特别是 CSS 3D 转换、动画等特性的支持，可以轻松的创建很酷的 Web 效果...&
： & 在web开发当中，为了制作一个吸引人的动态网站，开发者往往需要使用复杂的编程来实现一些浏览器效果,复杂的数据验证...&
： & 用户界面（UI）或用户界面包（User Interface pack）是一组预先设计的图形，他们可以应用在同一主题当中...&
Z-index属性，用于定义使用position: or position:&.定位的的 HTML 元素的显示顺序"位置：
你设定的Z-index的值并不重要，但相对于其他元素的 Z -index的值将定义哪个元素显示在顶部。
Z-index的最小值为 0 ；它不能是负数 （但旧的浏览器版本，可以使用负值）。
Z-索引的最大值是 ，它是一个 32 位的值及它可以运行在任何浏览器 （IE6、 IE7、 IE8、 Opera 9、 Safari 4、 Firefox 6、 Firefox 3) 除了 Safari 3 最大 Z-index为 。
因此当您设置一个 Z-index值高于
是浏览器将使用值 。
所以，我认为它是安全地使用从 0 到
之间的值。
阅读(...) 评论()