目录
弹性元素排序
order
默认的时候，弹性元素的显示和排序顺序是与在源码中的顺序一致的，如果更改需要使用order属性。
格式：order:value，用于弹性元素，默认情况下所有弹性元素的顺序都是0。
修改弹性元素的视觉顺序，可以将order设置为一个非零的整数（正数、负数）
数越大在主轴上面越靠后。如果数值相同它们会被分配在同一个排序组中，以出现在源码中的顺序沿着主轴方向显示。
注意：使用order时只是视觉上的变化，就像在源码中的顺序发生了修改一样（但是实际并没有发生修改）。
收缩因子
flex元素仅在默认宽度之和大于容器的时候才会发生收缩。收缩的依据是flex-shrink的值。
flex-shrink的默认值是1，其他的值始终是一个数字，负数无效。可以是小数，只要大于0就行。
适用于弹性元素。收缩因子定义的是空间不够放置所有弹性元素，而弹性容器不能增加尺寸或不允许换行时如何分配缺少的空间。
BFC
block formatting context，块格式化上下文，是web页面的可视化CSS渲染出的一部分。形成了BFC就形成了一个独立的区域，区域里面的子元素不会影响到外面的元素。
形成BFC的方法：
- 浮动元素：元素的float不是none的元素。
- 绝对定位的元素：position的值为absolute或fixed。
- 具有overflow并且值不是visible的块元素。
- display为flow-root的值。（CSS3中新增加的。），只是单纯的触发BFC。
上面的1、2、3都可以形成BFC并且加上自己的特性（float形成BFC并且形成了浮动，Position形成BFC并且可以进行定位，overflow形成BFC并且可以隐藏多出来的内容。） 而flow-root只是单纯的触发BFC。
形成BFC之后的应用：
-
爸爸管儿子，让爸爸能够包裹住儿子。 来爸爸抱抱。
- 解决float高度塌陷问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
width:200px;
border:5px solid green;
/* float:left; */
display:flow-root;
}
#z{
float:left;
width:100px;
height:100px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="f">
<div id="z"></div>
</div>
</body>
</html>
- 解决父子之间的margin合并问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
width:200px;
margin:10px;
/* border:1px solid green; */
/* display:flow-root; */
overflow: hidden;
}
#z{
margin:20px;
width:100px;
height:100px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="f">
<div id="z"></div>
</div>
</body>
</html>
-
解决兄弟之间的float和margin。
- 兄弟元素之间上下边距折叠问题。
- 防止外边距折叠，可以套一个div，然后给新加的div设置 flow-root;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#z1,#z2{
margin:20px;
width:100px;
height:100px;
border:1px solid green;
}
#f > div{
display:flow-root;
}
</style>
</head>
<body>
<div id="f">
<div>
<div id="z1"></div>
</div>
<div id="z2"></div>
</div>
</body>
- 解决float时块元素重叠，行内元素不重叠。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img{
float:left;
}
#f > div{
border:1px solid green;
display:flow-root;
}
</style>
</head>
<body>
<div id="f">
<img src="./lipeiqian.jpg" />
<div>123456789</div>
</div>
</body>
水平、垂直居中的总结
-
内联元素水平居中
text-algin:center只对inline和inline-block有效。对block无效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
text-align: center;
}
</style>
</head>
<body>
<div id="f">
<img src="./lipeiqian.jpg" />
<span>华华的baba</span>
<div style="width:100px;height:100px;border:1px solid green;">hehe</div>
</div>
</body>
</html>
- 块级元素水平居中。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
border:1px solid red;
}
#f > div{
margin:0 auto;
}
</style>
</head>
<body>
<div id="f">
<div style="width:100px;height:100px;border:1px solid green;">hehe</div>
</div>
</body>
</html>
display:flex;justify-content:center
块状元素、行内元素、行内块状元素都可以。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
border:1px solid red;
display:flex;
justify-content: center;
}
</style>
</head>
<body>
<div id="f">
<!-- <img src="./lipeiqian.jpg" /> -->
<span>小哗哗</span>
<!-- <div style="width:100px;height:100px;border:1px solid green;">hehe</div> -->
</div>
</body>
</html>
- 单行内联元素垂直居中
设置内联元素的高度和行高相等。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
border:1px solid red;
height:100px;
line-height: 100px;
}
</style>
</head>
<body>
<div id="f">
沛华真丑！（江鉴哲说的！）
</div>
</body>
</html>
- 多行内联元素垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
border:1px solid red;
width:400px;
height:500px;
font-size:0;
line-height: 500px;
}
#f > span{
border:1px solid green;
display:inline-block;
line-height:normal;
vertical-align: middle;
font-size:16px;
}
</style>
</head>
<body>
<div id="f">
<span>沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）</span>
</div>
</body>
</html>
display:table-cell
table-cell将元素定义为表格中的一个单元格，对应的HTML元素是th或td。
在table-cell中使用middle时，单元格中的内容的中线与行的中线对齐。
display: table-cell; 会将一个元素显示成单元格，就相当于给加了一个td。
vertical-align: middle 要写在父元素上面。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
border:1px solid red;
width:400px;
height:500px;
display:table-cell;
vertical-align: middle;
}
#f > span{
border:1px solid green;
}
</style>
</head>
<body>
<div id="f">
<span>沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）</span>
</div>
</body>
</html>
display:flex;align-items:center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
border:1px solid red;
width:400px;
height:500px;
display:flex;
align-items: center;
}
#f > span{
border:1px solid green;
}
</style>
</head>
<body>
<div id="f">
<span>沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）</span>
</div>
</body>
</html>
- 定位可以实现水平、垂直居中。
- 使用margin-left和margin-top来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
border:1px solid red;
width:400px;
height:500px;
position:relative;
}
#z{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
width:100px;
height:100px;
border:1px solid green;
}
</style>
</head>
<body>
<div id="f">
<div id="z"></div>
</div>
</body>
</html>
- 使用
transform:translate(-50%,-50%);来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#f{
border:1px solid red;
width:400px;
height:500px;
position:relative;
}
#z{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100px;
height:100px;
border:1px solid green;
}
</style>
</head>
<body>
<div id="f">
<div id="z"></div>
</div>
</body>
</html>
总结:
儿子浮动，父亲塌陷，父亲也浮动，高度正常。