zoukankan      html  css  js  c++  java
  • 三大家族比较

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <style>
     7         #box{
     8              200px;
     9             height: 200px;
    10             background-color: red;
    11             padding: 20px;
    12             border: 10px solid #000;
    13         }
    14     </style>
    15 </head>
    16 <body>
    17    <div id="box">撩课学院</div>
    18 <script>
    19     var box = document.getElementById('box');
    20     console.log(box.clientWidth, box.clientHeight); // 240 240
    21     console.log(box.offsetWidth, box.offsetHeight); // 260 260
    22 </script>
    23 </body>
    24 </html>

    width+padding    clientWidth

    width+padding+border  offsetWidth

    1 width和height分析
    2 border + padding + 内容的宽度和高度
    3 console.log(box.offsetWidth, box.offsetHeight);
    4 
    5 padding + 内容的宽度和高度
    6 console.log(box.clientWidth, box.clientHeight);
      里面内容滚动的内容的宽度和高度
      console.log(box.scrollWidth, box.scrollHeight);
     1  // offsetLeft: 当前元素距离有定位的父盒子左边的距离
     2     // offsetTop: 当前元素距离有定位的父盒子上边的距离
     3     console.log(box.offsetLeft, box.offsetTop);
     4 
     5     // clientLeft: 左边边框的宽度;
     6     // clientTop: 上边边框的宽度
     7     console.log(box.clientLeft, box.clientTop);
     8 
     9     // scrollLeft: 左边滚动的长度;
    10     // scrollTop: 上边滚动的长度
    11     console.log(box.scrollLeft, box.scrollTop);
  • 相关阅读:
    在CentOS7上搭建MySQL主从复制与读写分离
    数据库 引擎
    数据库 事务
    数据库 索引
    MYSQL
    基于mysqld_multi实现MySQL 5.7.24多实例多进程配置
    09 引导过程与故障修复
    chapter 8.3
    作业 8.1
    Chapter 04 作业
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11210815.html
Copyright © 2011-2022 走看看