CSS 基础 例子 最小高度和最大高度设置
2024-10-19 02:18:34
最小高度,无论什么时候,高度不会小于该值,即使内容很少,不限制高度最大值,超出时候,按照实际内容来决定高度
最大高度,无论什么时候,高度不会大于该值,即使内容很多,不限制最小高度,超出时候,多出部分会撑出元素外边
例子1,内容很少, min-height:60px max-height:60px
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.divcss5-min,.divcss5-max{ width:300px; border:1px solid #F00}
.divcss5-min{ min-height:60px}
.divcss5-max{ max-height:60px; margin-top:10px}
</style>
</head> <body>
<div class="divcss5-min">
最小高度为60px
</div>
<div class="divcss5-max">
最大高度为60px
</div>
</body>
</html>
运行结果:
例子2,内容很多时候
html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.divcss5-min,.divcss5-max{ width:300px; border:1px solid #F00}
.divcss5-min{ min-height:60px}
.divcss5-max{ max-height:60px; margin-top:10px}
</style>
</head> <body>
<div class="divcss5-min">
最小高度为60px<br />
DIVCSS5增加内容<br />
增加内容<br />
divcss5增加内容
</div>
<div class="divcss5-max">
最大高度为60px<br />
www.divcss5.com<br />
增加内容<br />
divcss5增加内容<br />
增加内容
</div>
</body>
</html>
最新文章
- spring jdbc 查询结果返回对象、对象列表
- C#的winform编程入门简单介绍
- uiwebview和 js交互框架
- Xcode 8:在 Active Compilation Conditions 中自定义环境变量
- 现代程序设计homework-06
- phpcms v9 二次开发 - 自己添加源文件
- 一天一个类,一点也不累 之 Set接口
- 通讯录C++console application
- 微信小程序开发入门教程
- flask模板
- Jmeter 后置处理器JSON Extractor 提取json的多个值
- hbase调优配置项笔记
- null 和System.DBNull.Value
- CSS3新增特性及知识学习线路
- day10 前向引用
- hbuilder APP服务器端(C#)推送
- 非常不错的前端框架Kendo-ui
- Work-Stealing in .NET 4.0
- 编译报错:LC.exe 已退出
- HDU 5643 King&#39;s Game 打表