这是我参与【第五届青训营】伴学笔记创作活动的第三天
CSS布局：通过CSS去拾取网页中的元素，并且控制他们相对普通文档流，周边元素，父容器甚至浏览器窗口的位置
普通文档流：从左到右，从上到下
行内元素无法设置宽高，由内容撑开页面
CSS flex布局
flex是flexbox的缩写，弹性布局
Flex容器上的属性：
flex-direction:控制flex元素的排列方向
Flex-warp：控制换行的
Flex-flow：将上面两个属性的值浓缩到一个里
Flex内部元素上的属性：
Flex-basis:控制元素在容器内主轴方向上所占的大小
flex-grow:对容器剩余空间的处理
Flex-shrink:对容器溢出空间的处理
对容器内元素的对齐方式：
Align-items:处理元素在交叉轴的对齐方式 值为center垂直居中。
Justify-content:处理元素在主轴的对齐方式 space-between，让最左边的元素对齐最左边，最右边的元素对齐最右边，中间的元素每个元素的间距相等
Flex的使用场景：
导航
拆分导航
元素居中
绝对底部:令正文flex-grow为1，将剩余空间全部由正文占据
CSS定位
定位：
Position:
Static静态定位 默认定位从上到下，从左到右
Relative相对定位 配合top left等进行位置偏移
Absolute绝对定位 相对于父容器不为static的定位来进行定为
Fixed固定定位 相对浏览器的定位
Sticky粘性定位
浮动:从正常文档流中被移除，其他元素都会围绕他
Clear:清除浮动，清除从自身及以下元素的浮动
主要学习了flex布局的各种属性的应用，让我熟练掌握了flex布局是如何对页面元素进行定位的，而通过这次的学习让我知道了如何运用flex布局来调整页面，不会再用float来进行页面元素的定位了，而且通过flex的布局，让页面的元素形成了一块一块的元素，可以方便之后的打包封装操作。
