欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

盒模型的学习

程序员文章站 2022-03-16 08:24:06
...

1.盒模型常用属性

  • padding属性（边框内壁与内部元素之间的距离）
    padding：1px 2px 3px 4px; (顺序是上右下左)
    padding：1px 2px; (上下/左右)
    padding：1px 2px 3px; (上1px下2px左右3px)
    也可以具体分为：padding-top、padding-right、padding-bottom、padding-left

  • margin属性（边框外壁与其他元素之间的距离）
    margin：1px 2px 3px 4px; (顺序是上右下左)
    margin：1px 2px; (上下/左右)
    margin：1px 2px 3px; (上1px下2px左右3px)
    也可以具体分为：margin-top、margin-right、margin-bottom、margin-left
    注意：当两个盒子在垂直方向上，外边距会产生折叠

      

    1.       .box{
      2. 

    2.           width: 200px;
      3. 

    3.           height: 200px;
      4. 

    4.       }
      5. 

    5.       .box.one{
      6. 

    6.           padding: 10px;
      7. 

    7.           border: 2px solid #000000;
      8. 

    8.           background-color: lightgreen;
      9. 

    9.           background-clip: content-box;
      10. 

    10.           margin-bottom: 20px;
      11. 

    11.       }
      12. 

      13. 

    13.       .box.two{
      14. 

    14.           padding: 10px;
      15. 

    15.           border: 2px solid #000000;
      16. 

    16.           background-color: lightcoral;
      17. 

    17.           background-clip: content-box;
      18. 

    18.           /* 当两个盒子在垂直方向上，外边距会产生折叠 */
      19. 

    19.           margin-top: 30px;
      20. 

    20.       }
      21. 

      22. 

    22.       <div class="box one"></div>
      23. 

    23.       <div class="box two"></div>
      24.

    盒模型的学习

  • border属性（边框）
    上下左右边框具体分为：border-top、border-bottom、border-left、border-right
    边框颜色：border-color
    边框样式：border-style/(常用solid-实线、dashed-波折线)

      

    1.       .box.one{
      2. 

    2.           padding: 10px;
      3. 

    3.           border: 2px solid #000000;
      4. 

    4.           background-color: lightgreen;
      5. 

    5.           background-clip: content-box;
      6. 

    6.           margin-bottom: 20px;
      7. 

    7.           border-style: dashed;
      8. 

    8.       }
      9. 

      10. 

    10.       .box.two{
      11. 

    11.           padding: 10px;
      12. 

    12.           border: 2px solid #000000;
      13. 

    13.           background-color: lightcoral;
      14. 

    14.           background-clip: content-box;
      15. 

    15.           /* 当两个盒子在垂直方向上，外边距会产生折叠 */
      16. 

    16.           margin-top: 30px;
      17. 

    17.           border-style: solid;
      18. 

    18.       }
      19.

    盒模型的学习

2.元素的定位

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

  • position：relative;（相对定位是相对于自己做了偏移，这个元素在文档流中的位置不释放）

      

    1.       .box.parent{
      2. 

    2.           background-color: lightblue;
      3. 

    3.           /* 一旦一个元素被添加了position，且值非static，那么它就是定位元素 */
      4. 

    4.           position: relative;
      5. 

    5.           /* 相对定位是相对于自己做了偏移，这个元素在文档流中的位置不释放 */
      6. 

    6.           left: 30px;
      7. 

    7.           top: 30px;
      8. 

    8.       }
      9. 

      10. 

    10.       <div class="box parent">
      11. 

    11.           <div class="box son"></div>
      12. 

    12.       </div>
      13.

    盒模型的学习

  • position：absolute；（绝对定位:相对于它的父级进行定位，没有定位父级的情况下它的定位父级默认是<body>）

      

    1.       .son{
      2. 

    2.           width: 100px;
      3. 

    3.           height: 100px;
      4. 

    4.           background-color: violet;
      5. 

      6. 

    6.           /* 绝对定位*/
      7. 

    7.           position: absolute;
      8. 

    8.           left: 50px;
      9. 

    9.           top: 50px;
      10. 

    10.       }
      11.

    盒模型的学习

  • position：fixed； 固定定位：忽略你的定位父级，总是相对于<body>定位

