Community Learn Tools Library Leisure
search
English
Home > List of blog posts > box-sizing属性和元素居中方式
Blogger Information
Blog 37
fans 0
comment 0
visits 34756
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属性和元素居中方式
手机用户1607314868
Original
1290 people have browsed it

box-sizing

box-sizing让用户自己决定计算盒子大小的方式(要不要padding,border计算在内)
box-sizing:border-box设置盒子的长度值，将盒子的padding和border计算在长度内，这种盒子模型最早是由微软的IE浏览器实现的，称之为IE盒子模型。而这中IE盒子与w3C的标准盒子不一样，又被称为怪异盒模型

  1. <style>
  2. *{
  3.     /*全局使用IE盒子模型  border-box是元素设置宽高就包含padding和border*/
  4.     box-sizing:border-box;
  5. }
  6. .box{
  7.     width:20px;
  8.     height:30px;
  9.     background-color:violet;
  10. }
  11.  .box{
  12.      padding:5px;
  13.      border:2px solid;
  14.      background-clip:content-box;
  15.  }
  16. </style>
  17. <body>
  18.     <div class="box">
  20.     </div>
  21. </body>

元素高度：内容超出了怎么办？

文档流：是元素默认布局方式
当元素里内容过多，显示不出来时，可以设置overflow属性。overflow:visible显示溢出的内容。hidden隐藏溢出的内容。

常用元素居中方式

水平居中

1.行内或行内块水平居中
设置父元素的text-align:center;属性

2.块元素的水平居中
使用margin来实现块的水平居中，挤压式的居中
设置块元素的margin:0 auto;

垂直居中

1.行内或行内块垂直居中
设置line-height和父元素的height值一样。
2.块元素的垂直居中
使用padding属性，父元素不要设置高度，应该由padding挤出来。padding:值 0;padding的值视情况而定

  1. <style>
  2. .box{
  3.  width:15em;
  4.  height:15em;
  5.  border:1px solid #000;
  6. }
  7.     /*行内或行内水平居中*/
  8. .box{
  9.  text-align:center;
  10. }
  11.   /* 2.块元素的水平居中 */
  12.  .box>div{
  13.      width: 5em;
  14.      height: 5em;
  15.      background-color: yellow;
  16. } 
  17.    /* 使用margin来实现块的水平居中,挤压式的居中 */
  18.   .box>div{
  19.      /* auto:这个值由浏览器根据上下文自动计算   */
  20.       margin-left: auto;
  21.       margin:0 auto;
  22. }
  23.      /*行内元素垂直居中*/
  24. .box a{
  25.     /*值跟父元素的height高一样大小*/
  26.     line-height:15em;
  27. }
  28.  /*块元素垂直居中*/
  29.  .box{
  30.      padding:5em 0;
  31.  }    
  32. </style>
  33. <body>
  34.     <div class="box">
  35.         <a>php.cn</a>
  36.         <div></div>
  37.     </div>
  38. </body>

水平且垂直的解决方案

1.行内元素的水平且垂直
text-align+line-height
2.padding实现水平和垂直居中
让padding的四个值相等。
3.margin来实现
父元素的position:relative;
子元素的position:absolute;
top:0;left:0;right:0;bottom:0;margin:auto;

  1.    <style>
  2.         /* 1.行内元素的水平且垂直 */
  3.         /* text-align + line-height */
  4.          .box{
  5.              width: 15em;
  6.              height: 15em;
  7.              border: 1px solid #000;
  8.          }
  9.          .box{
  10.              text-align: center;
  11.              line-height: 15em;
  12.          }
  13.          /* 2.padding 实现水平和垂直居中 */
  14.      .box{
  15.            padding:5em;
  16.          } 
  17.          .box>div{
  18.              width: 5em;
  19.              height: 5em;
  20.              background-color: yellow;
  21.          }
  22.      /* 3.margin来实现 */
  23.       .box{
  24.           position: relative;
  25.       }  
  26.       .box div{
  27.           position: absolute;
  28.           top:0;
  29.           left:0;
  30.           right:0;
  31.           bottom:0;
  32.           margin:auto;
  33.       }
  34.     </style>
  36. <body>
  37.     <div class="box">
  38.         <a href="">php.cn</a>
  39.         <div> </div>
  40.     </div>
  41. </body>
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