zoukankan      html  css  js  c++  java
  • CSS 基础 例子 最小高度和最大高度设置

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

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

       例子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实现水平居中的5种思路
    html5遵循的5个设计原则
    HTML5标签嵌套规则
    动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)
    深入理解CSS动画animation
    深入理解CSS径向渐变radial-gradient
    深入理解CSS线性渐变linear-gradient
    动态更新语句,时间精度丢失
    反射类的构造数
    在ASP.NET MVC中使用Grid.mvc
  • 原文地址:https://www.cnblogs.com/shawnhu/p/8137163.html
Copyright © 2011-2022 走看看