3.元素大小计算

    

  1.         .box{
    2. 

  2.             width: 200px;
    3. 

  3.             height: 180px;
    4. 

  4.             border: 3px solid #000000;
    5. 

  5.             padding: 10px;
    6. 

  6.             background-color: violet;
    7. 

  7.             background-clip: content-box;
    8. 

  8.         }
    9. 

    10. 

  10.         <div class="box"></div>
    11.

盒模型的学习

  • 计算元素的宽高
    width：content-width + padding-left/right + border-left/right = 200+20+6=226
    height：content-height + padding-top/bottom + border-top/bottom = 180+20+6=206
    目前padding和border的值会影响到盒子的大小

  • 如何设置盒子大小随padding和border的变化而变化
    box-sizing：重新计算盒大小
    box-sizing：content-box; 默认值，以内容区为准
    box-sizing: border-box; 以边框为准

      

    1.       .box{
      2. 

    2.           width: 200px;
      3. 

    3.           height: 180px;
      4. 

    4.           border: 3px solid #000000;
      5. 

    5.           padding: 40px;
      6. 

    6.           background-color: violet;
      7. 

    7.           background-clip: content-box;
      8. 

      9. 

    9.           /* box-sizing：重新计算盒大小 */
      10. 

    10.           /* content-box：默认值，以内容区为准 */
      11. 

    11.           box-sizing: border-box;
      12. 

    12.       }
      13.

    盒模型的学习

  • 通过js获取元素的大小与位置

      

    1.       .box{
      2. 

    2.           width: 200px;
      3. 

    3.           height: 180px;
      4. 

    4.           padding: 10px;
      5. 

    5.           border: 2px solid #000000;
      6. 

    6.           margin: 10px;
      7. 

    7.           background-color: lightgreen;
      8. 

    8.           background-clip: content-box;
      9. 

    9.       }
      10. 

      11. 

    11.       .pos{
      12. 

    12.           position: relative;
      13. 

    13.           top: 30px;
      14. 

    14.           left: 50px;
      15. 

    15.       }
      16. 

    1. <div class="box pos"></div>
      

    1.   const box = document.querySelector(".box");
      2. 

    2.   // 1.内容区大小与位置
      3. 

    3.   // 大小 = width/height + padding
      4. 

    4.   console.log(box.clientWidth);
      5. 

    5.   console.log(box.clientHeight);
      6. 

    6.   // clientLeft/clientTop: 表示padding到border外边缘的距离：就是边框宽度
      7. 

    7.   console.log(box.clientLeft);
      8. 

    8.   console.log(box.clientTop);
      9. 

    9.   // 更多的时候用了获取可视区大小：视口
      10. 

    10.   console.log(document.documentElement.clientWidth);
      11. 

    11.   console.log(document.documentElement.clientHeight);
      12. 

      13. 

    13.   // 2.当前元素的定位偏移量，与定位有关
      14. 

    14.   // 定位父级
      15. 

    15.   console.log(box.offsetParent);
      16. 

    16.   // 这个元素现在是一个真正的盒子，包括了内容、padding、border
      17. 

    17.   // 真实宽高：加上border
      18. 

    18.   console.log(box.offsetWidth);
      19. 

    19.   console.log(box.offsetHeight);
      20.

    盒模型的学习

4.元素的水平与垂直对齐

    

  1.         .container{
    2. 

  2.             height: 300px;
    3. 

  3.             width: 300px;
    4. 

  4.             background-color: lightgreen;
    5. 

  5.         }
    6. 

    7. 

  7.         .container .item{
    8. 

  8.             width: 100px;
    9. 

  9.             height: 100px;
    10. 

  10.             background-color: violet;
    11. 

  11.         }
    12. 

    13. 

  13.         <div class="container">
    14. 

  14.             <div class="item"></div>
    15. 

  15.         </div>
    16.

