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

360十一选五遗漏数据:max-height 【CSS最大高度】属性样式教程

内蒙古11选五开奖5号的 最大高度max-height属性样式代码图文教程

max-height是一个可变属性,设置一定值后,对象高度在此值内高度是自适应的,一旦内容较多后等于或超过这个值高度后这个对象高度将不再增加。

在IE6浏览器不支持此属性,但现在IE6浏览器占用率偏低正趋于大幅减少中,所以现在也不别考虑max-height兼容问题。

css max-height通俗解释:
翻译最大高度
从字面也能理解,对对象盒子设置此属性样式后,但内容达不到max-height设置的高度值时,盒子对象是随内容增加而增高,减少而高度缩短,可以说设置后只要内容不多不会超过max-height设置高度值时,对象高度是紧贴内容的随内容变化而变化,但当内容过多(增加)超过或等于max-height设置值后,高度将不会再增加,最终最高高度就是max-height设置值。

换思维简单理解:假如max-height:500px,那么对象高度height最高显示500px。

一、max-height css语法结构

max-height 属性设置元素的最大高度。

1、max-height 语法:
max-height : none | length

2、max-height参数值解释:
none :  无最大高度限制
length :  由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。请参阅长度单位

3、max-height说明:
设置或检索对象的最大高度。该属性值会对元素的高度设置一个最高限制。因此,元素可以比指定值矮,但不能比其高。
如果max-height属性的值小于min-height属性的值,将会被自动转设为min-height属性的值。

4、max-height简单示例:

p { max-height: 300px} 

设置p最大高度为300px。解释p默认高度为0开始,随内容增加而增高,内容再多P高度最大增加到300px。

5、max-height结构分析图

div css max-height最大高度属性分析图
css max-height最大高度属性分析图

二、max-height实例

这里设置三个p盒子,一个设置固定高度为100px;另外两个设置相同CSS max-height最大高度100px,其内容多少不同,看看最大高度什么情况,为了 观察到高度效果,再设置css 边框样式。
1、完整max-height应用实例代码(包括内蒙古11选五开奖5号的HTML

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>max-height属性实例 ThinkCSS</title>
<style>
.exp-a{ height:100px; border:1px solid #00F}
.exp-b{max-height:100px; border:1px solid #F00}
</style>
</head>
<body>
<p class="exp-a">设置固定高度height为100px</p>
<p class="exp-b">设置最大高度max-height为100px</p>
<p class="exp-b">
thinkcss关于max-height实例<br />
设置最大高度max-height为100px<br />
设置最大高度max-height为100px<br />
设置最大高度max-height为100px<br />
设置最大高度max-height为100px 测试内容<br />
设置最大高度max-height为100px<br />
设置最大高度max-height为100px<br />
</p>
</body>
</html>

2、div css max-height实例效果截图

css max-height实例效果与解释截图
css max-height实例效果与解释截图

3、实例小结
固定高度对象,高度是固定的,不随内容紧贴内容,设置最大高度max-height属性,内容少时高度将随内容变化而变化紧贴内容,但一旦内容过多最大高度也装不下后,元素对象盒子最大高度将起作用,元素高度就固定在最大高度值得高度。

扩展关于溢出超出内容文章了解:
css隐藏溢出内容

4、在线示范演示与实例打包下载

在线演示:

查看案例

max-height属性实例打包下载:

三、css max-height属性经验总结

一般在布局时,不想内容过多后撑破最大高度时候,这个时候可以使用max-height属性设置,还有一种情况应用比较多,比如一个元素对象内可能会放图片,而图片高度不确定,这个时候可以使用max-height限制图片最高的高度(img{max-height:500px}设置图片最大高度为500px),但图片过大后,图片自动会缩小到最大高度的值。

相关标签: height max
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/1025.shtml

日期:2016-08-16 11:10:19 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS
  • 图解:从中国新闻奖、长江韬奋奖看人民日报70年 2019-06-27
  • 江夏区宣传干部培训班圆满落幕 荆楚网携手江夏区委宣传部举办 2019-06-26
  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 衡阳日报社副社长周卫国祝贺人民日报创刊70周年 2019-04-27
  • 国乒在日本全面溃败!刘国梁却在参加综艺节目 2019-04-21
  • 张琳芃球衣事件折射中超不职业 因打亚冠要多道程序 2019-04-21
  • 出租广州市番禺区大龙街东兴路476号4楼物业空置部分 2019-04-17
  • 美媒盘点地球上最强5款战略核潜艇:毁灭世界比外卖都快 2019-04-17
  • 一码中特是真吗 六肖中特期期准王中王挂牌彩图 体彩七星彩走势图近30 高频彩买啥输啥 云南快乐十分选号办法 体彩四川金7乐开奖 双色球基本走势图新浪体育 娱乐场所打架视频 江苏十一选五基本走势手机版 平特一肖公开免费威up 26选5开奖结果走势图 福利彩票现场直播开奖 2019德甲转会 中超风云2官网 极速时时彩那里开奖的