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

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

box-sizing属性

box-sizing 属性定义了如何计算一个元素的总宽度和总高度，它有如下两个值：

1. content-box 是默认值。如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。这意味着当调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距，布局时尤其烦人。
2. border-box 设置的边框和内边距的值是包含在元素尺寸内。也就是说，如果将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下布局更方便，一般我们会使用这个值。

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid yellow;
  background: green;
}
div {
  box-sizing: content-box;
  /* 元素宽度: 160px + (2 * 20px) + (2 * 8px) = 216px
     元素高度: 80px + (2 * 20px) + (2 * 8px) = 136px
 */
}

而使用box-sizing: border-box; 则不需要计算，实际尺寸直接与元素定义的相同。

div {
  box-sizing: border-box;
  /* 元素宽度: 160px
     元素高度: 80px
 */
}

常用的元素居中方式

• 行内元素

  1. 水平居中,使用text-align:center;
  2. 垂直居中，使用line-height:100px;
     设置子元素行高与父元素高度相同，行内元素即可垂直居中

div {
    text-align: center;
    line-height: 100px;
}

• 块元素

  1. 水平居中,使用margin: auto;
  2. 垂直居中，使用padding:50px;上下挤压

.box>div{
    margin: auto; /*水平居中 */
}
.box {
    padding: 50px; /*垂直居中 */
}