微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 盒模型的基础/大小计算方式和位置/水平垂直居中及定时器初步认识
博主信息
博文 17
粉丝 0
评论 0
访问量 25466
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
盒模型的基础/大小计算方式和位置/水平垂直居中及定时器初步认识
嘬一口啊
原创
1111人浏览过

盒模型基础

  • 盒子模型分为哪几部分

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. 定时器
批改老师：WJWJ

批改状态：合格

老师批语：总得来说写的很不错，继续加油！
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录