这是我参与【第五届青训营】伴学笔记创作活动的第二天 块级和行级
块级：不和其他盒子并列摆放，适用所有的盒模型属性。
行级：和其他行级盒子一起放在一行或拆开成多行。盒模型中的width，height不适用，无法为行级模型指定宽高。由内容决定。
块级元素生成块级盒子
Body,article,div,main,section,h1-6,p,ul,li等
display:block
行级元素生成行级盒子，内容分散在多个行盒(line box)中
Span,em,strong,cite,code等
display：inline
display属性
Inline-block：本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行
Grid布局
Display:grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行/列
grid-template-columns:100px 100px 200px在横向上划分为3个格子，占据各自长度
grid-template-rows在纵向上划分
grid line网格线来标识格子位置
fixed定位也脱离了文档流，滚动时位置也不会变。
深夜食堂结论（深夜白天模式切换）
让HTML/CSS/JS/各司其责
应当避免不必要的JS直接操作样式
可以用class来表示状态
纯展示类交互寻求零JS方案
组件指Web页面上抽出来一个个包含模板（HTML），功能（JS）和样式（CSS）的单元。好的组件具备封装性，正确性，扩展性，复用性
通过本次的学习，学会了如何使用flex布局，之前都是使用浮动来让元素定位到想要的位置上，现在可以通过flex布局的方法来进行元素定位操作，对整体页面的元素影响更小，以及了解了Grid布局，然后通过JS案例的分析，让我知道了模块化开发的重要，以及将代码封装的重要，在以后的工作中肯定是会使用模块化开发的，现在积累知识为以后做好准备。
