06 盒（或框）的属性、位置

主要内容：盒的各种属性及位置定位、获取等

1、基本内容

• 盒子的概念和属性：宽、高、大小。

• 大小这块涉及到内容区、padding、border、margin等概念。相邻盒子的margin会重叠。
  (宽度width: content-width + padding-left/right + border-left/right - 注意除了内容区外，很多都需要两边都计算)
  box-sizing的两种状态。

        /* box-sizing: 重新计算盒大小; */
        /* content-box: 默认值，以内容区为准 */
        box-sizing: content-box; 
        box-sizing: border-box;   /*以边线区为大小，内容区的调整不会改变整体的大小*/

  border-box选项：
  为元素设定的宽度和高度决定了元素的边框盒。
  就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
  通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

• 定位。绝对定位和相对定位postion:relative；postion:absolute。

• 盒子的父子关系。
• 怎么显示出padding。background-clip: content-box;
• 初始清零有些时候很关键。

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

  2、垂直、水平居中

        position: absolute;
        /* 让当前元素绝对定位的上下文充满整个父级容器 */
        /* 左上角开始 */
        top: 0;
        left: 0;
        /* 右下角结束 */
        right: 0;
        bottom: 0;
        /* 水平垂直居中 */
        margin: auto;

  当然这块老师也介绍了flex之类的东东，但现在还没学到。

3、大小位置的获取

<script>
    const box = document.querySelector(".box");
    // 1. 内容区大小与位置
    // 大小 = width / height + padding
    console.log(box.clientWidth);
    console.log(box.clientHeight);
    // clientLeft/clientTop: 表示的padding到border外边缘的距离: 就是边框宽度
    // 用得极少， 忘了我吧
    console.log(box.clientLeft);
    console.log(box.clientTop);
    // 更多的时候用来获取可视区大小: 视口
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);
    // 2. 当前元素的定位偏移量,与定位有关
    // 定位父级
    console.log(box.offsetParent);
    // 这个元素现在是一个真正的盒子，包括了内容，padding, border
    // 真实宽度: 加上border
    console.log(box.offsetWidth);
    console.log(box.offsetHeight);
    console.log(box.offsetLeft);
    console.log(box.offsetTop);
    // 3. 当前文件的滚动大小
    // 视口大小： 可视区大小
    // 文档大小: 当前html的大小
    // 通过视口大小 <  文档大小， 所以，要通过滚动条才能看到全部html文档的内容
    // 获取html元素
    const html = document.documentElement;
    html.style.height = "600px";
    // 当前文档的高度
    console.log(html.scrollHeight);
    // 当前可视区的高度
    console.log(html.clientHeight);
    // 获取滚动条
    // 234 + 366 = 600
    console.log(html.scrollTop);
    document.addEventListener("scroll", function (ev) {
      console.log(ev.target.documentElement.scrollTop);
    });
  </script>

可以通过改变元素位置的方式来做一些动画。例如下面这个function通过增加图片的上下位置，实现图片向右下角移动的目的。

    // 定时器
    let timer = null;
    function start() {
      console.log(thief.offsetLeft);
      timer = setInterval(function () {
        // thief.offsetLeft: 只读， 且是一个整数
        // thief.style.left: 可读写，且是一个字符串
        thief.style.left = thief.offsetLeft + 10 + "px";
        thief.style.top = thief.offsetTop + 10 + "px";
      }, 100);
    }