微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > 盒模型常用属性及元素大小计算，定位元素

博主信息

博文 11

粉丝 0

访问量 10641

专题推荐

更多>

1.盒模型常用属性

属性	描述
width	宽度
height	高度
border	边框
margin	外边距
padding	内边距
box-sizing	自定义盒模型宽和高的规范， box-sizing: content-box;在自己设定的宽度和高度之外绘制元素的内边距和边框(默认)，box-sizing: border-box;在自己设定的宽度和高度之内绘制元素的内边距和边框。
backgroumd-clip	背景的延伸

示例代码


<!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: 200px;
      }
      .box.one {
        padding: 10px;
        border: 2px solid #000;
        background-color: lightgreen;
        background-clip: content-box;
        /* margin: top right bottom left; */
        /* margin: 0 0 20px 0; */
        margin-bottom: 20px;
      }
      .box.two {
        padding: 10px;
        border: 2px solid #000;
        background-color: lightcoral;
        background-clip: content-box;
        /* 当二个盒子在垂直方向上，外边距会产生折叠 */
        margin-top: 30px;
      }
      .box.parent {
        background-color: lightblue;
        /* 一旦一个元素被添加了position，且值非static,那么它就是定位元素 */
        position: relative;
        /* 相对定位是相对自己做了偏移，这个元素在文档流中的位置不释放 */
        /* left: 30px;
        top: 40px; */
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: violet;
        /* 绝对定位: 相对于它的定位父级进行定位 */
        position: absolute;
        /* 固定定位:　忽略你的定位父级，总是相对于<body>定位 */
        position: fixed;
        left: 50px;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <!-- 块级元素默认垂直排列 -->
    <div class="box one"></div>
    <div class="box two"></div>
    <hr />
    <div class="box parent">
      <div class="son"></div>
    </div>
  </body>
</html>

示例结果

2.盒模型元素大小计算,box-sizing的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户自定义元素大小的计算方式</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 20px;
            padding: 20px;
            border: 2px solid green;
            box-sizing: content-box
            background-clip: content-box;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 20px;
            padding: 20px;
            border: 2px solid green;
            background-clip: content-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>
</html>

运行

从结果可以看出
默认情况下
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

当两个块级元素垂直排列时外边距会产生折叠
设置了box-sizing: border-box;属性元素的宽度就不会超过自己所设置的宽度大小；
设置了box-sizing: content-box;属性元素的宽度就会超过自己所设置的宽度大小；

3.元素的定位

-示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位元素的对齐</title>
    <style>
      .container {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        /* 水平左右居中1 */
        /* margin-left: auto;
        margin-right: auto; */
        /* 水平左右居中2 */
        /* position: absolute;
        left: 0;
        right: 0;
        margin: auto; */
        /* 垂直上下居中 */
        /* position: absolute;
        top: 0;
        bottom: 0;
        margin: auto; */
        /* 完全居中 */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

结果如图

总结

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

4.元素的offset的位置与大小

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的offset位置与大小</title>
    <style>
        .box {
            width: 120px;
            height: 120px;
            position: absolute;
            top: 50px;
            left: 10px;
        }
        .box img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box"><img src="thief.png" alt="" /></div>
    <button>快跑</button>
    <button>站住</button>
</body>
<script>
    // 只要不断的改变小偷的在定位父级中的偏移量就可以实现
    const thief = document.querySelector(".box");
    const btn1 = document.querySelector("button:first-of-type");
    const btn2 = document.querySelector("button:last-of-type");
    // 添加事件
    btn1.addEventListener("click", start, { once: true });
    btn2.addEventListener("click", stop);
    // 定时器
    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);
    }
    function stop() {
        clearInterval(timer);
    }
</script>
</html>

示例结果

总结

js获取元素大小位置

querySelector() 获取元素
box.clientWidth 获取元素的宽，只是content的宽度，不加内边距和边框
box.clientWidth 获取元素的高，只是content的高度，不加内边距和边框
document.documentElement.clientWidth 获取视口的宽度
document.documentElement.clientHeight 获取视口的高度
box.offsetParent 返回当前最近的经过定位的父级元素
box.offsetWidth 元素真实的宽度，加内边距和边框
box.offsetHeight 元素真实的高度，加内边距和边框
box.offsetLeft 元素的左边间距
box.offsetTop 元素的顶边间距
document.documentElement 获取html元素
html.style.height html文档高度 html.scrollHeight
html.clientHeight 当前可视区的高度
html.scrollTop 获取滚动条距离顶部的高度