微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 盒模型的大小、定位及其计算方法

博主信息

博文 10

粉丝 0

访问量 12935

专题推荐

更多>

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

盒模型的大小与定位

盒模型是一个具有上（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>