zoukankan      html  css  js  c++  java
  • js盒模型

     1 <!DOCTYPE html>
     2 <html lang="zh">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>js盒模型</title>
     6 
     7     <style type="text/css">
     8         .sup {
     9             width: 200px;
    10             height: 200px;
    11             padding: 30px;
    12             border: 5px solid black;
    13             background-color: orange;
    14             margin: 20px;
    15             position: relative;
    16         }
    17 
    18         .sub {
    19             width: 100px;
    20             height: 100px;
    21             padding: 20px;
    22             border: 5px solid black;
    23             background-color: red;
    24             position: absolute;
    25             top: 0;
    26             left: 20px;
    27         }
    28     </style>
    29 </head>
    30 <body>
    31     <div class="sup">
    32         <div class="sub"></div>
    33     </div>
    34 </body>
    35 <script type="text/javascript">
    36     var sup = document.querySelector('.sup');
    37     // 盒子content的width
    38     var width = parseInt(getComputedStyle(sup, null).width);
    39     console.log(width);
    40 
    41     // 盒子padding+width => 子级的可活动范围
    42     var p_width = sup.clientWidth;
    43     console.log(p_width);
    44 
    45     // 盒子border+padding+width => 可视区域
    46     var b_p_width = sup.offsetWidth;
    47     console.log(b_p_width);
    48 
    49     // 盒子距离定位父级的top,left
    50     var sup_top = sup.offsetTop;
    51     var sup_left = sup.offsetLeft;
    52     console.log(sup_top);
    53     console.log(sup_left);
    54 
    55 
    56     var sub = document.querySelector('.sub');
    57     // 父级定位(relative)后,子级活动区域为父级的client(padding+width)区域
    58     var sub_top = sub.offsetTop;
    59     var sub_left = sub.offsetLeft;
    60     console.log(sub_top);
    61     console.log(sub_left);
    62 
    63 </script>
    64 </html>
  • 相关阅读:
    监听事件 队列 邮件发送
    elasticsearch 天气
    elasticsearch
    event 监听事件
    observer 监听的实现 laravel 框架
    中间件
    git 代码 上传到码云
    laravel 省略入口文件 index.php
    limit offset 和limit
    CSS变形和动画
  • 原文地址:https://www.cnblogs.com/xuqidong/p/12114411.html
Copyright © 2011-2022 走看看