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;//单行文本居中

<style>

.wrapper{

300px;

height:300px;

border:1px solid black;

display:flex;

/*flex-direction:row | row-reverse | column | column-reverse;主轴方向*/

/*flex-wrapper:wrap | nowrap | wrap-reverse;换行

/*justify-content:flex-start | flex-end | center | space-between | space-around;基于主轴的对齐方式

/*align-items:flex-start | flex-end | center | baseline | stretch;基于交叉轴的对齐方式,主要还是针对单行元素来处理对齐方式*/

/*align-content:flex-start | flex-end | center | space-between | space-around;基于交叉轴的对齐方式,主要还是针对多行元素来处理对齐方式*/

}

.content{

150px;

height:150px;

border:1px solid green;

box-sizing:border-box;

/*order:0;默认值为0;数值大的在前面

/*align-self:auto | flexstart | flex-end | center | baseline | stretch;子项基于交叉轴的对齐方式

/*flex-grow:1;基于比例瓜分剩余空间,伸展性,0则不参与瓜分*/

/*flex-shrink:

/*flex-basis:auto | 100px;用来覆盖子项的width

}

</style>

</div>

```

```html

<style>

flex-shrink的计算

.wrapper{

600px;

height:300px;

border:1px solid black;

display:flex;

}

.content{

100px;

height:100px;

flex-shrink:1;

}

.content:nth-of-type(2){

200px;

flex-shrink:1;

}

.content:nth-of-type(3){

400px;

flex-shrink:3;

}

总长度：各自子元素内容盒的width * 各自子元素的flex-shrink值的总和：

(100 * 1) + (200 * 1) + (400 * 3) = 1500;

计算第三个content压缩后的长度：

要压缩的总长度 = 子元素内容盒的总长度 - 父亲的内容盒长度

100 + 200 + 400 - 600 = 100;

子元素压缩的长度 = (子元素的width * 子元素的flex-shrink) / 上面的总长度 * 要压缩的总长度

(400 * 3)/1500 * 100 = 80

最终子元素内容盒的width = 子元素内容盒的宽度 - 子元素要压缩的长度

400 - 80 = 320;

</style>

</div>

flex-basis

只写了flex-basis或者flex-basis大于width，代表元素的最小宽度。

当不换行内容超过内容区时，容器会被撑开

设置的width和flex-basis且flex-basis小于width时，代表元素的最小宽度是flex-basis，最大宽度是width。

当不换行内容超过内容区时，容器会被撑开但是容器宽度不会超过width。

无论什么情况，被不换行内容撑开的容器，不会被压缩

word-break:break-word;//元素中内容可以换行

弹性盒一般都要换行，才能进行正常的压缩。

```

```html

<style>

弹性盒的应用

1.单行居中

.wrapper{

300px;

height:300px;

display:flex;

border:1px solid black;

}

.content{

100px;

height:100px;

border:1px solid black;

justify-content:center;

align-items:center;

}

</style>

<div>

</div>

<style>

2.多行居中

.wrapper{

300px;

height:300px;

display:flex;

border:1px solid black;

}

.content{

100px;

height:100px;

border:1px solid black;

justify-content:center;

align-content:center;

}

</style>

<div>

</div>

<style>

3.可动态增加的导航栏

.wrapper{

300px;

height:200px;

display:flex;

border:1px solid black;

}

.item{

height:30px;

flex:1 1 auto;

}

</style>

<div>

</div>

<style>

4.等分布局

.wrapper{

400px;

height:200px;

display:flex;

border:1px solid black;

}

.content{

border:1px solid black;

box-sizing:border-box;

height:100px;

flex:1 1 auto;

}

</style>

<div>

</div>

<style>

4.中间固定，两边自适应

.wrapper{

400px;

height:200px;

display:flex;

border:1px solid black;

}

.content{

border:1px solid black;

box-sizing:border-box;

height:100px;

flex:1 1 auto;

}

.content:nth-of-type(2){

flex:0 0 200px;

}

</style>

<div>

</div>

<style>

5.多行换行，一次排列

.wrapper{

400px;

height:800px;

border:1px solid black;

display:flex;

flex-wrap:wrap;

align-content:flex-start;

}

.content{

border:1px solid black;

box-sizing:border-box;

height:100px;

flex:1 1 auto;

}

.content:nth-of-type(2){

flex:0 0 200px;

}

</style>

<div>

</div>

<style>

6.圣杯布局

.wrapper{

300px;

height:300px;

border:1px solid black;

display:flex;

flex-direction:column;/*垂直布局*/

}

.header, .footer{

border:1px solid black;

box-sizing:border-box;

flex:0 0 20%;

}

.contain{

flex:1 1 auto;

display: flex;

}

.left, .right{

flex:0 0 20%;

}

.center{

flex: 1 1 auto;

}

</style>

<div>

</div>

</div>

```

以上是markdown格式的笔记