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

box-sizing属性和常用元素的居中方式

程序员文章站 2022-04-28 22:34:39
...

1. box-sizing属性;

属性值 说明
box-sizing: content-box w3c标准盒子模型,width/height 不含padding/border
box-sizing: border-box 盒模型以元素边框区为边界，包含padding、border值.称之为IE盒子模型

1.content-box 示例如下

    

  1. <head>
    2. 

  2. <meta charset="UTF-8">
    3. 

  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4. 

  4. <title>Document</title>
    5. 

  5. <style>
    6. 

  6.     :root {
    7. 

  7.         font-size: 10px;
    8. 

  8.     }
    9. 

  9.     .box {
    10. 

  10.         width: 10em;
    11. 

  11.         height: 10em;
    12. 

  12.         background-color: bisque;
    13. 

  13.         border: 3px solid navajowhite;
    14. 

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

  15.         padding: .5em;
    16. 

  16.         box-sizing: content-box;
    17. 

  17.     }
    18. 

  18. </style>
    19. 

  19. </head>
    20. 

  20. <body>
    21. 

  21. <div class="box"></div>
    22. 

  22. </body>
    23.

box-sizing属性和常用元素的居中方式

1.border-box 示例如下

    

  1. <head>
    2. 

  2. <meta charset="UTF-8">
    3. 

  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4. 

  4. <title>border-box</title>
    5. 

  5. <style>
    6. 

  6.     :root {
    7. 

  7.         font-size: 10px;
    8. 

  8.     }
    9. 

  9.     .box {
    10. 

  10.         width: 10em;
    11. 

  11.         height: 10em;
    12. 

  12.         background-color: bisque;
    13. 

  13.         border: 3px solid navajowhite;
    14. 

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

  15.         padding: .5em;
    16. 

  16.         box-sizing: border-box;
    17. 

  17.     }
    18. 

  18. </style>
    19. 

  19. </head>
    20. 

  20. <body>
    21. 

  21.     <div class="box"></div>
    22. 

  22. </body>
    23.

box-sizing属性和常用元素的居中方式

2. 常用的元素居中方式

行内元素水平垂直居中 text-algin:center; 和 line-height: ；

    

  1. <head>
    2. 

  2. <meta charset="UTF-8">
    3. 

  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4. 

  4. <title>行内元素水平垂直居中</title>
    5. 

  5. <style>
    6. 

  6.     :root {
    7. 

  7.         font-size: 10px;
    8. 

  8.     }
    9. 

  9.     .box {
    10. 

  10.         width: 20em;
    11. 

  11.         height: 20em;
    12. 

  12.         background-color: bisque;
    13. 

  13.         border: 3px solid navajowhite;
    14. 

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

  15.         padding: .5em;
    16. 

  16.         box-sizing: content-box;
    17. 

  17.     }
    18. 

  18.     .box>div{
    19. 

  19.         text-align: center;
    20. 

  20.         line-height: 20em;
    21. 

  21.         }
    22. 

  22. </style>
    23. 

  23. </head>
    24. 

  24. <body>
    25. 

  25. <div class="box"><div>行内元素水平垂直居中</div></div>
    26. 

  26. </body>
    27.

box-sizing属性和常用元素的居中方式

块元素水平垂直居中 margin position

    

  1. <head>
    2. 

  2. <meta charset="UTF-8">
    3. 

  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4. 

  4. <title>块元素水平垂直居中</title>
    5. 

  5. <style>
    6. 

  6.     :root {
    7. 

  7.         font-size: 10px;
    8. 

  8.     }
    9. 

  9.     .box {
    10. 

  10.         width: 20em;
    11. 

  11.         height: 20em;
    12. 

  12.         background-color: bisque;
    13. 

  13.         border: 3px solid navajowhite;
    14. 

  14.         position: relative;
    15. 

  15.     }
    16. 

  16.     .box>div{
    17. 

  17.         width: 10em;
    18. 

  18.         height: 10em;
    19. 

  19.         background-color: olive;
    20. 

  20.         position: absolute;
    21. 

  21.         top: 0;
    22. 

  22.         left: 0;
    23. 

  23.         right: 0;
    24. 

  24.         bottom: 0;
    25. 

  25.         margin: auto;
    26. 

  26.         }
    27. 

  27. </style>
    28. 

  28. </head>
    29. 

  29. <body>
    30. 

  30. <div class="box"><div>块元素水平垂直居中</div></div>
    31. 

  31. </body>
    32.

box-sizing属性和常用元素的居中方式

上一篇： Ement语法，元素属性及布局标签

下一篇： Emmet常用语法、元素属性、布局标签

推荐阅读