Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型常用属性及元素大小计算，定位元素
Blogger Information
Blog 11
fans 0
comment 0
visits 7952
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
盒模型常用属性及元素大小计算，定位元素
new
Original
595 people have browsed it

1.盒模型常用属性

属性 描述
width 宽度
height 高度
border 边框
margin 外边距
padding 内边距
box-sizing 自定义盒模型宽和高的规范 ， box-sizing: content-box;在自己设定的宽度和高度之外绘制元素的内边距和边框(默认)，box-sizing: border-box;在自己设定的宽度和高度之内绘制元素的内边距和边框。
backgroumd-clip 背景的延伸
  • 示例代码
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>盒/框模型基础</title>
  8.     <style>
  9.       .box {
  10.         /* 宽，高: 内容区 */
  11.         width: 200px;
  12.         height: 200px;
  13.       }
  14.       .box.one {
  15.         padding: 10px;
  16.         border: 2px solid #000;
  17.         background-color: lightgreen;
  18.         background-clip: content-box;
  20.         /* margin: top right bottom left; */
  21.         /* margin: 0 0 20px 0; */
  22.         margin-bottom: 20px;
  23.       }
  24.       .box.two {
  25.         padding: 10px;
  26.         border: 2px solid #000;
  27.         background-color: lightcoral;
  28.         background-clip: content-box;
  29.         /* 当二个盒子在垂直方向上，外边距会产生折叠 */
  30.         margin-top: 30px;
  31.       }
  32.       .box.parent {
  33.         background-color: lightblue;
  34.         /* 一旦一个元素被添加了position，且值非static,那么它就是定位元素 */
  35.         position: relative;
  36.         /* 相对定位是相对自己做了偏移，这个元素在文档流中的位置不释放 */
  37.         /* left: 30px;
  38.         top: 40px; */
  39.       }
  40.       .son {
  41.         width: 100px;
  42.         height: 100px;
  43.         background-color: violet;
  45.         /* 绝对定位: 相对于它的定位父级进行定位 */
  46.         position: absolute;
  47.         /* 固定定位:　忽略你的定位父级，总是相对于<body>定位 */
  48.         position: fixed;
  49.         left: 50px;
  50.         top: 50px;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <!-- 块级元素默认垂直排列 -->
  56.     <div class="box one"></div>
  57.     <div class="box two"></div>
  58.     <hr />
  59.     <div class="box parent">
  60.       <div class="son"></div>
  61.     </div>
  62.   </body>
  63. </html>
  • 示例结果

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>用户自定义元素大小的计算方式</title>
  8.     <style>
  9.         .box1 {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: red;
  13.             margin: 20px;
  14.             padding: 20px;
  15.             border: 2px solid green;
  16.             box-sizing: content-box
  17.             background-clip: content-box;
  18.         }
  20.         .box2 {
  21.             width: 200px;
  22.             height: 200px;
  23.             background-color: blue;
  24.             margin: 20px;
  25.             padding: 20px;
  26.             border: 2px solid green;
  27.             background-clip: content-box;
  28.             box-sizing: border-box;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div class="box1">1</div>
  36.     <div class="box2">2</div>
  37. </body>
  39. </html>

运行

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

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

3.元素的定位

-示例代码

  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.       .container {
  9.         width: 200px;
  10.         height: 200px;
  11.         border: 1px solid red;
  12.         position: relative;
  13.       }
  14.       .item {
  15.         width: 100px;
  16.         height: 100px;
  17.         background-color: greenyellow;
  18.         /* 水平左右居中1 */
  19.         /* margin-left: auto;
  20.         margin-right: auto; */
  21.         /* 水平左右居中2 */
  22.         /* position: absolute;
  23.         left: 0;
  24.         right: 0;
  25.         margin: auto; */
  26.         /* 垂直上下居中 */
  27.         /* position: absolute;
  28.         top: 0;
  29.         bottom: 0;
  30.         margin: auto; */
  31.         /* 完全居中 */
  32.         position: absolute;
  33.         top: 0;
  34.         left: 0;
  35.         right: 0;
  36.         bottom: 0;
  37.         margin: auto;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="container">
  43.       <div class="item"></div>
  44.     </div>
  45.   </body>
  46. </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的位置与大小

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>元素的offset位置与大小</title>
  8.     <style>
  9.         .box {
  10.             width: 120px;
  11.             height: 120px;
  12.             position: absolute;
  13.             top: 50px;
  14.             left: 10px;
  15.         }
  17.         .box img {
  18.             width: 100%;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <div class="box"><img src="thief.png" alt="" /></div>
  25.     <button>快跑</button>
  26.     <button>站住</button>
  27. </body>
  29. <script>
  30.     // 只要不断的改变小偷的在定位父级中的偏移量就可以实现
  31.     const thief = document.querySelector(".box");
  32.     const btn1 = document.querySelector("button:first-of-type");
  33.     const btn2 = document.querySelector("button:last-of-type");
  35.     // 添加事件
  36.     btn1.addEventListener("click", start, { once: true });
  37.     btn2.addEventListener("click", stop);
  39.     // 定时器
  40.     let timer = null;
  41.     function start() {
  42.         console.log(thief.offsetLeft);
  43.         timer = setInterval(function () {
  44.             // thief.offsetLeft: 只读， 且是一个整数
  45.             // thief.style.left: 可读写，且是一个字符串
  46.             thief.style.left = thief.offsetLeft + 10 + "px";
  47.             thief.style.top = thief.offsetTop + 10 + "px";
  48.         }, 100);
  49.     }
  51.     function stop() {
  52.         clearInterval(timer);
  53.     }
  54. </script>
  56. </html>
  • 示例结果

总结

  • 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：GuanhuiGuanhui

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