js基本功——盒子模型

目录：

　　盒子模型

　　几个常用宽高尺寸

　　几个常用定位尺寸

 

盒子模型

几个常用宽高尺寸

　　先看图，在说话

　　一起来找茬，看出两张图的差别了吗？对了，第二张图中多了竖向滚动条，然后右边的数据中，clientWidth和scrollWidth少了10个像素，而scrollHeight则多了38个像素。

　　图中黑色的区域是border，对，宽50像素的边框，而且client,offset,scroll这三类尺寸值是不带单位的，虽然它们的数值表示的是像素值，但不要在赋值时画蛇添足写上px，如果一定有，至少用parseInt转换一下。

　　从图中数据可以看出，clientWidth是元素自身width与padding加起来的宽度，而且不包含有滚动条所占的尺寸。滚动条会占用元素的部分尺寸，这一点从图中可以看出，第二张图中每行满排的字母个数比第一张图中少了一些。这个时候如果打印元素的width，会发现还是100px，没有减少呀？确实width的数值没有减少，这也说明，元素如果有滚动条，会把自身width分成两块，一块显示元素内容，另一块显示滚动条，也就是说width包含了元素内容和滚动条的尺寸，但是在计算clientWidth是，会把滚动条的尺寸减掉。由此可以得出最终结论，clientWidth是元素可显示内容区域的宽度与padding的和。

　　offsetWidth是clientWidth ，滚动条宽度，border宽度的和。不包含margin

　　scrollWidth在没有横向滚动条时，值与clientWidth一样，scrollHeight也是如此，但第二张图中出现了竖向滚动条时，出现了变化，可以看出，scrollWidth和scrollHeight是元素内容的实际尺寸。因为内容比尺寸比元素尺寸大，所以出现了滚动条，我们在浏览器中无法看到内容究竟有多大，但从scrollWidth和scrollHeight两个尺寸值可以看出来。

  1 <!DOCTYPE html>
  2 <html>
  3 <title>test</title>
  4 <style type="text/css">
  5     table, tr, th, td{
  6         border:1px solid black;
  7         border-spacing:0;
  8     }
  9     th, td{
 10         padding:5px;
 11     }
 12 </style>
 13 <body>
 14     <textarea id="div1" style="width: 100px;height: 100px;border: 50px solid black;padding: 30px;margin: 33px;background:green;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</textarea>
 15     <div style="height:10000px;"></div>
 16     <div id="disp" style="position:fixed;right:500px;top:42px;text-align:left">
 17         <table>
 18             <tr>
 19                 <th>height</th>
 20                 <td></td>
 21             </tr>
 22             <tr>
 23                 <th>padding</th>
 24                 <td></td>
 25             </tr>
 26             <tr>
 27                 <th>border</th>
 28                 <td></td>
 29             </tr>
 30             <tr>
 31                 <th>margin</th>
 32                 <td></td>
 33             </tr>
 34             <tr>
 35                 <th>clientHeight</th>
 36                 <td></td>
 37             </tr>
 38             <tr>
 39                 <th>offsetHeight</th>
 40                 <td></td>
 41             </tr>
 42             <tr>
 43                 <th>scrollHeight</th>
 44                 <td></td>
 45             </tr>
 46             <tr>
 47                 <th>width</th>
 48                 <td></td>
 49             </tr>
 50             <tr>
 51                 <th>clientWidth</th>
 52                 <td></td>
 53             </tr>
 54             <tr>
 55                 <th>offsetWidth</th>
 56                 <td></td>
 57             </tr>
 58             <tr>
 59                 <th>scrollWidth</th>
 60                 <td></td>
 61             </tr>
 62         </table>
 63     </div>
 64     
 65 </body>
 66 <script>
 67     var w = function(str=""){document.write(str+"<br>")};
 68     var d = document;
 69     window.$ = window.myQuery = function(arg){
 70                 if(typeof(arg)==="string"){
 71                     if(-1!=arg.search(/#.+/)){
 72                         return document.getElementById(arg.replace(/#/, ""));
 73                     }else if(-1!=arg.search(/\..+/)){
 74                         return document.getElementsByClassName(arg);
 75                     }else if(-1!=arg.search(/\w+/)){
 76                         return document.getElementsByTagName(arg);
 77                     }
 78                 }
 79             }
 80     var div1 = $("#div1");
 81     alert(div1.style['width'])
 82     var tbl =$('table')[0];
 83     w();
 84     w("div1.style.border:\t"+div1.style.border);
 85     w("div1.style.padding:\t"+div1.style.padding);
 86     w("div1.style.margin:\t"+div1.style.margin);
 87     w("div1.style.height:\t"+div1.style.height);
 88     w("div1.clientheight:\t"+div1.clientheight);
 89     w("div1.offsetheight:\t"+div1.offsetheight);
 90     w("div1.scrollheight:\t"+div1.scrollheight);
 91     w("div1.scrollTop:\t"+div1.scrollTop);
 92 window.onload = function(){
 93     update();
 94     window.onscroll = function(){
 95         update();
 96     }
 97 }
 98 function update(tb = tbl){
 99     for(var i=0; i<tb.rows.length; i++){
100         var row = tb.rows[i];
101         if(undefined!=div1.style[row.cells[0].innerHTML]){
102             row.cells[1].innerHTML = div1.style[row.cells[0].innerHTML];
103         }else if(undefined!=div1[row.cells[0].innerHTML]){
104             row.cells[1].innerHTML = div1[row.cells[0].innerHTML];
105         }
106     }
107 }
108 
109 </script>
110 </html>
View Code

 

 

 

几个常用定位尺寸

posted @ 2019-12-08 16:03  anch  阅读(178)  评论(0)    收藏  举报