# 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{
width: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{
width: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 class="wrapper">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
```
```html
<style>
/*
flex-shrink的计算
*/
.wrapper{
width:600px;
height:300px;
border:1px solid black;
display:flex;
}
.content{
width:100px;
height:100px;
flex-shrink:1;
}
.content:nth-of-type(2){
width:200px;
flex-shrink:1;
}
.content:nth-of-type(3){
width: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 class="wrapper">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</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{
width:300px;
height:300px;
display:flex;
border:1px solid black;
}
.content{
width:100px;
height:100px;
border:1px solid black;
justify-content:center;
align-items:center;
}
</style>
<div>
<div class="content"></div>
</div>
<style>
/*
2.多行居中
*/
.wrapper{
width:300px;
height:300px;
display:flex;
border:1px solid black;
}
.content{
width:100px;
height:100px;
border:1px solid black;
justify-content:center;
align-content:center;
}
</style>
<div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<style>
/*
3.可动态增加的导航栏
*/
.wrapper{
width:300px;
height:200px;
display:flex;
border:1px solid black;
}
.item{
height:30px;
flex:1 1 auto;
}
</style>
<div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
/*
4.等分布局
*/
.wrapper{
width: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 class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
<style>
/*
4.中间固定，两边自适应
*/
.wrapper{
width: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 class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
<style>
/*
5.多行换行，一次排列
*/
.wrapper{
width: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 class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
</div>
<style>
/*
6.圣杯布局
*/
.wrapper{
width: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 class="header"></div>
<div class="contain">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
```
