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

    CSS宽度、高度属性详解

    长期闲置长期闲置2022-08-02 17:44:55原创161
    本篇文章给大家带来了关于css的相关知识,其中主要介绍了关于设置元素高度和宽度属性的相关问题,height和width属性用于设置元素的高度和宽度,height和width属性不包括内边距、边框或外边距。下面一起来看一下,希望对大家有帮助。.

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

    CSS 设置高度和宽度

    CSS 高度和宽度值

    height width 属性可设置如下值:

    实例如下:

    设置 <div> 元素的高度和宽度:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
      height: 200px;
      width: 50%;
      background-color: powderblue;
    }
    </style>
    </head>
    <body>
    <h1>设置元素的高度和宽度</h1>
    <p>这个 div 元素的高度为 200 像素,宽度为 50%:</p>
    <div></div>
    </body>
    </html>

    输出结果:

    28.png

    记住,height 和 width 属性不包括内边距、边框或外边距!它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度!

    设置 max-width

    max-width 属性用于设置元素的最大宽度。

    可以用长度值(例如 px、cm 等)或包含块的百分比(%)来指定 max-width(最大宽度),也可以将其设置为 none(默认值。意味着没有最大宽度)。

    当浏览器窗口小于元素的宽度(500px)时,会发生之前那个 <div> 的问题。然后,浏览器会将水平滚动条添加到页面。

    在这种情况下,使用 max-width 能够改善浏览器对小窗口的处理。

    提示:将浏览器窗口拖动到小于500px的宽度,以查看两个 div 之间的区别!

    注释:max-width 属性的值将覆盖 width(宽度)。

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
      max-width: 500px;
      height: 100px;
      background-color: powderblue;
    }
    </style>
    </head>
    <body>
    <h1>设置元素的最大宽度</h1>
    <p>这个 div 元素的高度为 100 像素,最大宽度为 500 像素:</p>
    <div></div>
    <p>请调整浏览器窗口来查看效果。</p>
    </body>
    </html>

    输出结果:

    29.png

    css尺寸属性:

    30.png

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

    以上就是CSS宽度、高度属性详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:聊聊如何使用CSS实现比普通阴影更加立体的阴影效果! 下一篇:通过示例简单了解基础CSS导航栏、CSS下拉菜单
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css规则有哪三种类型• css外部链接形式有哪几种• css里outline是什么• 常见css hack有哪些• 聊聊怎么使用CSS滤镜实现圆角及波浪效果
    1/1

    PHP中文网