Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 盒模型的常用属性、元素大小重新计算、水平与垂直对齐
Blogger Information
Blog 12
fans 1
comment 0
visits 9598
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
646 people have browsed it

盒模型的常用属性

  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.       .box {
  9.         /* 宽、高：内容区 */
  10.         width: 200px;
  11.         height: 200px;
  12.       }
  13.       .box.one {
  14.         /* 内边距 */
  15.         padding: 10px;
  16.         /* 加1px的实线边框 */
  17.         border: 1px solid #000000;
  18.         /* 背景色 */
  19.         background-color: aquamarine;
  20.         /* 对背景进行裁切 默认是 border-box (边框级别),content-box（内容区） */
  21.         background-clip: content-box;
  22.         /* 顺序按照上、右、下、左 来设置 */
  23.         /* margin: top right bottom left; */
  24.         /* 外边距 */
  25.         margin: 0 0 20px 0;
  26.         /* 作用同上 */
  27.         margin-bottom: 20px;
  28.       }
  29.       .box.two {
  30.         /* 内边距 */
  31.         padding: 10px;
  32.         /* 加1px的实线边框 */
  33.         border: 1px solid #000000;
  34.         /* 背景色 */
  35.         background-color: lightgreen;
  36.         /* 对背景进行裁切 默认是 border-box (边框级别),content-box（内容区） */
  37.         background-clip: content-box;
  38.         /* 当两个盒子在垂直方向上，外边距会产生折叠 */
  39.         margin-top: 30px;
  40.       }
  41.       .box.parent {
  42.         background-color: lightpink;
  43.         /* 一旦一个元素被添加了position  且值非static 那么它就是定位元素 */
  44.         position: relative;
  45.         /* 从左边向右移动30px  */
  46.         /* 相对定位是相对自己做了偏移，这个元素在文档流中的位置不释放 */
  47.         left: 30px;
  48.         top: 40px;
  49.       }
  50.       .son {
  51.         width: 100px;
  52.         height: 100px;
  53.         background-color: lime;
  54.         /* 绝对定位 */
  55.         /* 如果没有定位父级元素，会向上一级找，直到找到，就是body元素 */
  56.         position: absolute;
  57.         /* 固定定位  会忽略定位父级 总是相对于body定位*/
  58.         position: fixed;
  59.         left: 50px;
  60.         top: 50px;
  61.       }
  62.     </style>
  63.   </head>
  64.   <body>
  65.     <!-- 块级元素默认垂直排列 -->
  66.     <div class="box one"></div>
  67.     <div class="box two"></div>
  68.     <hr />
  69.     <!-- 嵌套关系-->
  70.     <div class="box parent">
  71.       <div class="box son"></div>
  72.     </div>
  73.   </body>
  74. </html>

元素大小重新计算

  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.       /*  常用样式初始化  */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       .box {
  15.         width: 200px;
  16.         height: 180px;
  17.         background-color: blueviolet;
  18.         border: 3px solid violet;
  19.         background-clip: content-box;
  20.         padding: 10px;
  21.         /* box-sizing: 重新计算盒大小 content-box默认是以内容区为准*/
  22.         box-sizing: content-box;
  23.         /* border-box: 有效范围到边框 */
  24.         box-sizing: border-box;
  25.       }
  26.       .box2 {
  27.         width: 80px;
  28.         height: 120px;
  29.         background-color: red;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="box">
  35.       <div class="box2"></div>
  36.     </div>
  37.     <!-- width: content_width + padding_left/rigth + border_left/right    -->
  38.     <!--    宽：          200 +             20     +            6      =226-->
  39.   </body>
  40. </html>

水平与垂直对齐-margin:auto 块元素的垂直居中

  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>margin:auto 块元素的垂直居中</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: red;
  12.       }
  13.       .container .item {
  14.         width: 100px;
  15.         height: 100px;
  16.         background-color: violet;
  17.         /* 水平居中 */
  18.         /* 让浏览器自动计算左右外边距 */
  19.         /* margin-left: auto;
  20.         margin-right: auto; */
  21.         /* 垂直居中 */
  22.         /* 不能用margin-top:auto 和 margin-bottom:auto 来垂直居中  */
  24.         /* 通过绝对定位来实现垂直居中 */
  25.         position: absolute;
  26.         /* 让当前元素绝对定位的上下文充满整个父级容器 */
  27.         /* 左上角开始 */
  28.         top: 0;
  29.         left: 0;
  30.         /* 右下角结束  */
  31.         right: 0;
  32.         bottom: 0;
  33.         margin: auto;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <div class="container">
  39.       <div class="item"></div>
  40.     </div>
  41.   </body>
  42. </html>

元素大小与位置

  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.       .box {
  9.         width: 200px;
  10.         height: 180px;
  11.         padding: 10px;
  12.         border: 2px solid #000;
  13.         margin: 10px;
  14.         background-color: violet;
  15.         background-clip: content-box;
  16.       }
  17.       .pos {
  18.         position: relative;
  19.         top: 30px;
  20.         left: 50px;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="box pos"></div>
  26.   </body>
  27.   <script>
  28.     const box = document.querySelector(".box");
  29.     // 1、内容区大小与位置
  30.     // 宽高大小=宽/高 +podding
  31.     console.log(box.clientWidth);
  32.     // 高度
  33.     console.log(box.clientHeight);
  34.     // clientleft/clienttop :就是边框宽度   用得很少。
  35.     console.log(box.clientLeft);
  36.     console.log(box.clientTop);
  38.     // 获取可视区的大小：视口
  39.     console.log(document.documentElement.clientWidth);
  40.     console.log(document.documentElement.clientHeight);
  42.     // 2、当前元素的定位偏移量，与定位有关
  43.     // 定位父级
  44.     console.log(box.offsetParent);
  45.     // 这个元素现在是一个真正的盒子，包括了内容，podding,border
  46.     // 真实宽度要加上border
  47.     console.log(box.offsetWidth);
  48.     console.log(box.offsetHeight);
  49.     console.log(box.offsetLeft);
  50.     console.log(box.offsetTop);
  52.     //3、当前文件的滚动大小
  53.     // 视口大小：可视区大小
  54.     // 文档大小：当前html大小
  55.     // 通常视口大小 > 文档大小，所以要通过滚动条才能看到全部html文档内容
  56.     // 获取html元素
  57.     const html = document.documentElement;
  58.     // 给页面一个900PX的高
  59.     html.style.height = "1200px";
  60.     // 当前文档的高度
  61.     console.log(html.scrollHeight);
  62.     // 当前可视区的高度
  63.     console.log(html.clientHeight);
  64.     // 获取滚动条
  65.     console.log(html.scrollTop);
  67.     document.addEventListener("scroll", function (ev) {
  68.       console.log(ev.target.documentElement.scrollTop);
  69.     });
  70.   </script>
  71. </html>
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