首页 > 其他分享 >CSS: offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight

CSS: offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight

时间:2023-06-09 23:12:20浏览次数:38  
标签:padding scrollWidth clientHeight aside height clientWidth querySelector div marg

  

 

 

 

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        div {
            width: 300px;
            height: 500px;
            margin: 30px;
            border: 20px dashed violet;
            padding: 40px;
            background-color: plum;
            position: relative;
            overflow-x: scroll;
            overflow-y: scroll;
            display: flow-root;
        }

        aside {
            width: 100px;
            height: 800px;
            background-color: peru;
            position: absolute;
            margin: 10px;
            padding: 20px;
            border: 30px dotted coral;
            top: 50px;
        }
    </style>
</head>

<body>
    <div>
        <aside></aside>
    </div>
    <script>
        const div = document.querySelector('div')
        const aside = document.querySelector('aside')
    </script>
</body>

</html>

 

标签:padding,scrollWidth,clientHeight,aside,height,clientWidth,querySelector,div,marg
From: https://www.cnblogs.com/dissipate/p/17470468.html

相关文章

  • offsetHeight、clientHeight、scrollHeight的区别
    1.盒子模型介绍这三个属性之前先来了解一下CSS盒子模型。盒子模型顾名思义就是盒子的意思,盒子里面可以装很多东西。组成一个完整的盒子主要包括下面几个部分:widthheightpaddingbordermarginbox-sizing(用来区别正常盒模型和怪异盒子模型)盒子模型又分为了正常盒模型和......
  • clientHeight、clientWidth innerHeight innerWidth
    https://www.runoob.com/jsref/prop-win-innerheight-innerwidth.htmlinnerHeight返回窗口的文档显示区的高度,如果有垂直滚动条,也包括滚动条高度。innerWidth返回窗口......
  • 使用this.$refs.xxx.clientWidth获取不到对象,报错Cannot read properties of undefine
    根据搜索结果显示,有几种可能1、组件使用了懒加载。  排除这种可能2、组件上使用了v-for.v-if等。经判断,是这个问题 ......
  • clientWidth & scrollWidth:
    clientWidth:只读属性 Element.clientWidth 对于内联元素以及没有CSS样式的元素为0;否则,它是元素内部的宽度(以像素为单位)。该属性包括内边距(padding),但不包括边框(bord......
  • 再次详解clientHeight、offsetHeight、scrollHeight
    关于clientHeight、offsetHeight、scrollHeightwindow.screen.availWidth返回当前屏幕宽度(空白空间)window.screen.availHeight返回当前屏幕高度(空白空间)window.s......
  • offsetHeight clientHeight scrollHeight
       offsetHeight:border+padding+content   offsetLeft/offsetTop是元素外边距离父内边距的距离   ↑↑↑参照物由父级身上的position:absolute/fix......