search

博客列表 >盒模型的基础/大小计算方式和位置/水平垂直居中及定时器初步认识

盒模型的基础/大小计算方式和位置/水平垂直居中及定时器初步认识

嘬一口啊
嘬一口啊原创
2020年06月22日 12:24:09835浏览

盒模型基础

  • 盒子模型分为哪几部分

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. 定时器
上一条：背景控制的常用属性,精灵图原理及阿里图标的使用下一条：简单选择器,上下文选择器 结构伪类选择器 :target, :not, :before, :after, :focus
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多