盒模型的学习

  • 水平居中
    text-align: center; 这个对块级元素不起作用
    margin: auto; 让浏览器自动计算左右外边距

      

    1.       .container .item{
      2. 

    2.           width: 100px;
      3. 

    3.           height: 100px;
      4. 

    4.           background-color: violet;
      5. 

      6. 

    6.           /* 水平居中 */
      7. 

    7.           /* text-align: center; */
      8. 

    8.           /* margin-left: 100px;             */
      9. 

    9.           /* 让浏览器自动计算左右外边框 */
      10. 

    10.           margin: auto;
      11. 

    11.       }
      12.

    盒模型的学习

  • 垂直居中
    margin: auto; 不起左右，垂直居中实现不了
    使用flex布局

      

    1.       .container{
      2. 

    2.           height: 300px;
      3. 

    3.           width: 300px;
      4. 

    4.           background-color: lightgreen;
      5. 

    5.           display: flex;
      6. 

    6.       }
      7. 

      8. 

    8.       .container .item{
      9. 

    9.           width: 100px;
      10. 

    10.           height: 100px;
      11. 

    11.           background-color: violet;
      12. 

      13. 

    13.           /* 水平居中 */
      14. 

    14.           /* text-align: center; */
      15. 

    15.           /* margin-left: 100px;             */
      16. 

    16.           /* 让浏览器自动计算左右外边距 */
      17. 

    17.           margin: auto;
      18. 

      19. 

    19.           /* 垂直居中 */
      20. 

    20.           /* display: table-cell;
      21. 

    21.           vertical-align: middle; */
      22. 

    22.           align-items: center;
      23. 

    23.       }
      24.

    盒模型的学习
    通过绝对定位来实现垂直居中

      

    1.       .container{
      2. 

    2.           height: 300px;
      3. 

    3.           width: 300px;
      4. 

    4.           background-color: lightgreen;
      5. 

    5.           /* display: flex; */
      6. 

      7. 

    7.           /* 转为定位元素 */
      8. 

    8.           position: relative;
      9. 

    9.       }
      10. 

      11. 

    11.       .container .item{
      12. 

    12.           width: 100px;
      13. 

    13.           height: 100px;
      14. 

    14.           background-color: violet;
      15. 

      16. 

    16.           /* 水平居中 */
      17. 

    17.           /* text-align: center; */
      18. 

    18.           /* margin-left: 100px;             */
      19. 

    19.           /* 让浏览器自动计算左右外边距 */
      20. 

    20.           /* margin: auto; */
      21. 

    21.           margin-left: auto;
      22. 

    22.           margin-right: auto;
      23. 

      24. 

    24.           /* 垂直居中，默认margin-top/bottom:0 */
      25. 

    25.           /* align-items: center; */
      26. 

    26.           margin-top: auto;
      27. 

    27.           margin-bottom: auto;
      28. 

      29. 

    29.           /* 通过绝对定位来实现垂直居中 */
      30. 

    30.           position: absolute;
      31. 

    31.           /* 让当前元素绝对定位的上下文充满整个父级容器 */
      32. 

    32.           /* 左上角开始 */
      33. 

    33.           top: 0;
      34. 

    34.           left: 0;
      35. 

    35.           /* 右下角结束 */
      36. 

    36.           right: 0;
      37. 

    37.           bottom: 0;
      38. 

    38.       }
      39.

    盒模型的学习
    案例：实现登录表单在页面中水平垂直居中

      

    1.       body{
      2. 

    2.           background-color: #efefef;
      3. 

    3.       }
      4. 

    4.       form{
      5. 

    5.           width: 300px;
      6. 

    6.           height: 300px;
      7. 

    7.           background-color: lightgreen;
      8. 

      9. 

    9.           position: absolute;
      10. 

    10.           /* 让当前元素绝对定位的上下文充满整个父级容器 */
      11. 

    11.           /* 左上角开始 */
      12. 

    12.           top: 0;
      13. 

    13.           left: 0;
      14. 

    14.           /* 右下角结束 */
      15. 

    15.           right: 0;
      16. 

    16.           bottom: 0;
      17. 

      18. 

    18.           /* 水平垂直居中 */
      19. 

    19.           margin: auto;
      20. 

    20.       }
      21. 

      22. 

    22.   <form action="">
      23. 

    23.       <p>
      24. 

    24.           <label for="">Email:</label>
      25. 

    25.           <input type="email" name="" id="">
      26. 

    26.       </p>
      27. 

    27.       <p>
      28. 

    28.           <label for="">Password:</label>
      29. 

    29.           <input type="password" name="" id="">
      30. 

    30.       </p>
      31. 

    31.       <button>提交</button>
      32. 

    32.   </form>
      33.

    盒模型的学习

上一篇： 分页功能完善及用户信息的操作

下一篇： Grid布局学习

推荐阅读