PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > box-sizing属性及元素居中方式

box-sizing属性及元素居中方式

陈强
陈强 原创
2020年12月20日 11:20:58 872浏览

box-sizing属性

属性值 定义
content-box 盒模型以元素内容区为边界,不包含padding、border值
border-box 盒模型以元素边框区为边界,包含padding、border值
  • 代码演示
    1. <style>
    2. body div:first-of-type {
    3. width: 100px;
    4. height: 100px;
    5. background-color: lightcoral;
    6. border: 2px solid #000;
    7. box-sizing: content-box;
    8. padding: 5px;
    9. }
    10. body div:first-of-type + * {
    11. width: 100px;
    12. height: 100px;
    13. background-color: lightcoral;
    14. border: 2px solid #000;
    15. box-sizing: border-box;
    16. padding: 5px;
    17. }
    18. </style>
    19. </head>
    20. <body>
    21. <div></div>
    22. <div></div>
    23. </body>
  • 图片演示

    • box-sizing:content-box div元素原始宽、高为100px,增加border、padding后宽高变成114px

    • box-sizing:border-box div元素原始宽、高为100px,增加border、padding后宽高仍然保持100px

元素居中方式

  • 行内元素及行内块元素居中方式

    • 水平居中 text-algin:center;

      1. <style>
      2. body div:first-of-type {
      3. width: 300px;
      4. height: 300px;
      5. border: 1px solid;
      6. text-align: center;
      7. }
      8. body div:first-of-type + * {
      9. width: 300px;
      10. height: 300px;
      11. border: 1px solid;
      12. text-align: center;
      13. }
      14. </style>
      15. </head>
      16. <body>
      17. <div>行内元素水平居中</div>
      18. <div><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt="" /></div>
      19. </body>

      图片演示:

    • 垂直居中
      1.行内元素垂直居中 行高与高度一致

    1. <style>
    2. body div:first-of-type {
    3. width: 300px;
    4. height: 300px;
    5. line-height: 300px;
    6. border: 1px solid;
    7. text-align: center;
    8. }
    9. </style>
    10. </head>
    11. <body>
    12. <div>行内元素水平居中</div>
    13. </body>

    图片演示:

    2.行内块元素垂直居中

    1. <style>
    2. body div {
    3. width: 300px;
    4. height: 300px;
    5. border: 1px solid;
    6. position: relative;
    7. }
    8. div img {
    9. position: absolute;
    10. top: 0;
    11. bottom: 0;
    12. left: 0;
    13. right: 0;
    14. margin: auto;
    15. }
    16. </style>
    17. </head>
    18. <body>
    19. <div><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt="" /></div>
    20. </body>

    图片演示:

  • 块元素居中
    1.水平居中 margin:0 auto;
  1. <style>
  2. .cont {
  3. width: 200px;
  4. height: 200px;
  5. border: 1px solid;
  6. }
  7. .top {
  8. width: 50px;
  9. height: 50px;
  10. margin: 0 auto;
  11. background-color: red;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div class="cont">
  17. <div class="top"></div>
  18. </div>
  19. </body>

图片演示:

2.垂直居中
方法一:

  1. <style>
  2. .cont {
  3. width: 200px;
  4. height: 200px;
  5. border: 1px solid;
  6. display: table-cell;
  7. vertical-align: middle;
  8. }
  9. .top {
  10. width: 50px;
  11. height: 50px;
  12. margin: auto;
  13. background-color: red;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="cont">
  19. <div class="top"></div>
  20. </div>
  21. </body>

图片演示:

方法二:用行内块元素的浮动定位方式也可以达到相同效果

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议