简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > box-sizing属性和常用的元素居中方式
Blogger Information
Blog 23
fans 0
comment 3
visits 23398
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
box-sizing属性和常用的元素居中方式
a.
Original
657 people have browsed it

box-sizing属性

为什么会出现box-sizing这个属性？
当我们设置了box的width和height值之后，希望这个盒子大小是一个固定不变的值，但是padding（内边距）和border（边框）的大小会影响到盒子实际大小，所以程序员会使用width: calc(XXem - XXpx);height: calc(XXem - XXpx); 设置来让盒子设置的大小就是盒子的实际大小

  • 没有被padding,border影响前的盒子实际大小
  • 设置了padding和border后盒子的实际大小
    • 此时width=300+202+22=344px,height=200+202+22=244px

      使用calc(…)解决

      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. :root {
      9.   font-size: 10px;
      10. }
      11. .box {
      12.   width: 30em;
      13.   height: 20em;
      14.   background-color: pink;
      15.   background-clip: content-box;
      16.   border: black solid 2px;
      17.   padding: 2em;
      18. }
      19. .box {
      20.   /* 把被border和paddging影响多出的高宽减掉 */
      21.   width: calc(30em - 44px);
      22.   height: calc(20em - 44px);
      23. }
      24. </style>
      25. </head>
      26. <body>
      27. <div class="box"></div>
      28. </body>
      29. </html>

      可以看到盒子大小已经是实际设置的大小

box-sizing解决

