web前端练习30----Css，布局（文档流，浮动，清除浮动，浮动高度塌陷，垂直外边距重叠问题，定位，层级，居中，flex布局及练习）
Posted zhaihaohao1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端练习30----Css，布局（文档流，浮动，清除浮动，浮动高度塌陷，垂直外边距重叠问题，定位，层级，居中，flex布局及练习）相关的知识，希望对你有一定的参考价值。
一、文档流：
文档流处在网页的最底层， 它表示的是一个页面的位置
我们所创建的元素默认都处在文档流中
元素在文档流中的特点：
块元素：
1. 块元素在文档流中会独占一行， 块元素会自上向下排列。
2. 块元素在文档流中默认宽度是父元素的100 % （铺满父元素）。
3. 块元素在文档流中默认高度被内容(或者子元素) 撑开（ 包裹内容）
内联元素：
1. 内联元素在文档流中只占自身大小， 会默认从左向右排列，如果一行中不足以容纳所有的内联元素， 则换到下一行，
继续自左向右。
2. 在文档流中，内联元素的默认宽度和高度被内容撑开（ 包裹内容）。
3. 在文档流中，内联元素设置宽高无效。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1
width: 100px;
height: 100px;
background-color: cornflowerblue;
.box2
background-color: yellow;
span
width: 100px;
height: 100px;
background-color: turquoise;
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"><span>人的生命是有限的</span></div>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
</body>
</html>二、元素脱离文档流后的特点：
块级元素脱离文档流以后：
1. 不会独占一行
2. 宽度高度都被内容(或者子元素)撑开
3. 可以设置宽高
内联元素脱离文档流以后：
1.会变成块级元素（1. 不会独占一行2. 宽度高度都被内容撑开3. 可以设置宽高）
开启 浮动，绝对定位，固定定位 都会使元素脱离文档流。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*
padding: 0px;
margin: 0px;
.box1
height: 100px;
background-color: yellow;
float: left;
.box2
background-color: turquoise;
float: left;
.box3
width: 100px;
height: 100px;
background-color: violet;
float: left;
</style>
</head>
<body>
<div class="box1">zhh1</div>
<!-- 块级元素，宽高被子元素撑开 -->
<div class="box2">
<div style="width: 100px;height: 100px; background-color: blueviolet;">box4</div>
</div>
<!-- 内联元素 -->
<span class="box3">zhh3</span>
</body>
</html>三、浮动
3.1浮动的使用：
使用float来使元素浮动， 从而脱离文档流
可选值：
none， 默认值，不浮动，元素默认在文档流中排列
left， 元素会立刻脱离文档流， 向父元素左上侧浮动
right， 元素会立即脱离文档流， 向父元素右上侧浮动
当为一个元素设置浮动（ float属性是一个非none的值） 的特点
1. 元素会脱离文档流， 元素脱离文档流以后， 他下边的元素会立即向上移动
2. 元素浮动以后， 会尽量向父元素的左上角， 或者右上角移动，
直到遇到父元素的边框或者其他浮动元素,会停止移动
3. 如果浮动元素上边是一个没有浮动的块元素， 则浮动元素不会高过块元素
4. 浮动元素不会高过他上边开启浮动的兄弟元素， 最多一样高
5. 浮动元素不会盖住文字， 文字会自动环绕在浮动元素的周围,
所以我们可以通过浮动来设置文字环绕图片的效果
代码示例1：浮动特点1-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*
padding: 0px;
margin: 0px;
.box1
width: 600px;
height: 100px;
background-color: brown;
float: left;
.box2
width: 600px;
height: 100px;
background-color: aqua;
float: left;
.box3
width: 100px;
height: 100px;
background-color: yellow;
float: right;
;
</style>
</head>
<body>
<!-- <div style="margin-top: 100px; height: 500px; background: yellowgreen;">-->
<div class="box1">zhh1</div>
<div class="box2">zhh2</div>
<!-- box3不会高于box2 -->
<div class="box3">zhh3</div>
<!-- </div>-->
</body>
</html>代码示例2：浮动特点5，文字环绕图片的效果
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*
padding: 0px;
margin: 0px;
.touxiang
width: 145px;
height: 145px;
padding-right: 10px;
padding-bottom: 2px;
float: left;
</style>
</head>
<body>
<img class="touxiang" src="http://img0.imgtn.bdimg.com/it/u=1426019990,2186068774&fm=26&gp=0.jpg">
<div>
如果你是一滴水，你是否滋润了一寸土地？如果你是一线阳光，你是否照亮了一分黑暗？
如果你是一颗粮食，你是否哺育了有用的生命？ 如果你是一颗最小的螺丝钉，
你是否永远守在你生活的岗位上？ 如果你要告诉我们什么思想，你是否在日夜宣扬那最美丽的理想？
你既然活着，你又是否为了未来的人类生活付出你的劳动，使世界一天天变得更美丽？
我想问你，为未来带来了什么？在生活的仓库里，我们不应该只是个无穷尽的支付者。
</div>
</body>
</html>
3.2、清除浮动元素对当前元素的影响
由于元素浮动的影响，后面的兄弟元素（当前元素），会整体向上移动，会移动到浮动元素的下面。
我们有时希望清除掉其他浮动元素对当前元素的影响，这时可以使用clear来完成
clear:清除浮动元素对当前元素的影响
可选值：
none 默认值，不清楚浮动
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧浮动元素对当前元素的影响（清除对本元素影响最大的元素影响）
清除浮动以后，元素不会移动到浮动元素的下面，跟在浮动元素的后面
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*
margin: 0px;
padding: 0px;
.box1
width: 50px;
height: 50px;
background-color: #00FFFF;
float: left;
.box2
width: 150px;
height: 150px;
background-color: #7FFF00;
float: right;
.box3
width: 200px;
height: 200px;
background-color: #D2691E;
clear: both;
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3.3浮动引起的高度塌陷问题：
如果所示红色部分是父元素（父元素的边框），绿色部分是子元素，子元素没有把父元素撑起来。
原因如下：
在文档流中，父元素的高度默认是被子元素撑开的，
也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素高度塌陷。
由于父元素的高度塌陷了，则父元素下面的所有元素都会向上移动，这样会导致页面布局混乱。
所以在开发中一定要避免高度塌陷问题，
我们可以将父元素的高度写死（和子元素一样高），以避免塌陷问题出现，
但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案不推荐使用
高度塌陷代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*
margin: 0px;
padding: 0px;
/* 父元素 */
.box1
border: 10px solid red;
/* 防止塌陷可以设置子元素和父元素的高度一样 */
/* height: 100px; */
/* 子元素 */
.box2
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
.box3
height: 100px;
background-color: #6495ED;
</style>
</head>
<body>
<!-- 父元素 -->
<div class="box1">
<!-- 子元素 -->
<div class="box2">
</div>
</div>
<div class="box3">
</div>
</body>
</html>
3.4解决浮动引起的高度塌陷问题，方案1，开启BFC
根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context
简称BFC，该属性可以设置打开或者关闭，默认是关闭的
当开启元素的BFC以后，元素具有如下特性：
1.父元素的垂直外边距不会和子元素重叠（设置子元素外边距，父元素不会跟着走）
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素（不会塌陷）
开启BFC
开启的方式很多，推荐使用：
将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
副作用：子元素有相对定位时，设置外边距，超出父元素的宽高会隐藏
但在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6.
在IE6中虽然没有BFC,但是具有另一种隐含的的属性叫做hasLayout.
该属性的作用和BFC类似，所在的IE6浏览器可以通过开启hasLayout来解决该问题
开启方式很多，我们直接使用一种副作用最小的:
直接将元素的zoom设置为1.
zoom属性解析：
zoom表示放大的意思，后边跟随一个数值，写几就是放大几倍
zoom:1表示不放大元素，但是通过这样的方式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器不支持
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*
margin: 0px;
padding: 0px;
/* 父元素 */
.box1
border: 10px solid red;
/* 解决高度塌陷 */
/* 其他浏览器 */
overflow: hidden;
/* 兼容IE6及以下 */
zoom: 1;
/* 子元素 */
.box2
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
.box3
height: 100px;
background-color: #0000FF;
</style>
</head>
<body>
<!-- 父元素 -->
<div class="box1">
<!-- 子元素 -->
<div class="box2">
</div>
</div>
<div class="box3">
</div>
</body>
</html>
3.5解决浮动引起的高度塌陷问题，方案2，清除浮动的一种写法
解决高度塌陷方案二：
可以在高度塌陷的父元素的最后，添加一个空白的div,
由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
然后对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度
基本没有副作用，兼容所有的浏览器
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构（多添加了一个div）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*
margin: 0px;
padding: 0px;
.box1
border: 1px red solid;
.box2
width: 100px;
height: 100px;
background-color: yellow;
float: left;
.box3
width: 100px;
height: 100px;
background-color: #00FFFF;
float: left;
.box4
clear: both;
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
</div>
</body>
</html>
3.6解决浮动引起的高度塌陷问题，方案3，清除浮动的另一种写法
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear
解决高度塌陷方案三：
可以通过after伪类向元素的最后添加一个空白的块元素（子元素），然后对其清除浮动，
这样和添加一个div的原理一样，可以达到一个相同的效果，
而且不会再页面中添加多余的div,这是我们最推荐的使用方式，几乎没有副作用
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*
margin: 0px;
padding: 0px;
.box1
border: 1px red solid;
.box2
width: 100px;
height: 100px;
background-color: yellow;
float: left;
.box3
width: 100px;
height: 100px;
background-color: #00FFFF;
float: left;
/* 写一个通用选择器，那个元素出现高度塌陷，则添加 */
.clearfix:after
content: "";
display: block;
clear: both;
/* 兼容IE6及以下 */
/* IE6及以下，不支持after的伪类，所以还是要通过zoom，开启hasLayout,解决高度塌陷 */
.clearfix
zoom: 1;
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
四、垂直外边距重叠：
垂直外边距重叠：
- 在网页中 相邻的 垂直方向的 外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则元素的外边距会设置给父元素
（设置子元素外边距，父元素会跟着走）
常见解决方法：
1.加个div，不让父元素和子元素外边距相邻
<div style="height: 1px;"></div>
2.设置父元素的上边框，不让父元素和子元素外边距相邻
border-top: yellowgreen 1px solid;
3.设置父元素的内上边距，不让父元素和子元素外边距相邻
padding-top: 1px;
4.使用空的 table 标签，可以隔离父子元素的外边距，阻止外边距重叠
<table></table>
5使用伪元素选择器添加一个table元素
element::before
content: "";
display: table;
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 解决垂直外边距重叠问题的终极解决方案 -->
<style type="text/css">
*
margin: 0px;
padding: 0px;
.container
width: 200px;
height: 200px;
background-color: #FFFF00;
/* 使用伪元素选择器添加一个table元素 */
.container::before
display: table;
content: "";
.box1
width: 100px;
height: 100px;
background-color: #00FF00;
margin-top: 100px;
</style>
</head>
<body>
<!--
解决垂直外边距重叠的最优方案
1使用空的 table 标签，可以隔离父子元素的外边距，阻止外边距重叠
<table></table>
2使用伪元素选择器添加一个table元素
element::before
content: "";
display: table;
-->
<div class="container">
<!-- 使用空的 table 标签，可以隔离父子元素的外边距，阻止外边距重叠 -->
<!-- <table></table> -->
<div class="box1">子元素</div>
</div>
</body>
</html>
五、封装一个选择器 同时解决 父子元素垂直外边距重叠问题 和 父元素高度塌陷问题
封装成一个伪元素选择器
element::before,
element::after
content: "";
display: table;
clear: both;
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 解決父子元素垂直外边距重叠问题 和 解决父元素高度塌陷问题的综合终极解决方案 -->
<style type="text/css">
*
margin: 0px;
padding: 0px;
.container
width: 200px;
height: 200px;
background-color: #FFFF00;
.box1
width: 100px;
height: 100px;
background-color: #00FF00;
margin-top: 100px;
/*解決父子元素垂直外边距重叠问题 和 解决父元素高度塌陷问题 */
.container::before,
.container2::after
content: "";
display: table;
clear: both;
.container2
border: 10px red solid;
.box4
width: 100px;
height: 100px;
background-color: #8A2BE2;
float: left;
</style>
</head>
<body>
<!--
解決父子元素垂直外边距重叠问题 和 父元素高度塌陷问题
封装成一个伪元素选择器
element::before,
element::after
content: "";
display: table;
clear: both;
-->
<!-- 垂直外边距 -->
<div class="container">
<div class="box1">子元素</div>
</div>
<!-- 高度塌陷问题 -->
<div class="container2">
<div class="box4">box4</div>
</div>
</body>
</html>
六、元素的定位：
定位概述：
定位：就是本元素在父元素（或祖先元素）中摆放位置
通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值：
static: 默认值， 元素没有开启定位， 元素出现在正常的流中（ 忽略 top, bottom, left, right 或者 z - index 声明）
relative: 开启元素的相对定位
absolute: 开启元素的绝对定位
fixed: 开启元素的固定定位（ 也是绝对定位的一种）
当开启了元素的定位（ position属性值是一个非static的值） 时，
可以通过left, right, top, bottom四个属性来设置元素的偏移量
left: 元素相对于其定位位置的左侧偏移量
right: 元素相对于其定位位置右侧的偏移量
top: 元素相对于其定位位置上边的偏移量
bottom: 元素相对于其定位位置下边的偏移量
通常只需要使用其中两个就可以对元素进行定位
例如： left, top
注意：
left, right, top, bottom 是定位的偏移量
margin-left， margin-top， margin-right， margin-bottom 是外边距
这两组独立属性，开启定位之后不影响外边距（外边距同样有效）
6.1相对定位：
当元素的position属性设置为relative时， 则开启了相对定位
1. 相对定位的元素不会脱离文档流（ 后面元素不占用他的位置）
2. 当开启了元素的性对定位以后， 而不设置偏移量时， 元素不会发生任何变化
3. 相对定位是相对于元素在文档流中原来的位置进行定位
4. 相对定位会使元素提升一个层级
5. 相对定位不会改变元素的性质， 块元素还是块元素， 内联还是内联
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1
width: 100px;
height: 100px;
background-color: chocolate;
.box2
width: 100px;
height: 100px;
background-color: cyan;
position: relative;
top: 100px;
left: 100px;
.box3
width: 100px;
height: 100px;
background-color: chartreuse;
</style>
</head>
<body>
<div class="box1">zhh1</div>
<div class="box2">zhh2</div>
<div class="box3">zhh3</div>
</body>
</html>6.2绝对定位：
当 position 属性设置为 absolute 时， 则开启了元素的绝对定位
绝对定位
1. 开启绝对定位， 会使元素脱离文档流
2. 开启绝对定位以后， 如果不设置偏移量， 则元素位置不会发生变化
3. 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的，
（ 一般情况下， 开启了子元素的绝对定位都会同时开启父元素的相对定位）
如果所有所有祖先元素都没有开启定位， 则会相对于浏览器窗口进行定位
4. 绝对定位会使元素提升一个层级
5. 绝对定位会改变元素的性质，
内联元素变成块元素（1. 不会独占一行2. 宽度高度都被内容撑开3. 可以设置宽高）
块元素不会独占一行，宽高都被内容撑开，可以设置宽高
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1
width: 100px;
height: 100px;
background-color: chocolate;
.box2
width: 100px;
height: 100px;
background-color: cyan;
position: relative;
.box3
width: 100px;
height: 100px;
background-color: chartreuse;
.box4
width: 75px;
height: 75px;
background-color: crimson;
position: absolute;
left: 12px;
top: 12px;
.box5
background-color: darkcyan;
position: absolute;
left: 25px;
top: 25px;
</style>
</head>
<body>
<div class="box1">zhh1</div>
<div class="box2">
<!-- 相对于box2定位，内联元素变成了块级元素 -->
<span class="box4">box4</span>
<span class="box5">box5</span>
</div>
<div class="box3">zhh3</div>
</body>
</html>
6.3固定定位：
当 position 属性设置为 fixed 时， 则开启了元素的固定定位
固定定位也是一种绝对定位， 他的大部分特点和绝对定位一样。
不同的是：
固定定位永远都相对于浏览器窗口定位。
固定定位在浏览器窗口某个位置， 不会随着滚动条滚动
IE6不支持固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box1
height: 100px;
background-color: blue;
#box2
height: 100px;
height: 100px;
background-color: yellow;
#box3
width: 100px;
height: 100px;
background-color: turquoise;
position: fixed;
left: 0px;
top: 0px;
</style>
</head>
<body style="height: 2000px;">
<div id="box1">zhh1</div>
<div id="box2">
<!-- 相对于浏览器窗口定位 -->
<div id="box3">zhh3</div>
</div>
</body>
</html>七、元素的层级：
z-index设置层级，z 轴的值：
1默认层级：定位元素>浮动元素>文档流中的元素
2开启定位以后才能使用z-index设置层级
3层级高(z-index值大的元素)的元素盖住层级低的元素
4如果z-index值一样，或者都没有z-index，则优先显示下边的元素
5父元素永远不会盖住子元素（一般是设置层级是兄弟元素相互覆盖）。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*
margin: 0px;
padding: 0px;
.box1
width: 100px;
height: 100px;
background-color: #00FFFF;
position: relative;
.box2
width: 100px;
height: 100px;
background-color: #A52A2A;
position: absolute;
.box3
width: 100px;
height: 100px;
background-color: #EE82EE;
position: relative;
.box4
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
left: 0px;
top: 200px;
z-index: 2;
.box5
width: 50px;
height: 50px;
background-color: yellowgreen;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
</style>
</head>
<body>
<div class="box1">zhh1</div>
<div class="box2">zhh2</div>
<div class="box3">zhh3</div>
<div class="box4">
<div class="box5">
</div>
</div>
</body>
</html>
八、元素各种居中总结：
1.position是默认值的时候的居中：
元素水平居中：
margin: 0 auto;
元素竖直居中：
margin-top = （父布局高度-自己高度）/2;
2.绝对定位，固定定位，相对定位的时候的居中：
元素水平居中：
left = (父布局的宽度-自己宽度)/2;
变形写法：
left: 50%;
margin-left: -(自己宽度/2);
元素竖直居中
top = （父布局高度-自己高度）/2;
变形写法
top: 50%;
margin-top: -(自己高度/2);
3.浮动的时候的居中：
水平居中：
margin-left: (父布局的宽度-自己宽度)/2;
竖直居中：
margin-top = （父布局高度-自己高度）/2;
4.文字居中：
line-height: 高度; 文字在高度内竖直居中
text-align: center; 文字水平居中
5.使用 center 标签居中
<center><p>人生有涯</p></center>
九、flex布局
参考 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex布局只支持IE10及以上
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器存在两根轴：
主轴（main axis）：默认是水平方向的（但是可以设置为竖直方向）
交叉轴（cross axis）：和主轴垂直的轴
主轴和交叉轴可以看做是x轴y轴
9.1容器（就是父元素）的6大属性（开启1个，主轴3个，交叉轴2个）：
1开启flex布局
display: flex;
2设置主轴的方向（即项目的排列方向）。
row（默认值）：主轴为水平方向，从左向右排列
flex-direction: row;
3项目在主轴方向上是否换行：
nowrap（默认）：不换行。
flex-wrap: wrap;（通常设置为换行）
4项目在主轴上的对齐方式（子元素怎样间隔排列）
flex-start（默认值）：左对齐
justify-content: space-between;（常用值）
5 项目在交叉轴上如何对齐。(项目只有一行)
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
通常设置为center（子元素竖直居中）
align-items: center;
6项目在交叉轴上如何对齐。（项目有多行时如何对齐，如果只有一行该属性不起作用）
stretch 默认值。如果项⽬目未设置固定⾼高度，将占满整个容器器的⾼高度。
align-content: stretch;
9.2项目（子元素）的六大属性
1.order属性规定子容器（项目）的排列顺序。数值越小越靠前，默认为0,支持负数
order: 1;
2.flex-grow属性规定子容器的放大比例，默认为0，剩余空间不足则不会放大。
如果子容器器的flex-grow属性都为1，则等分剩余空间。
就是给子元素设置比重：
主轴方向是水平的:
设置的是子元素宽度的比重,此时设置宽度无效(被比重覆盖)
高度是默认值，可以设置高度
主轴方向是竖直的:
设置的是子元素高度的比重,此时设置高度无效(被比重覆盖)
宽度是默认值，可是设置宽度
flex-grow: 1;
3.flex-shrink属性规定了子容器的缩小比例，默认为1，如果空间不足，该子容器将缩小。
1)不设置父元素的宽度（默认铺满），缩小屏幕，子元素的宽度缩小
2)设置的父元素宽度，缩小屏幕，子元素宽度不缩小。
3)只有宽度缩小,高度不缩小
4)值越大，缩小的越多，值是0时不缩小
4flex-basis属性可修改子容器占据的主轴空间的大小。默认值为auto,即子容器本来大小。
就是改变子元素的宽高
主轴是水平方向，改变的是子元素的宽度
主轴是竖直方向，改变的是子元素的高度
5flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
1)后面只跟一个值，flex等同于flex-grow
例如 flex: 1; 等同于 flex-grow: 1;
2)该属性有两个快捷值：
auto (1 1 auto) 和 none (0 0 auto)。
6 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性。
就是子元素本身在父元素交叉轴上的对齐方式，可以居上，居中，居下
flex布局中子元素的特点
1不会独占一行
2宽高被内容撑开
3可以设置宽高
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*
padding: 0px;
margin: 0px;
.layout
width: 500px;
height: 100px;
background-color: yellow;
/* flex布局只支持IE10及以上 */
/* 开启flex布局 */
display: flex;
/* 主轴方向：水平（默认就是水平的） */
flex-direction: row;
/* 子元素是否换行 换行*/
flex-wrap: wrap;
/* 子元素间隔排列方式 */
justify-content: flex-start;
/* 子元素在交叉轴上怎样居中，一行子元素 */
align-items: center;
/* 子元素在交叉轴上怎样居中，多行子元素 */
/* align-content: center; */
.box1
background: #00FFFF;
.box2
/*
flex布局中的子元素，自身设置比重
flex: 1; 等同于 flex-grow: 1;
*/
flex: 1;
/* 在交叉轴上居上 */
align-self: flex-start;
background-color: #0000FF;
/*
flex布局中子元素的特点
不会独占一行
宽高被内容撑开
可以设置宽高
*/
.box3
width: 100px;
height: 100px;
line-height: 50px;
background-color: #DC143C;
</style>
</head>
<body>
<div class="layout">
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
</div>
</body>
</html>
十、案例练习：
10.1使用浮动实现导航条：
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*
margin: 0px;
padding: 0px;
.navigation
width: 1000px;
background-color: #0000FF;
/* 去掉点 */
list-style: none;
/* 居中 */
margin: 50px auto;
.navigation li
width: 25%;
float: left;
text-align: center;
.navigation li a
/* 内联元素改成块元素，才能设置宽高 */
display: block;
width: 100%;
color: #ffffff;
/* 去掉下划线 */
text-decoration: none;
padding: 10px 0px;
.navigation li a:hover
background-color: #A52A2A;
</style>
</head>
<body>
<!-- 写一个导航条 -->
<ul class="navigation">
<li><a href="#">java</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">C++</a></li>
<!-- 防止高度塌陷，及影响其他元素 -->
<div style="clear: both;"></div>
</ul>
</body>
</html>
10.2使用浮动实现如下布局：
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*
margin: 0px;
padding: 0px;
color: #000;
font-size: 14px;
.title
width: 385px;
height: 45px;
background-color: #f6f6f6;
margin: 0 auto;
line-height: 45px;
.left
float: left;
margin-left: 27px;
.right
float: right;
margin-right: 20px;
color: #ae515f;
.content
width: 383px;
border: #eae4e7 1px solid;
margin: 0 auto;
.content h3
margin-left: 27px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 25px;
.content ul
margin-left: 27px;
margin-right: 20px;
list-style: none;
border-bottom: #cccccc 1px dashed;
.content ul li
display: block;
margin-bottom: 20px;
.content ul li a
text-decoration: none;
float: left;
/* 为超链接添加一个伪类 */
.content ul li a:hover
/* 鼠标滑过是红色 */
color: red;
/* 鼠标滑过显示下划线 */
/* text-decoration: underline; */
.content ul li span
float: right;
.red
color: red;
.h3Color
color: #4f0c3c;
.content .noBorder
border: none;
</style>
</head>
<body>
<div class="title">
<h3 class="left">近期开班</h3>
<a href="#" class="right">10年面授开班计划</a>
</div>
<div class="content">
<h3>JavaEE+云计算-全程就业班</h3>
<ul>
<li>
<a href="#">开班时间：<span class="red">2016-04-21</span></a>
<span class="red">预约报名</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">开班时间：<span class="red">2016-04-21</span></a>
<span class="red">无座，名额报满</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">开班时间：2016-04-21</a>
<span>开班盛况</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">开班时间：2016-04-21</a>
<span>开班盛况</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">开班时间：2016-04-21</a>
<span>开班盛况</span>
<div style="clear: both;"></div>
</li>
</ul>
<h3>android+人工智能-全程就业班</h3>
<ul>
<li>
<a href="#">开班时间：<span class="red">2016-04-21</span></a>
<span class="red">预约报名</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">开班时间：<span>2016-04-21</span></a>
<span>开班盛况</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">开班时间：2016-04-21</a>
<span>开班盛况</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">开班时间：2016-04-21</a>
<span>开班盛况</span>
<div style="clear: both;"></div>
</li>
</ul>
<h3 class="h3Color">前端+html5-全程就业班</h3>
<ul class="noBorder">
<li>
<a href="#">开班时间：<span class="red">2016-04-21</span></a>
<span class="red">预约报名</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">开班时间：2016-04-21</a>
<span>开班盛况</span>
<div style="clear: both;"></div>
</li>
</ul>
</div>
</body>
</html>
以上所有源代码下载：
https://download.csdn.net/download/zhaihaohao1/12032872
以上是关于web前端练习30----Css，布局（文档流，浮动，清除浮动，浮动高度塌陷，垂直外边距重叠问题，定位，层级，居中，flex布局及练习）的主要内容，如果未能解决你的问题，请参考以下文章
《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应