5.盒模型

# 5.盒模型

- box-sizing:content-box | border-box;

    默认content-box

    一个盒模型的功能强弱，直接决定了布局是否简洁，决定了编程的复杂度。

    正常盒子：

    boxWidth = width + border*2 + padding*2;

    IE6混杂模式的盒子整体宽度

    boxWidth = width;

    contentWidth = width - border*2 - padding*2;

- overflow:visiable | hidden | auto | scroll;

- resize: none | both | horizontal | vertical;

    要配合overflow使用

- flex

    display:flex | inline-flex;

        flex:将对象作为弹性伸缩和显示

        inline-flex:将对象作为内联块级弹性伸缩盒显示。

```html

/*

 * align-content:center;//多行文本居中

*/

/*

 * justify-content:center;

 * align-items:center;//单行文本居中

*/

    

    

    

```

```html