• 技术文章 >web前端 >css教程

    css怎么设置高宽

    青灯夜游青灯夜游2021-04-21 16:35:50原创881

    css设置高宽的方法:1、使用width和height属性设置元素的宽度和高度;2、使用max-width和max-height属性设置元素的最大宽度和高度;3、使用min-width和min-height属性设置元素的最小宽度和高度。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    方法1:使用width和height属性

    width和height属性可以设置元素的宽度和高度,定义的是元素内容区的宽度和高度,不包括填充,边框,或页边距。

    属性值:

    描述
    auto默认值。浏览器可计算出实际的宽度或高度。
    length使用 px、cm 等单位定义宽度或高度。
    %基于包含它的块级对象(父元素)的百分比宽度或高度。

    方法2:使用max-width和max-height属性

    max-width和max-height属性设置元素的最大宽度和高度,不包括填充,边框,或页边距!

    属性值:

    描述
    none默认。定义对元素的最大宽度或高度没有限制。
    length定义元素的最大宽度值或最大高度值。
    %定义基于包含它的块级对象的百分比最大宽度或最大高度。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style>
    p
    {
    	max-width:100px;
    	max-height:100px;
    	background-color:yellow;
    }
    </style>
    </head>
    
    <body>
    <p>这一段的最大宽度设置为100 px,最大高度设置为100 px。</p>
    </body>
    </html>

    1.png

    方法3:使用min-width和min-height属性

    min-width和min-height属性设置元素的最小宽度和高度,不包括填充,边框,或页边距!

    属性值:

    描述
    length定义元素的最小宽度或最小高度。默认值是 0。
    %定义基于包含它的块级对象的百分比最小宽度或最小高度。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style>
    p
    {
    	min-width:150px;
    	min-height:100px;
    	background-color:yellow;
    }
    </style>
    </head>
    
    <body>
    <p>这个段落的最小宽度设置为 150px,最小高度设置为 100px。</p>
    </body>
    </html>

    2.png

    (学习视频分享:css视频教程

    以上就是css怎么设置高宽的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 高宽
    上一篇:css怎么设置边框的宽度 下一篇:css样式的注释怎么写
    大前端线上培训班

    相关文章推荐

    • css如何去掉背景色• css怎么设置渐变• css如何实现背景透明,文字不透明?• 深入了解CSS中的@property特性• 分享CSS处理图像上文字的几种小技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网