盒模型的大小、定位及其计算方法

盒模型的大小与定位

盒模型是一个具有上（top)、右(right)、下(bottom)、右(left)、高（high)、宽(weitgh)及内边距(padding)、边框(border)、外边距(margin)属性的块元素，可作为容器容纳其它元素。如：DIV

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型演示</title>
    <style>
        /* 给盒子设置宽、高 、背景色*/
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 一个空盒子 -->
   <div></div> 
</body>
</html>

运行效果：盒模型

用于盒模型定位的样式属性

属性名	释义	属性值
`top`	上定位	距离值，如：`20px`。仅当position不为static时生效
`right`	右定位	距离值，如：`20px`。仅当position不为static时生效
`bottom`	下定位	距离值，如：`20px`。仅当position不为static时生效
`left`	左定位	距离值，如：`20px`。仅当position不为static时生效
`padding`	内边距	距离值，如：`10px 20px 10px 20px`。以上右下左方向填值
`borber`	边框	线宽、线样式、颜色，如：`2px solid red`。
`margin`	外边距	距离值，如：`10px 20px 10px 20px`。注意：margin相对的是带定位属性的父元素，不一定是上级父元素，注意父元素的position设定。如多个同级元素或相对一个定位父元素时，`margin`会出现层叠，以数值大的为准。
`background-clip`	盒尺寸	1、默认值`border-box`，以box为参照；2、`content-box`以内容区为参照

如想单独设置上内边柜，可以使用：padding-top:20px。还有padding-right、padding-bottom、padding-left。border及margin同理。

居中定位方法演示

先写一个body:

      <!-- 父盒子 -->
    <div class="container">
        <!-- 子盒子 -->
      <div class="item"></div>
    </div>

再设置样式：

    <style>
       /* 改变父元素为定位元素 */
      .container {
        width: 300px;
        height: 300px;
        background-color: lightgreen;
        /* 设置相对定位，父元素必须 */
        position: relative;
      }
      /* 设置子元素居中 */
      .container .item {
        width: 100px;
        height: 100px;
        background-color: violet;
        /* 通过绝对定位来实现垂直居中 */
        position: absolute;
        /* 让当前元素绝对定位的上下文充满整个父级容器 */
        /* 左上角开始 */
        top: 0;
        left: 0;
        /* 右下角结束 */
        right: 0;
        bottom: 0;
        /* 水平垂直居中 */
        margin: auto;
      }
    </style>

显示效果：
盒子居中

用JS获取盒模型大小、定位的计算

获取盒子大小的方法

clientWidth 获取宽度(不含滚动条的宽度)
clientHeigth 获取高度（不含滚动条）
clientLeft 获取左坐标
clientTop 获取顶坐标
offsetWidth 获取宽度(含滚动条的宽度)
offsetHeigth 获取高度(含滚动条)
scrollWidth 获取滚动条宽度
scrollHeigth获取滚动条高度
scrollTop获取可视顶部到html顶部的距离，即当前可以上向滚动的距离
盒模型定位
style.left 用来改变当前元素的左坐标
style.top 用来改变当前元素的顶坐标

演示代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素大小与位置</title>
    <style>
      .box {
        width: 200px;
        height: 180px;
        padding: 10px;
        border: 2px solid #000;
        margin: 10px;
        background-color: lightgreen;
        background-clip: content-box;
      }
      .pos {
        position: relative;
        top: 30px;
        left: 50px;
      }
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="box pos"></div>
  </body>
  <script>
  //获取box元素
    const box = document.querySelector(".box");
    // 1. 内容区大小与位置
    // 大小 = width / height + padding
    console.log('clientWidth:'+box.clientWidth);
    console.log('clientHeight:'+box.clientHeight);
    // 更多的时候用来获取可视区大小: 视口
    console.log('documentElement.clientWidth:'+document.documentElement.clientWidth);
    console.log('documentElement.clientHeight:'+document.documentElement.clientHeight);
    // 2. 当前元素的定位偏移量,与定位有关
    // 定位父级
    console.log('offsetParent:'+box.offsetParent);
    // 这个元素现在是一个真正的盒子，包括了内容，padding, border
    // 真实宽度: 加上border
    console.log('offsetWidth:'+box.offsetWidth);
    console.log('offsetHeight:'+box.offsetHeight);
    console.log('offsetLeft:'+box.offsetLeft);
    console.log('offsetTop:'+box.offsetTop);
    // 3. 当前文件的滚动大小
    // 视口大小： 可视区大小
    // 文档大小: 当前html的大小
    // 通过视口大小 <  文档大小， 所以，要通过滚动条才能看到全部html文档的内容
    // 获取html元素
    const html = document.documentElement;
    html.style.height = "600px";
    // 当前文档的高度
    console.log('scrollHeight:'+html.scrollHeight);
    // 当前可视区的高度
    console.log('clientHeight:'+html.clientHeight);
    // 获取滚动条
    // 234 + 366 = 600
    console.log('scrollTop:'+html.scrollTop);
    // 滚动时注意观察控制台显示的滚动数值
    document.addEventListener("scroll", function (ev) {
      console.log('scrollTop:'+ev.target.documentElement.scrollTop);
    });
  </script>
</html>

控制台数据如下：
盒子定位

盒模型的大小、定位及其计算方法

盒模型的大小、定位及其计算方法

盒模型的大小与定位

用于盒模型定位的样式属性

居中定位方法演示

用JS获取盒模型大小、定位的计算

获取盒子大小的方法

盒模型定位

相关文章