search

博客列表 >box-sizing属性和常用的元素居中方式

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

a.
a.原创
2020年12月20日 15:56:05663浏览

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>
上一条：css工作原理与基础概念(规则，选择器，声明块，属性和值，优先级“ICE”，盒模型，定位，布局，弹出层，iconfont)下一条：Emmet 插件的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多