浅谈CSS布局技巧包括浮动，定位，弹性盒子。并以哔哩哔哩网站为例分析。
一.基础认知
关于元素显示模式
- 块级元素（block），显示特点为独占一行，宽度默认是父元素的宽度，高度默认由内容撑开。可以设置宽，高。比如：div,p等标签。
- 行内元素（inline），一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽，高。写了也不生效。比如：a,span等标签。
- 行内块元素（inline-block），一行可以显示多个，可以设置宽，高。比如：input,button等标签。
- 元素显示模式可以转换,改变元素默认的显示特点，让元素符合布局要求。比如：display:block，转换为块级元素。
- 不同布局方式元素的层级关系：标准流<浮动<定位。不同定位之间的层级关系是相同的，此时HTML中写在下面的元素层级更高，会覆盖上面的元素。
二.浮动
- 浮动元素会脱离标准流，在标准流中不占位置。
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素。
- 下一个浮动元素会在上一个浮动元素后面左右浮动。
- 一行可以显示多个，并且可以设置宽，高。
三.定位
- 定位之后的元素层级最高可以层叠在其他盒子上面，所以可以类似于导航栏一样始终固定在屏幕中的某个位置。
- 定位的方式有四种。（1）静态定位（2）相对定位，相对于自己之前的位置进行移动。在页面中占位置且仍然具有标签原有的显示模式特点。（3）绝对定位，相对于非静态定位的父元素进行定位移动。在页面中不占位置，改变了标签的显示模式特点。变成行内块。（3）固定定位，相对于浏览器进行定位，在页面中不占位置。
四.弹性盒子
弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。就比如哔哩哔哩网站的布局几乎都是用弹性盒子flex布局。
还有一种弹性盒子grid。其布局是一个二维的基于网格的布局系统，这是与 Flexbox 一维布局不同的地方，
五.总结
学完了布局，接着我们得让页面的有点交互，让画面动起来。就得学习js。
