最小高度，无论什么时候，高度不会小于该值，即使内容很少，不限制高度最大值，超出时候，按照实际内容来决定高度

　　 最大高度，无论什么时候，高度不会大于该值，即使内容很多，不限制最小高度，超出时候，多出部分会撑出元素外边

　　例子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>

CSS 基础 例子 最小高度和最大高度设置的更多相关文章

  1. CSS 基础 例子 浮动float

    一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...

  2. CSS 基础 例子 Image 高度设置

    body高度100%,三个image高度分别为auto,50%,60%,imge高度为当时body高度的百分比,auto时为原始高度 html代码如下: <!DOCTYPE html> & ...

  3. CSS 基础 例子 行高line-height

    “行高“指一行文字的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元素时,它定 ...

  4. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  5. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  6. CSS 基础 例子 盒子模型及外边距塌陷

    我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...

  7. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  8. CSS 基础 例子 图片拼合技术

    利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;( ...

  9. CSS 基础 例子 背景色 & 背景图片

    背景简写形式 : body {background:#ffffff url('img_tree.png') no-repeat right top;} 一.背景色  background-color ...

随机推荐

  1. Maven的conf目录下settings.xml的简单配置

    省略一些其他配置 <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="h ...

  2. Ant.OutputIsUnreadableCode

    Ant在Mac OS X终端中的输出乱码的问题 1. 问题: 在用Ant脚本进行构建Android App时,在编译失败时,Ant 输出有乱码. 2. 环境: Mac OS X, 简体中文版.在Ter ...

  3. 部分开源gis 方案的比较

    3.1MapServer和GeoServer的总体对比 功能上:MapServer弱于GeoServer,QGIS要强于UDIG. 效率上:Mapserver对WMS(Web Map service) ...

  4. POJ3254或洛谷1879 Corn Fields

    一道状压\(DP\) POJ原题链接 洛谷原题链接 很显然的状压,\(1\)表示种植,\(0\)表示荒废. 将输入直接进行状压,而要满足分配的草场是适合种草的土地,即是分配时的状态中的\(1\),在输 ...

  5. Mac OS 10.12 - 在VMwear Workstation12.5.2中以两种方式进入恢复模式（Recovery）！！！

    注意:如果你打算安装Mac OS10.12 到虚拟机里面学习,那么我强烈建议你在没有安装任何其它软件之前,按照我这篇博客来进入恢复模式(Recovery),禁用Rootless机制!!!这样处理后,你 ...

  6. 20岁的设计师vs30岁的设计师

    20岁的设计师vs30岁的设计师 如果你还是20来岁,要恭喜你,你还年轻, 一切才刚刚开始 还有时间去探索无尽的可能 还有时间去找到无限的前途 ​ 如果30岁的你还不够强大, 请记得时刻给予自己信心, ...

  7. Spring Boot学习笔记：kafka应用

    Kafka作为众多Java消息中间件之一,有诸多优点.本文讲解Kafka的应用.学习一个新的知识点,建议先找一个demo,越简单越好的demo,跑通这个demo,了解大致原理,然后在分析细节,详细了解 ...

  8. （转贴）fusionCharts属性参考API

    一.FusionCharts的分类 关于FusionCharts的基本介绍我就不在这里浪费篇幅了,想了解的朋友自己去www.baigoogedu.com里面找吧.我就说说FusionCharts的官方 ...

  9. [vb.net]控制台进度条的示例

    Private Sub ConsoleProcessBar() Dim isBreak As Boolean = False Dim colorBack As ConsoleColor = Conso ...

  10. 2019.01.24 bzoj2310: ParkII（轮廓线dp）

    传送门 题意简述:给一个m*n的矩阵,每个格子有权值V(i,j) (可能为负数),要求找一条路径,使得每个点最多经过一次且点权值之和最大. 思路:我们将求回路时的状态定义改进一下. 现在由于求的是路径 ...