Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 演示box-sizing：IE盒子和常用的左右垂直居中
Blogger Information
Blog 26
fans 0
comment 0
visits 15699
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：IE盒子和常用的左右垂直居中
庄周梦蝶
Original
640 people have browsed it

box-sizing:IE盒子

box-sizing的两个属性：

  1. border-box，IE盒子，计算盒子宽高的时候不包含内边距和边框；
  2. content-box，w3c盒子，默认属性，计算盒子宽高的时候回包含内边距和边框

现在这个盒子是w3c盒子，所以现在盒子宽是20+10x2+1x2=42px，高是一样的

  1. <style>
  2.     div{
  3.     width:20px;
  4.     height:20px;
  5.     padding:10px;
  6.     border:1px #000 solid;
  7.     }
  8. </style>
  9. <body>
  10.     <div></div>
  11. </body>

现在这个盒子是ie盒子，所以现在盒子宽就是设置的宽20px，高20px

  1. <style>
  2.     div{
  3.     box-sizing: border-box;
  4.     width:20px;
  5.     height:20px;
  6.     padding:10px;
  7.     border:1px #000 solid;
  8.     }
  9. </style>
  10. <body>
  11.     <div></div>
  12. </body>

总结：ie盒子更好用，不用再考虑加上内边距后会撑大盒子导致页面布局乱

行内垂直水平居中

  1. <style>
  2.     div{
  3.     width：400px；
  4.     height: 400px;
  5.     border: 1px solid #000;
  6.     }
  7.     div>h2{
  8.     左右居中
  9.     text-align: center;
  10.     让行高等于父级块的高度就能垂直居中
  11.     line-height:400px;
  12.     }
  13. </style>
  14. <body>
  15.     <div>
  16.         <h2>我喜欢PHP中文网</h2>
  17.     </div>
  18. </body>

块级(行内块)元素垂直水平居中

  1. <style>
  2.   .box {
  3.     box-sizing: border-box;
  4.     width: 400px;
  5.     用内边距来撑开外面的盒子达到上下居中的效果，不能加高
  6.     padding: 100px 0;
  7.     border: 1px solid #000;
  8.   }
  9.   .box div {
  10.     width: 100px;
  11.     height: 100px;
  12.     用外边距俩撑开外面的盒子达到左右居中的效果，要让左右的距离智适应
  13.     margin: 0 auto;
  14.     background-color: aqua;
  15.   }
  16. </style>
  17. <body>
  18.   <div class="box"><div></div></div>
  19. </body>

用定位来实现块级元素的垂直水平居中

  1. <style>
  2.   .box {
  3.     box-sizing: border-box;
  4.     width: 400px;
  5.     height: 400px;
  6.     border: 1px solid #000;
  7.     position: relative;
  8.   }
  9.   .box div {
  10.     width: 100px;
  11.     height: 100px;
  12.     background-color: aqua;
  13.     position: absolute;
  14.     top: 0;
  15.     left: 0;
  16.     right: 0;
  17.     bottom: 0;
  18.     margin: auto;
  19.   }
  20. </style>
  21. <body>
  22.   <div class="box"><div></div></div>
  23. </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