简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 盒模型与元素大小的计算
Blogger Information
Blog 55
fans 3
comment 0
visits 54559
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型与元素大小的计算
王佳祥
Original
896 people have browsed it

盒模型与元素大小的计算

一、盒模型

  • 用实例演示一下:
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>盒模型</title>
    7.   <style>
    8.     .box {
    9.       width: 200px;
    10.       height: 200px;
    11.       padding: 10px;
    12.       /* margin-left: auto;
    13.       margin-right: auto; */
    14.       background: brown;
    15.       background-clip: content-box;
    16.       border: 2px solid #000;
    17.       /* background-clip裁切 */
    18.       margin-bottom: 30px;
    19.     }
    20.     /*当两个盒子在垂直边距上时，外边距会产生折叠*/
    21.     .box1 {
    22.       background: coral;
    23.       width: 200px;
    24.       height: 200px;
    25.       padding: 10px;
    26.       border: 2px solid #000;
    27.       background-clip: content-box;
    28.       margin-top: 50px;
    29.     }
    30.   </style>
    31. </head>
    32. <body>
    33.   <div class="box"></div>
    34.   <div class="box1"></div>
    35. </body>
    36. </html>
  • 上面代码的逻辑很简单，就是设两个宽200px，高200px的div，并设置2px的边框和10px的padding，30px的margin-bottom,50px的margin-top。然后我们来看效果：

  • 这里我们会发现明明我们设置了200x200长宽比，为什么呈现出来的是一个224x224的盒子呢？

  • 接着让我们打开调试页面一探究竟。

    我们可以找到下面的这张示意图：

  • 在这张图中，我们发现我们设置的200x200出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框）

  1. margin(外边距) - 清除边框外的区域，外边距是透明的。
  3. border(边框) - 围绕在内边距和内容外的边框。
  5. padding(内边距) - 清除内容周围的区域，内边距是透明的。
  7. content(内容) - 盒子的内容，显示文本和图像。

  • 由上图测试可知，元素的大小不是我们设置的200x200,而是加上了内边距和边框的大小：

    224（width） = 200（content） + 10（padding）* 2 + 2（border）* 2

  • 但是这样计算的话很不方便，所以我们可以用box-sizing: content-box|border-box|inherit;来更方便的设置元素大小

  1. box-sizing: content-box;在自己设定的宽度和高度之外绘制元素的内边距和边框。
  3. box-sizing: border-box;在自己设定的宽度和高度之内绘制元素的内边距和边框。
  5. box-sizing: inherit;规定应从父元素继承 box-sizing 属性的值。
  • 实例：
  1. <style>
  2.       .box {
  3.         width: 200px;
  4.         height: 200px;
  5.         padding: 10px;
  6.         background: brown;
  7.         border: 2px solid #000;
  8.         box-sizing: border-box;
  9.       }
  10.      .box1 {
  11.         background: coral;
  12.         width: 200px;
  13.         height: 200px;
  14.         padding: 10px;
  15.         border: 2px solid #000;
  16.         box-sizing: content-box;
  17.         margin-top: 50px;
  18.       }
  19.       </style>
  20.   </head>
  21.   <body>
  22.     <div class="box"></div>
  23.     <div class="box1"><!-- <div class="box2"></div> --></div>
  24.   </body>
  • 结果：


  • 设置了box-sizing: border-box;属性元素的宽度就不会超过自己所设置的宽度大小；

  • 设置了box-sizing: content-box;属性元素的宽度就会超过自己所设置的宽度大小；

  • 当两个块级元素垂直排列时我们发现给第一个盒子设置的下边距30px和给第二个盒子设置的上边距50px并没有叠加起来，看下图就可以发现：

  • 所以当两个盒子在垂直边距上时，外边距会产生折叠

