div css min-height小实例

2019-09-18 郑州网站建设  

简单css *小高度 min-height实例,目标让各人认识min-height效果。这里对一个盒子配置一个*小高度,在模式少与模式多两种情况下高度变化环境。

扶直:为了观测到功效,我们对对象设置装备摆设css宽度和css边框。

1、模式少时完整min-height实例代码(HTML+CSS)

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>min-height css实例</title> <style> .exp{min-height:100px; width:100px; border:1px solid #F00} </style> </head> <body> <div class="exp">Thinkcss模式少时</div> </body> </html>

配置min-height*小高度为100px

2、内容少时 *小高度成效截图

min-height实践实例效果截图


min-height实践实例成效截图

从上图或者看出模式少时,此div盒子高度恰恰是*小高度设置值。

3、形式多时完整*小高度实例代码

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>min-height css实例</title> <style> .exp{min-height:100px; width:100px; border:1px solid #F00} </style> </head> <body> <div class="exp">Thinkcss内容多,测试形式, 接待到CSS5领略进修CSS、用意CSS标题问题。迎接退出DIV CSS出产HTML队伍</div> </body> </html>

4、形式适量时 *小高度实例成绩截图

css div*小高度实例效果与说明分析图


css div*小高度实例成效与注明解析图

从以上实例看出同样CSS *小高度,当形式少时,对象DIV高度展现设置100%,形式多时,div高度随内容添加而变高。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2787.html转载请标明出处,谢谢合作!
标签:
  • 实例
  • css
  • DIV
  • 简单
  • min-height