前端面试|css盒子模型

1. 盒子水平垂直居中的五大方案。

.box{
    box-sizing: border-box;
    width: 100px;
    height: 50px;
    line-height: 48px;
    border: 1px solid #333;
}

• 定位

  1)固定宽高(width:100px;height:50px;) .box{ positon:absolute; top:50%; left:50%; margin-top:-25px; margin-bottom:-50px;
  } 2)需要有宽高限定 .box{ position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } 3)不需要有具体宽高限制 .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) }

• display:flex

• js实现

• 固定宽高的父级 display: table-cell; 子级：display:inline-block；

2.盒子模型

css盒子模型有四个属性：外边距（margin）、边框（border）、内边距（padding）、内容（content）

• 标准盒子模型（W3C标准） 

• 盒子大小 = content + border + padding + margin

• 内容部分的width就单单指内容区域的宽度,height 就单单指内容区域的高度

* IE怪异盒模型

• 盒子大小 = width（content + border + padding）+margin
• 怪异盒子模型的width指的是内容、边框、内边距总的宽度；height指的是内容、边框、内边距总的高度。

box-sizing:
    属性值：
        box-sizing: content-box;常规盒模型
        box-sizing: border-box; 怪异盒模型

• flex弹性盒子模型（移动端常用，开发ReactNative、小程序时用到的较多）

  触发弹性盒子：display:flex;

• column多列盒模型（我实际项目中不太常用）