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

    最细讲解JS盒子模型的基本属性(图文示例)

    藏色散人藏色散人2022-08-06 17:52:37转载171

    本篇文章给大家通过图文方式讲解JS盒子模型的基本属性:clientWidth/Height、offsetWidth/Height、offsetTop/Left、scrollWidth/Height、scrollTop/Left,希望对需要的朋友有所帮助!

    写一个JS盒子

     <style>
        .container {
            width: 300px;
            height: 300px;
            border: 3px solid red;
            margin: 50px;
            position: relative;
        }
        .box {
            padding: 30px;
            width: 100px;
            height: 150px;
            border: 10px solid lightblue;
            position: absolute;
            top: 50px;
            left: 50px;
            font-size: 15px;
            line-height: 100px;
            text-align: center;
            overflow: auto;
        }
    </style>
    
    <body>
        <div class="container">
            <div class="box">盒子</div>
        </div>
    </body>

    模型:
    在这里插入图片描述
    盒子的属性:

    client

    offset

    scroll

    相关推荐:【JavaScript视频教程

    以上就是最细讲解JS盒子模型的基本属性(图文示例)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:盒子模型 javascript
    上一篇:js如何创建、删除、追加及替换元素节点(附代码实例) 下一篇:实例讲解js如何实现dom元素横向及纵向滚动的动画
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 弹性盒子中间自适应如何设置(代码教程)• 盒子的布局位置box-ordinal-group属性详解• JS如何实现盒子拖拽效果?(附代码)• 一起聊聊CSS盒子大小与内外边距及边框的关系
    1/1

    PHP中文网