二、元素的定位：

  • 相对定位：以自己本身原来的位置为参照物进行偏移

    position:relative;

  • 实例：

    1. <style>
    2. .box1{width:400px;height:400px;border:1px solid #000;}
    3. .box2{width:150px;height:150px;background:red;position:relative;left:100px;}
    4. </style>
    5. <body>
    6. <div class="box1">
    7.    <div class="box2"></div>
    8. </div>
    9. </body>

  • 绝对定位：相对于最近的且不是static定位的父元素来定位

    position:absolute;

  • 实例：

    1. <style>
    2. div {
    3.       width: 500px;
    4.       height: 100px;
    5.     }
    6.     .div1 {
    7.       background: yellow;
    8.     }
    9.     .div2 {
    10.       background: rgb(252, 28, 28);
    11.     }
    12.     .div3 {
    13.       background: rgb(14, 228, 25);
    14.     }
    15.     .div4 {
    16.       background: rgb(243, 24, 152);
    17.       left: 100px;
    18.       top: 100px;
    19.     }
    20. </style>
    21. <body>
    22.       <div class="div1">第一个div</div>
    23.       <div class="div2">第二个div</div>
    24.       <div class="div3">第三个div</div>
    25.       <div class="div4">第四个div</div>
    26. </body>

  • 显示结果：

  • Fixed：固定定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。

  • position：fixed;

  • 实例：设置div2为固定定位

  1. .div2 {
  2.         background: rgb(252, 28, 28);
  3.         position: fixed;
  4.         left: 800px;
  5.         top: 0px;
  6.       }
  • 显示结果：

  • 元素的水平居中：设置元素margin-left:auto;margin-right:auto;

-实例：

  1. <style>
  2.       .div1 {
  3.         width: 700px;
  4.         height: 500px;
  5.         background: red;
  6.         margin: 0 auto;
  7.       }
  8.     </style>
  9.   </head>
  10.   <body>
  11.     <div class="div1"></div>
  12.   </body>
  • 显示结果：

  • 设置元素的左右外边距为auto,系统会自动调整左右间距相等，所以元素会居中显示

  • 垂直居中：必须设置定位为绝对定位，并且设置上下左右为0,充满整个元素，可以理解为在方框内找中心点，把四个角用2条线连接起来，交点就是中点。

  • 实例：

  1. <style>
  2.       .box {
  3.         width: 800px;
  4.         height: 800px;
  5.         border: 2px solid #000;
  6.         position: relative;
  7.       }
  8.       .div1 {
  9.         width: 200px;
  10.         height: 200px;
  11.         background: rgb(251, 255, 0);
  12.         position: absolute;
  13.         top: 0;
  14.         right: 0;
  15.         bottom: 0;
  16.         left: 0;
  17.         margin: auto;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="box">
  23.       <div class="div1"></div>
  24.     </div>
  25.   </body>
  • 显示结果：

  • js获取元素的大小位置：
  1. <style>
  2.       .box {
  3.         width: 200px;
  4.         height: 400px;
  5.         padding: 10px;
  6.         border: 2px solid #000;
  7.         background: lightskyblue;
  8.         background-clip: content-box;
  9.       }
  10.       .pos {
  11.         position: relative;
  12.         top: 30px;
  13.         left: 50px;
  14.       }
  15.       body {
  16.         margin: 0;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div class="box pos"></div>
  22.     <script>
  23.       const box = document.querySelector(".box");
  24.       /* 获取div元素 */
  25.       /* 内容大小与位置 */
  26.       /* 大小 = width / height +padding */
  27.       console.log(box.clientWidth);
  28.       /* 获取元素的宽,不加内边距和边框 */
  29.       console.log(box.clientHeight);
  30.       /* 获取元素的高 ，不加内边距和边框*/
  31.       //clientLeft/clientTop:表示的是padding到border外边缘的距离：可以理解为边框宽度
  32.       //用的很少，了解一下
  33.       console.log(box.clientLeft);
  34.       console.log(box.clientTop);
  35.       console.log(document.documentElement.clientWidth);
  36.       //获取视口的宽度
  37.       console.log(document.documentElement.clientHeight);
  38.       //获取视口的长度
  39.       console.log(box.offsetParent);
  40.       //当前元素的定位偏移量，与定位有关
  41.       //定位父级
  42.       //这个元素现在是一个真正的盒子，包括了内容，内边距，边框
  43.       //真实宽度加上边框border
  44.       console.log(box.offsetWidth);
  45.       //元素真实的宽度，加内边距和边框
  46.       console.log(box.offsetHeight);
  47.       //元素真实的高度，加内边距和边框
  48.       console.log(box.offsetLeft);
  49.       //元素的左边间距
  50.       console.log(box.offsetTop);
  51.       //元素的顶部间距
  52.       const html = document.documentElement;
  53.       //获取当前的html元素
  54.       //当前文件的滚动大小
  55.       //视口大小：可视区大小
  56.       //文档大小：当前html的大小
  57.       //通常视口大小 < 文档大小，所以要通过滚动条来看到去拿不html文档的内容
  58.       html.style.height = "1000px";
  59.       //当前文档的高度
  60.       console.log(html.scrollHeight);
  61.       //当前可视区的高度
  62.       console.log(html.clientHeight);
  63.       //获取滚动条
  64.       console.log(html.scrollTop);
  65.       document.addEventListener("scroll", function (ev) {
  66.         console.log(html.scrollTop);
  67.       });
  68.     </script>
  69.   </body>
  • 显示结果：

  • 实例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.         .box{
  9.             width:120px;
  10.             height:120px;
  11.             position:absolute;
  12.             top:50px;
  13.             left:10px;
  14.         }
  15.         .box img{
  16.             width:100%;
  17.         }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div class="box">
  22.       <img src="走路.gif"></img>
  24.     </div>
  25.     <button>快跑</button>
  26.      <button>站住</button>
  27.   </body>
  28.   <script>
  29.       //只要不断改变图片在定位父级中的偏移量就可以实现
  30.       const thief = document.querySelector(".box");
  31.       //获取父级元素
  32.       const btn1 = document.querySelector("button:first-of-type");
  33.       const btn2 = document.querySelector("button:last-of-type");
  34.       //添加事件
  35.       btn1.addEventListener("click",start,{ once:true });
  36.       btn2.addEventListener("click",stop);
  38.       //定时器
  39.       let timer = null;
  40.       function start(){
  41.           console.log(thief.offsetLeft);
  42.           timer = setInterval(function(){
  43.             thief.style.left = thief.offsetLeft + 10 + "px";
  44.             thief.style.top = thief.offsetTop + 10 + "px";
  45.           },50);
  47.       }
  49.       function stop(){//清除定时器
  50.           clearInterval(timer);
  51.       }
  52.   </script>
  53. </html>
  • 显示结果：

三、学习总结

1. 盒模型：

  1. content:内容在最中间
  2. padding:内边距
  3. border:边框
  4. margin:外边距
  5. box-sizing:content-box;只设定内容的宽度，高度
  6. box-sizing:border-box;设定包括内容，内边距，边框的总宽度，总高度
  7. 垂直的块元素的间距会互相折叠

2.元素的大小位置

  • 元素的真实的大小 = 内容(content) + 内边距(padding)x2 + 边框(border)x2

  • 元素的定位：

  1. position：relative; 相对定位：以自己本身原来的位置为参照物进行偏移
  2. position: absolute; 绝对定位：相对于最近的且不是static定位的父元素来定位
  3. position：fixed;固定定位:相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
  • 元素的水平居中和垂直居中：
  1. 水平居中：marin:0 auto;/marin-left:auto;margin-right:auto;
  2. 垂直居中: 设置父元素的定位为绝对定位，然后设置上下左右间距为0，top=0;right:0;bottom=0;left=0;再设置上下居中，margin:auto;/margin-top:auto;margin-bottom:auto;

3.js获取元素大小位置

  1. querySelector() 获取元素
  2. box.clientWidth 获取元素的宽，只是content的宽度，不加内边距和边框
  3. box.clientWidth 获取元素的高，只是content的高度，不加内边距和边框
  4. document.documentElement.clientWidth 获取视口的宽度
  5. document.documentElement.clientHeight 获取视口的高度
  6. box.offsetParent 返回当前最近的经过定位的父级元素
  7. box.offsetWidth 元素真实的宽度，加内边距和边框
  8. box.offsetHeight 元素真实的高度，加内边距和边框
  9. box.offsetLeft 元素的左边间距
  10. box.offsetTop 元素的顶边间距
  11. document.documentElement 获取html元素
  12. html.style.height html文档高度 html.scrollHeight
  13. html.clientHeight 当前可视区的高度
  14. html.scrollTop 获取滚动条距离顶部的高度
Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：写的很认真仔细，继续加油！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！