演示box-sizing：IE盒子和常用的左右垂直居中

box-sizing:IE盒子

box-sizing的两个属性：

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

现在这个盒子是w3c盒子，所以现在盒子宽是20+10x2+1x2=42px，高是一样的
<style>
    div{
    width:20px;
    height:20px;
    padding:10px;
    border:1px #000 solid;
    }
</style>
<body>
    <div></div>
</body>
现在这个盒子是ie盒子，所以现在盒子宽就是设置的宽20px，高20px
<style>
    div{
    box-sizing: border-box;
    width:20px;
    height:20px;
    padding:10px;
    border:1px #000 solid;
    }
</style>
<body>
    <div></div>
</body>
总结：ie盒子更好用，不用再考虑加上内边距后会撑大盒子导致页面布局乱

行内垂直水平居中

<style>
    div{
    width：400px；
    height: 400px;
    border: 1px solid #000;
    }
    div>h2{
    左右居中
    text-align: center;
    让行高等于父级块的高度就能垂直居中
    line-height:400px;
    }
</style>
<body>
    <div>
        <h2>我喜欢PHP中文网</h2>
    </div>
</body>

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

<style>
  .box {
    box-sizing: border-box;
    width: 400px;
    用内边距来撑开外面的盒子达到上下居中的效果，不能加高
    padding: 100px 0;
    border: 1px solid #000;
  }
  .box div {
    width: 100px;
    height: 100px;
    用外边距俩撑开外面的盒子达到左右居中的效果，要让左右的距离智适应
    margin: 0 auto;
    background-color: aqua;
  }
</style>
<body>
  <div class="box"><div></div></div>
</body>

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

<style>
  .box {
    box-sizing: border-box;
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    position: relative;
  }
  .box div {
    width: 100px;
    height: 100px;
    background-color: aqua;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
</style>
<body>
  <div class="box"><div></div></div>
</body>

box-sizing:IE盒子

行内垂直水平居中

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

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

相关文章