zoukankan      html  css  js  c++  java
  • 初探css-18 尺寸

    CSS 尺寸 (Dimension)


    CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。


    更多实例

    这个例子演示了如何设置不同元素的高度。

    <style>
    img.normal
    {
        height:auto;
    }
    img.big
    {
        height:120px;
    }
    p.ex
    {
        height:100px;
        width:100px;
    }
    </style>
    </head>
    
    <body>
    <img class="normal" src="logocss.gif" width="95" height="84" /><br>
    <img class="big" src="logocss.gif" width="95" height="84" />
    <p class="ex">这个段落的高和宽是 100px.</p>
    <p>这是段落中的一些文本。这是段落中的一些文本。
    这是段落中的一些文本。这是段落中的一些文本。
    这是段落中的一些文本。这是段落中的一些文本.</p>
    </body>

    这个例子演示了如何使用百分比值设置元素的高度。

    <style>
    html {height:100%;}
    body {height:100%;}
    img.normal {height:auto;}
    img.big {height:50%;}
    img.small {height:10%;}
    </style>
    </head>
    
    <body>
    <img class="normal" src="logocss.gif" width="95" height="84" /><br>
    <img class="big" src="logocss.gif" width="95" height="84" /><br>
    <img class="small" src="logocss.gif" width="95" height="84" />
    </body>

    本例演示如何使用像素值来设置元素的宽度。

    <style>
    img {width:200px;}
    </style>
    </head>
    <body>
    
    <img src="logocss.gif" width="95" height="84" />
    
    </body>

    此示例演示如何设置元素的最大高度。

    <style type="text/css">
    p
    {
        max-height:50px;
        background-color:yellow;
    }
    </style>
    </head>
    
    <body>
    <p>本段落的最大高度被设置为 50px。 本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。</p>
    </body>

    此示例演示如何设置元素的最小高度。

    <style>
    p
    {
        min-height:100px;
        background-color:yellow;
    }
    </style>
    </head>
    
    <body>
    <p>这段的最小高度设置为100 px。</p>
    </body>

    这个例子演示了如何使用像素值设置元素的最小宽度。

    <style>
    p
    {
        min-width:150px;
        background-color:yellow;
    }
    </style>
    </head>
    
    <body>
    <p>这个段落的最小宽度设置为 150px。</p>
    </body>

    所有CSS 尺寸 (Dimension)属性

    属性描述
    height 设置元素的高度。
    line-height 设置行高。
    max-height 设置元素的最大高度。
    max-width 设置元素的最大宽度。
    min-height 设置元素的最小高度。
    min-width 设置元素的最小宽度。
    width 设置元素的宽度。
  • 相关阅读:
    regsvr32 错误解决方案
    cefsharp解决闪烁
    WPF使用cefsharp 下载地址
    Winform下CefSharp的引用、配置、实例与报错排除(源码)
    cefSharp在XP下使得程序崩溃记录
    mvc3在window 7 iis7下以及 xp iis 5.1下的部署 ,asp.net MVC3无法打开项目文件E:/我们的项目/Project/HeatingMIS.Web/HeatingMIS.Web.csproj”。此安装不支持该项目类型。
    顺序程序设计
    你对linux了解多少,Linux 系统结构详解!
    算术运算符和算术表达式(优先级,结合性等)
    离散化和面元划分(可以理解为划分段)
  • 原文地址:https://www.cnblogs.com/wutaotaosin/p/11579080.html
Copyright © 2011-2022 走看看