Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型的基础/大小计算方式和位置/水平垂直居中及定时器初步认识
Blogger Information
Blog 17
fans 0
comment 0
visits 19029
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
盒模型的基础/大小计算方式和位置/水平垂直居中及定时器初步认识
嘬一口啊
Original
828 people have browsed it

盒模型基础

  • 盒子模型分为哪几部分

content(内容区):盒子的内容显示文本和图像的区域

padidng(内边距): 内容周边的区域(内边距也是透明的)

  1. padding:有四个值分别按照上右下左(顺时针的方向排序)
  2. padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px;
  3. 10px代表距离;
  4. 简写:padding:10px 10px 10px 10px;(若不想给那一边设置外边距值直接写0即可)
  5. 若是四边的外边距相同可直接写为padding:10px;(代表四周外边距均为10px)

border(边框): 围绕在内容和内边距外的边框;

border:1px solid red; 1px:边框的大小 solid:边框的样式solid带边实线 red:代表边框的颜色

margin(外边距): 边框外的区域(外边距是透明的)

  1. marign:有四个值分别按照上右下左(顺时针的方向排序)
  2. margin-top:10px; margin-right:10px; marign-bottom:10px; marign-left:10px;
  3. 简写:marign:10px 10px 10px 10px;(若不想给那一边设置外边距值直接写0即可)
  4. 若是四边的外边距相同可直接写为margin:10px;(代表四周外边距均为10px)

注:内边距影响到盒子大小, 而外边距影响到盒子的位置

  • 背景颜色和背景裁切

background-color(设置背景颜色)

  1. 例:background-color:green;

background-clip(背景裁切):content-box(裁切到内容区)border-box(裁切到边框)

  1. 例:background-clip:content-box; background-clip:border-box;
  • 盒模型的定位

注:一旦一个元素被添加了position，且值非static,那么它就是定位元素

  1. position:relative; 相对定位:相对于自己在文档流中的位置进行定位
  3. position:absolute; 绝对定位:相对于带有定位属性的父级元素进行定位,如果父级没有定位属性会一直往上找,一直找不到就以body为定位父级
  5. position:fixed; 固定定位:忽略你的父级定位元素,总是相对于body进行定位;

用户自定义元素大小的计算方式

box-sizing: 重新计算盒大小(content-box: 默认值，以内容区为准,页面初始化时设置值为border-box)

  1. box-sizing:content-box;以内容区为主
  2. 解释:原本给盒子设置的宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框

总结:盒子的宽高变成了内容区的宽高,盒子总宽高发生变化

box-sizing:border-box;以边框为主

  1. 解释:就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
  2. ,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

总结:盒子的宽高还是盒子的宽高,盒子总宽高不变

块元素元素的垂直居中(定在页面的正中间位置)

第一步给父级设置定位属性,给自己设置绝对定位属性

第二步设置margin:auto; top:0; right:0; bottom:0; left:0;

  1. 例:
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>margin:auto: 块元素元素的垂直居中</title>
  6.     <meta charset="utf-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <style type="text/css">
  9.     .box.parent {
  10.         width:500px;
  11.         height:500px;
  12.         background-color:#0066CC;
  13.         position:relative;
  14.     }
  16.     .son {
  17.         width:100px;
  18.         height:100px;
  19.         background-color:#FF99CC;
  21.         /*水平居中*/
  22.         /*margin-left:auto;
  23.         margin-right:auto;*/
  24.         /*简写水平居中*/
  25.         /*margin:auto;*/
  27.         /*水平垂直居中(通过定位实现)*/
  28.         /*定位在页面的正中间*/
  29.         /*给父类设置定位属性,然后给自己设置绝对定位*/
  31.         position: absolute;
  33.         top:0;
  35.         right:0;
  37.         bottom:0;
  39.         left:0;
  41.         margin:auto;
  43.     }
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="box parent">
  48.         <div class="son"></div>
  49.     </div>
  50. </body>
  51. </html>

元素的大小和位置

lientWidth:获取内容区的宽度

clientHeight:获取内容区的高度
注:内容区的大小 = width / height + padding

clientLeft/clientTop:示的padding到border外边缘的距离: 就是边框宽度(用的极少)

clientWidth:获取可视区的宽度

clientHeight:获取可视区的高度

offsetParent:获取定位父级元素(就是查看当前元素的定位父级是谁)

offsetWidth:获取盒子的最终宽度width + padding + width;

offsetHeight:获取盒子的最终高度height + padding + height;

offsetLeft:获取盒子的左边距(也是盒子的偏移位置)

offsetTop:获取盒子的上边距(也是盒子的偏移位置)

scrollTop:获取滚动条的位置

  1. 例:
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>元素的大小和位置</title>
  6.     <meta charset="utf-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <style type="text/css">
  9.     .box {
  10.         width:400px;
  11.         height:400px;
  12.         padding:10px;
  13.         margin:10px;
  14.         border:2px solid red;
  15.         background-color:#FFFFCC;
  16.         background-clip:content-box;
  17.     }
  18.     .pos {
  19.         position: relative;
  20.         top: 30px;
  21.         left: 50px;
  22.     }
  23.     body {
  24.         margin: 0;
  25.       }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="box pos"></div>
  30. </body>
  31. <script type="text/javascript">
  32. // 获取到盒子
  33. const box = document.querySelector(".box");
  34. // 内容区的大小和位置:内容区width / height + padding;
  35. console.log(box.clientWidth);
  36. console.log(box.clientHeight);
  38. // 表示的padding到border外边缘的距离 (边框宽度)
  39. console.log(box.clientLeft);
  40. console.log(box.clientTop);
  42. // 当前可视窗口的宽高
  43. console.log(document.documentElement.clientWidth);
  44. console.log(document.documentElement.clientHeight);
  46. // offsetParent获取当前盒子的定位父级
  47. console.log(box.offsetParent);
  49. // 获取盒子的最终宽度高度盒子宽高+padding+border
  50. // offsetWidth：获取的是盒子最终的宽offsetHeight:获取的是盒子最终的高
  51. console.log(box.offsetWidth);
  52. console.log(box.offsetHeight);
  54. // box.offsetLeft:获取盒子的左外边距 box.offsetTop:获取盒子地上外边距
  55. console.log(box.offsetLeft);
  56. console.log(box.offsetTop);
  58. // 获取当前html文档
  59. const html = document.documentElement;
  60. console.log(html);
  61. console.log(html.offsetHeight);
  62. html.style.height = "1000px";
  64. // 当前文档的高度
  65. console.log(html.scrollHeight);
  66. // 当前可视区的高度
  67.  console.log(html.clientHeight);
  69. // 获取滚动条
  70. // console.log(html.scrollTop);
  72. // 给滚动条添加一个监听事件
  73. document.addEventListener("scroll",function (ev){
  74.     // 获取当前html文档的滚动距离
  75.     console.log(ev.target.documentElement.scrollTop);
  76. });
  77. </script>
  78. </html>

定时器

setInterval:设置定时器 参数100是定时器每隔多长时间触发

  1. let DS = null;//定义一个变量来承接定时器
  3. DS = setInterval(function (){
  4.     // 通过改变盒子位置来实现盒子的移动
  5.     box.style.left = box.offsetLeft + 10 + "px";
  6. },100)

clearInterval:清除定时器

  1. 例:
  2. function stop(){
  3.     clearInterval(DS);
  4. }

总结

  1. 盒模型的基础
  2. 元素大小的重新计算方式
  3. 块元素的垂直水平居中
  4. 元素的大小和位置
  5. 定时器
Correcting teacher：WJWJ

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