search

博客列表 >html盒子模型属性、定位、计算大小、获取宽高及案例

html盒子模型属性、定位、计算大小、获取宽高及案例

lilove的博客
lilove的博客原创
2020年06月19日 02:18:453413浏览

一、html盒模型具有3个重要属性：

  • margin ：包含 margin-top,margin-left,margin-right,margin-bottom ；

  • border ：可以定义边框宽度、边框线样式、颜色、形状等；

  • padding ：包含 padding-top,padding-left,padding-right,padding-bottom ;

在html代码中是这样定义的：

  1. <style>
  2.     div {
  3.       width: 100px;
  4.       height: 100px;
  5.       /* 设置4周外边距为20px, margin: 20px 20px 20px 20px;的简写*/
  6.       margin: 20px;
  7.       /* 设置边框为1px，实线，黑色 */
  8.       border: 2px solid black;
  9.       /* 设置4周内边距为10px, padding: 10px 10px 10px 10px;的简写*/
  10.       padding: 10px;
  11.       background-color: lightblue;
  12.     }
  13.   </style>
  14.   <body>
  15.     <div>
  16.       盒子
  17.     </div>
  18.   </body>

运行效果示意：

二、盒模型大小计算方式

我们来看一个盒子模型示意：

其中：

width = 100px

margin = 20px

border = 2px

padding = 10px

  • 盒子内容的宽度 = width + (border + padding) * 2 = 124px；
  • 盒子内容的高度 = height + (border + padding) * 2 = 124px；

如果增加padding或者border 的值，那么盒子大小会随之改变；
这样会影响页面布局，那么不想让盒子大小随属性变化而变化则需要给盒子样式增加一个属性：

box-sizing: border-box; 重新计算盒子大小，以边框为准，布局中会经常用到这个属性。

  • 常用的html初始化样式：

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

三、块元素垂直居中

我们可以利用定位和视口实现子元素在父元素中的垂直居中

例如：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚开发日志：块元素垂直居中</title>
  7.   </head>
  8.   <style>
  9.     .box1 {
  10.       width: 200px;
  11.       height: 200px;
  12.       background-color: lightblue;
  13.       /* 水平居中 */
  14.       margin: auto;
  15.       /* 设置父元素为定位参照 */
  16.       position: relative;
  17.     }
  18.     .box2 {
  19.       width: 100px;
  20.       height: 100px;
  21.       background-color: red;
  22.       /* 左右居中 */
  23.       margin: auto;
  24.       /* 参照父元素调整位置 */
  25.       position: absolute;
  26.       /* 设置视口：从父元素的左上顶点到右下顶点 */
  27.       top: 0;
  28.       left: 0;
  29.       right: 0;
  30.       bottom: 0;
  31.     }
  32.   </style>
  33.   <body>
  34.     <div class="box1">
  35.       box1
  36.       <div class="box2">box2</div>
  37.     </div>
  38.   </body>
  39. </html>

运行效果：

  • 还可以使用flex布局实现，后续课程再详细解析flex布局。

四、利用javascript获取元素大小：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .box {
  10.       width: 200px;
  11.       height: 200px;
  12.       background-color: lightcoral;
  13.       padding: 10px;
  14.       margin: 20px;
  15.       border: 2px solid black;
  16.       background-clip: content-box;
  17.     }
  18.   </style>
  19.   <body>
  20.     <div id="box" class="box"></div>
  21.     <div id="box" class="box"></div>
  22.     <div id="box" class="box"></div>
  23.     <div id="box" class="box"></div>
  24.     <div id="box" class="box"></div>
  25.     <div id="box" class="box"></div>
  26.     <div id="box" class="box"></div>
  27.     <div id="box" class="box"></div>
  28.     <div id="box" class="box"></div>
  29.     <div id="box" class="box"></div>
  30.   </body>
  31.   <script>
  32.     const box = document.querySelector("#box");
  33.     // clientWidth = width + 左右padding
  34.     console.log(box.clientWidth);
  35.     // clientHeight = height + 上下padding
  36.     console.log(box.clientHeight);
  37.     // 当前视口宽度
  38.     console.log(document.documentElement.clientWidth);
  39.     // 当前视口高度
  40.     console.log(document.documentElement.clientHeight);
  41.     // offsetWidth = width + 左右padding + 左右boder
  42.     console.log(box.offsetWidth);
  43.     // offsetHeight = height + 上下padding + 上下boder
  44.     console.log(box.offsetHeight);
  45.     // 获取定位父级
  46.     console.log(box.offsetParent);
  47.     // 距离定位父级顶部距离
  48.     console.log(box.offsetTop);
  49.     // scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）
  50.     console.log(box.scrollWidth);
  51.     // scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
  52.     console.log(box.scrollHeight);
  53.     // scrollTop：内容层顶部 到 可视区域顶部的距离
  54.     console.log(box.scrollTop);
  55.   </script>
  56. </html>

运行结果

五、使用盒子模型及获取宽高方式实现动画

代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚的日志：小动画</title>
  7.   </head>
  8.   <style>
  9.     button {
  10.       width: 50px;
  11.       height: 30px;
  12.     }
  13.     .box {
  14.       width: 200px;
  15.       height: 300px;
  16.       position: absolute;
  17.       top: 50px;
  18.       left: 20px;
  19.     }
  20.     .box img {
  21.       width: 100%;
  22.     }
  23.   </style>
  24.   <body>
  25.     <div class="box"><img src="img.png" alt="刀剑神域" /></div>
  26.     <button>go</button>
  27.     <button>stop</button>
  28.   </body>
  29.   <script>
  30.     const img = document.querySelector(".box");
  31.     const imggo = document.querySelector("button:first-of-type");
  32.     const imgstop = document.querySelector("button:last-of-type");
  34.     // 监听事件
  35.     imggo.addEventListener("click", go);
  36.     imgstop.addEventListener("click", stop);
  38.     // 动画开始及停止方法
  39.     let timer = null;
  40.     function go() {
  41.       console.log(img.offsetLeft);
  42.       timer = setInterval(function () {
  43.         img.style.left = img.offsetLeft + 10 + "px";
  44.         img.style.top = img.offsetTop + 10 + "px";
  45.       }, 200);
  46.     }
  47.     function stop() {
  48.       clearInterval(timer);
  49.     }
  50.   </script>
  51. </html>

运行效果

总结

  1. 块级元素3个重要属性意义；
  2. 块级元素使用定位水平垂直居中的方法，特别是垂直居中使用的视口定位方式；
  3. 盒子模型大小计算模式；
  4. 获取html视口大小及html大小的方法及应用；
上一条：盒模型的大小定位的计算理解下一条：熟悉盒模型常用属性、 理解 box-sizing 的用法、理解定位元素的水平与垂直对齐技术
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多