box-sizing和常用的居中方式

box-sizing和常用的居中方式

box-sizing是为了解决padding和border改变盒子本身大小而出现的属性，它有两个值
1.content-box 与之前的标准盒子一样；
box-sizing:content-box;
2.border-box 俗称IE盒子，加入padding和border不会影响本身盒子的大小。
box-sizing:border-box;
常用的居中方式有以下几种：
1.行内元素垂直和水平居中
text-align:center;
line-height:20em（行高）;
2.块元素水平和垂直居中
margin:0 auto;
padding-top:5em(父级行高-自己行高/2)
具体代码如下所示：

 :root {
        font-size: 10px;
        margin: 0;
        padding: 0;
      }
      .box {
        box-sizing: border-box;
        width: 20em;
        height: 20em;
        border: solid 1px;
        background-color: chocolate;
        color: white;
        text-align: center;
        line-height: 20em;
        /* 利用padding和text-align实现水平和垂直居中 */
        /* padding-top: 10em; */
      }
      .box1 {
        /* box-sizing: border-box; */
        width: 20em;
        height: 20em;
        border: solid 1px;
        background-color: chocolate;
        color: white;
        /* 利用padding和text-align实现水平和垂直居中 */
        /* padding-top: 20em; */
        padding-top: 5em;
        box-sizing: border-box;
      }
      .box2 {
        margin: 0 auto;
        line-height: 20em;
        /* box-sizing: border-box; */
        width: 10em;
        height: 10em;
        border: solid 1px;
        background-color: chocolate;
        /* color: white; */
        /* 利用padding和text-align实现水平和垂直居中 */
      }

<div class="box1">
      <div class="box2"></div>
    </div>
    <div class="box">
      <span>php.cn</span>
    </div>

执行结果：