这是我参与2022首次更文挑战的第18天
一、网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子。
通过CSS浮动、定位 可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
- 标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。 - 浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。 - 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
二、元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来。
当前阶段主要的显示与隐藏：display 显示隐藏；visibility 显示隐藏；overflow 溢出显示隐藏。
display 显示隐藏元素 但是不保留位置
visibility 显示隐藏元素 但是保留原来的位置
overflow 溢出显示隐藏 但是只是对于溢出的部分处理 - display 显示隐藏
display 属性用于设置一个元素应如何显示，是隐藏元素而不是删除元素。
1）display: none ；隐藏对象
2）display：block ；除了转换为块级元素之外，同时还有显示元素的意思。
display 隐藏元素后，不再占有原来的位置。 - visibility 显示隐藏
visibility 属性用于指定一个元素应可见还是隐藏。
1）visibility：visible ; 元素可视
2）visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用 visibility：hidden。
如果隐藏元素不想要原来位置，就用 display：none (用处更多 重点）。 - overflow 溢出显示隐藏
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。