后面w3c自己出的一个属性->IE盒子

  • box-sizing: content-box;
    • 标准盒子模型的计算方案，盒子的宽高不含宽高
  • box-sizing: border-box;
    • IE 盒子,盒子的大小包含 padding 和 border
  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.       :root {
  9.         font-size: 10px;
  10.       }
  11.       .box {
  12.         width: 30em;
  13.         height: 20em;
  14.         background-color: pink;
  15.         background-clip: content-box;
  16.         border: black solid 2px;
  17.         padding: 2em;
  18.       }
  19.       .box {
  20.         /* 把被border和paddging影响多出的高宽减掉 */
  21.         /* 使用新方法这个方法注释掉 */
  22.         /* width: calc(30em - 44px);
  23.         height: calc(20em - 44px); */
  25.         box-sizing: border-box;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="box"></div>
  31.   </body>
  32. </html>

常用的元素居中方式

1.行内元素或者行内块元素,使用 text-align:center

  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.       :root {
  9.         /* 设置参考字号 */
  10.         font-size: 10px;
  11.       }
  12.       * {
  13.         /* 设置ie盒子，margin,padding清零 */
  14.         box-sizing: border-box;
  15.         margin: 0;
  16.         padding: 0;
  17.       }
  18.       div {
  19.         width: 30em;
  20.         height: 20em;
  21.         background-color: beige;
  22.       }
  23.       div {
  24.         /* 使用text-align:center让行内元素及行内块元素居中 */
  25.         text-align: center;
  26.       }
  27.       img {
  28.         width: 15em;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div>
  34.       <!-- <a href="http://baidu.com">不好用的搜索引擎</a> -->
  35.       <a href="#"
  36.         ><img
  37.           src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" /></a
  38.       ><br />
  39.       <form action="https://www.baidu.com/s" method="GET">
  40.         <input type="text" name="wd" /><button>百度一下</button>
  41.       </form>
  42.     </div>
  43.   </body>
  44. </html>

2.块元素水平居中

  • 使用 margin 来水平居中:挤压式的水平居中

  • 浏览器根据上下文水平居中一般这些写margin: 0 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>块元素水平居中</title>
  7.     <style>
  8.       :root {
  9.         font-size: 10px;
  10.       }
  11.       * {
  12.         box-sizing: border-box;
  13.         margin: 0;
  14.         padding: 0;
  15.       }
  16.       div {
  17.         width: 30em;
  18.         height: 20em;
  19.         background-color: beige;
  20.       }
  21.       div > div {
  22.         width: 15em;
  23.         height: 10em;
  24.         background-color: violet;
  25.         /* margin-left: auto;
  26.         margin-right: auto; */
  27.         /* 浏览器根据上下文水平居中一般这些写`margin: 0 auto;` */
  28.         margin: 0 auto;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div>
  34.       <div></div>
  35.     </div>
  36.   </body>
  37. </html>

3.行内元素垂直居中

  • 设置height-line等于容器高度
  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.       :root {
  9.         font-size: 10px;
  10.       }
  11.       * {
  12.         box-sizing: border-box;
  13.         margin: 0;
  14.         padding: 0;
  15.       }
  16.       div {
  17.         width: 30em;
  18.         height: 20em;
  19.         background-color: beige;
  20.       }
  21.       div > div {
  22.         width: 15em;
  23.         height: 10em;
  24.         background-color: violet;
  25.         /* margin-left: auto;
  26.         margin-right: auto; */
  27.         /* 浏览器根据上下文水平居中一般这些写`margin: 0 auto;` */
  28.         margin: 0 auto;
  29.       }
  31.       a {
  32.         line-height: 10em;
  33.         border: 1px solid red;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <div>
  39.       <div>
  40.         <a href="#">php中文网</a>
  41.       </div>
  42.     </div>
  43.   </body>
  44. </html>

4.行内块元素和块元素垂直居中

  • padding挤出高度

  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.       div {
  9.         width: 30em;
  10.         /* 不给盒子高度让padding挤出来  */
  11.         background-color: beige;
  12.         padding: 5em 0;
  13.       }
  14.       div > div {
  15.         background-color: violet;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div>
  21.       <div>box</div>
  22.     </div>
  23.   </body>
  24. </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.       div {
  9.         width: 30em;
  10.         /* 不给盒子高度让padding挤出来  */
  11.         background-color: pink;
  12.         padding: 5em 0;
  13.       }
  14.       img {
  15.         width: 30em;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div>
  21.       <img
  22.         src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608456663872&di=932bc4d7d0c546647f0320b084d34847&imgtype=0&src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1113%2F041620103S8%2F200416103S8-4-1200.jpg"
  23.       />
  24.     </div>
  25.   </body>
  26. </html>

5.垂直水平居中

  • text-aling + line-height 实现

  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.       :root {
  9.         font-size: 10px;
  10.       }
  11.       .box {
  12.         width: 30em;
  13.         height: 20em;
  14.         background-color: violet;
  15.       }
  16.       p {
  17.         text-align: center;
  18.         line-height: 20em;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="box">
  24.       <p>我是一个标题</p>
  25.     </div>
  26.   </body>
  27. </html>
  • padding 实现

  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>padding实现居中</title>
  7.     <style>
  8.       div {
  9.         width: 20em;
  10.         padding: 5em;
  11.         border: solid red 1px;
  12.         box-sizing: border-box;
  13.       }
  14.       div > div {
  15.         width: 5em;
  16.         height: 5em;
  17.         background-color: violet;
  18.       }
  19.     </style>
  20.   </head>
  22.   <body>
  23.     <div>
  24.       <div></div>
  25.     </div>
  26.   </body>
  27. </html>
  • 3.margin实现

  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实现居中</title>
  7.     <style>
  8.       div {
  9.         width: 20em;
  10.         height: 20em;
  11.         border: solid red 1px;
  12.         box-sizing: border-box;
  13.       }
  14.       div > div {
  15.         width: 15em;
  16.         height: 9em;
  17.         background-color: violet;
  18.       }
  19.       div {
  20.         position: relative;
  21.       }
  22.       div > div {
  23.         position: absolute;
  24.         top: 0;
  25.         left: 0;
  26.         right: 0;
  27.         bottom: 0;
  28.         margin: auto;
  29.       }
  30.     </style>
  31.   </head>
  33.   <body>
  34.     <div>
  35.       <div></div>
  36.     </div>
  37.   </body>
  38. </html>
Correcting teacher：天蓬老师天蓬老师

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！