您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

内蒙古11选五规则:max-width css最大宽度

css 最大宽度 css max-width

最大宽度为变量宽度,意思对对象设置最大宽度后,其对象宽度将不超过此最大宽度值。从字也能理解最大就是不超过之作用。max-width也属于width宽度一种细分。与之对应为最小宽度 min-width!

max-width
css 最大宽度 属性样式

一、最大宽度语法

max-width语法:
max-width : 200px
设置对象最大宽度200px

max-width:60%
设置对象相等于父级宽度最大宽度为父级宽度60%。假如父级宽度为200px,那么此对象设置max-width最大宽度为60%,那么实际最大宽度就是200×60%=120px

特别注意:一般设置变量的宽度,固定宽度(width)就不能同时设置。

最大宽度 内蒙古11选五开奖5号的 max-width值说明:值可以为具体数值比如(100px、500px);可以为百分比值比如(70%、90%),但值不能为负数(只能为正值)。

二、最大宽度语法结构分析图

最大宽度 max-width属性语法分析结构图
最大宽度 max-width属性语法分析结构图

三、max-width最大宽度DIV CSS实例

1、内蒙古11选五开奖5号的关于最大宽度实例描述
这里设置一个300px宽、边框1px红色的盒子,再设置一个百分比div盒子。这里设置css边框也是为了便于观察对象宽度情况。

2、最大宽度应用实例css代码

.warp{ max-width:300px; border:1px solid #F00}
.bfb{ max-width:30%; border:1px solid #00F}

3、实例对应html内容代码

<div class="warp">
直接放内容,看看我这个DIV宽度,
然后缩小浏览器宽度小于300px试试,
看看宽度是否会变小
</div>

<div class="bfb">
为最大宽度设置30%,同样观察宽度情况,
并在缩小浏览器宽度看看变化情况
</div>

4、完整CSS+HTML代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS最大宽度实例 在线演示 Thinkcss</title>

<style>
.warp{ max-width:300px; border:1px solid #F00}
.bfb{ max-width:30%; border:1px solid #00F}
</style>
</head>
<body>
<div class="warp">
直接放内容,看看我这个DIV宽度,
然后缩小浏览器宽度小于300px试试,
看看宽度是否会变小
</div>

<div class="bfb">
为最大宽度设置30%,同样观察宽度情况,
并在缩小浏览器宽度看看变化情况
</div>

</body>
</html>

5、效果截图

浏览器正常尺寸下最大宽度实例截图
浏览器正常尺寸下最大宽度实例截图

缩小缩窄浏览器:

缩小浏览器宽度小于300px情况下,最大宽度实例截图
缩小浏览器宽度小于300px情况下,最大宽度实例截图

6、分析说明
从实例看最大宽度max-width设置后,当浏览器宽度大于300px时,最大宽度值为300px生效,对象(红色框盒子)宽度最大显示300px,而蓝色对象为百分比30%,所以浏览器宽看起来百分比30%比较宽。但当浏览器缩小到小于300px时,设置固定最大宽度300px的红色DIV将随浏览器缩小而紧贴浏览器缩小,百分比则始终按照最大宽度30%显示所以百分比蓝色DIV看起来就小了。

7、在线演示

查看案例

8、打包免费下载最大宽度案例

四、应用场景

以前IE6不支持max-width,但现在用户很少使用IE6浏览器所以不用再考虑最大宽度兼容。在布局全屏的网页时,有时我们为了不让网页内容紧贴浏览器两边,所以设置百分比宽度比如(99%)这样的布局。

相关标签: 宽度 最大
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/1123.shtml

日期:2016-11-23 13:07:52 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS
  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 北京塞车pk10开奖直播 11先选五开奖结果江西 山东11选5开奖结果专家推荐号码 安徽25选5开奖时间 大乐透13081开奖结果 新疆25选7大星走势图 香港一码中特 福建时时彩推测 腾讯彩票全天计划 北京时时彩开彩结果官网 500元 倍投方案 稳赚 河内五分彩被骗的有吗 云南快乐10技巧 手机彩票论坛 江苏7位数如何开奖