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

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

　　例子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. 一个漂亮的lazarus做的pagecontrol

    厌倦了屏幕上的默认灰色?让我们来欣赏一下商业配色. 这个组件实现了高光,点睛色,描边边等效果, 再配几组色彩,应该非常不错. 基于 lazarus 1.08 大家可以上 www.fpccn.com 看 ...

  2. pselect 函数

    <unix网络环境编程> 中20-7 的示例理解. #include "unp.h" static void recvfrom_alarm(int); void dg_ ...

  3. struts2升级

    http://www.blogjava.net/ldwblog/archive/2013/10/14/404944.html

  4. h5页面适配iPhone X的方法

    一.原生适配iphoneX 原生适配很简单,查看机型图:   只要用 #define KIsiPhoneX ([UIScreen mainScreen].bounds.size.height>8 ...

  5. Desktop Central帮助您升级Windows 10，获取更新的五大增强功能

  6. Mac osx 启用和关闭root用户

    设置->群组和用户->点击小

  7. HTML 内 meta标签

    <!-- 是否删除默认的苹果工具栏和菜单栏 --> <meta name="apple-mobile-web-app-capable" content=" ...

  8. 【转】linux 磁盘挂载

    挂载好新硬盘后输入fdisk -l命令看当前磁盘信息 可以看到除了当前的第一块硬盘外还有一块sdb的第二块硬盘,然后用fdisk /dev/sdb 进行分区 进入fdisk命令,输入h可以看到该命令的 ...

  9. 2019.01.23 hdu1693 Eat the Trees（轮廓线dp）

    传送门 题意简述:给一个有障碍的网格图,问用若干个不相交的回路覆盖所有非障碍格子的方案数. 思路:轮廓线dpdpdp的模板题. 同样是讨论插头的情况,只不过没有前一道题复杂,不懂的看代码吧. 代码: ...

  10. (5)How to let go of being a "good" person — and become a better person

    https://www.ted.com/talks/dolly_chugh_how_to_let_go_of_being_a_good_person_and_become_a_better_perso ...