网页布局-bug1

【背景】

笔者正在尝试复现菜鸟教程的静态网页（仅使用html，css）

（注：纯小白，以下见解均为我现在的看法，可能片面，如有不足请指正）

【理解】

1、<div> 即一个盒子，这个盒子里能够嵌套很多个小盒子，这些盒子共同组成了网页的布局。那些css样式作用的范围为整个盒子，但是就近原则。第一级的div即最外层的大框，第二级包含两个div，他们的样式如果未设置则和大的div一样。

2、flex

假设你在最外层的div设置了display：flex，那么内部的div排列方式为水平。每一个div都有自己的作用范围。需要清楚，对一个div设置flex样式，那他作用的对象和影响的范围就是那个框。

- 属性：

https://juejin.cn/post/6844904116141948936 （flex布局介绍）

3、网页布局

本质：让一个个内容块按你的意愿排好。有很多方式。

---

【BUG】

感悟：1、简单的复制也不能无脑做，要时刻注意div的位置和层级关系，否则就会出问题。

2、了解浏览器渲染网页的原理可以帮助我们找bug。

浏览器渲染原理-通俗易懂版本_通俗易懂的浏览器渲染原理-CSDN博客

浏览器渲染原理_浏览器是如何渲染页面的?-CSDN博客

3、最好有一个对网页制作的大概框架、流程的认识。

我现在的认识为：先布局（弄清楚每一级元素究竟有哪些），再填充，最后美化

感觉不是很难，重要的是脑子要清楚及细心。

（注意总结技巧、易错点、细节问题）

---

需要实现多个重复块垂向排列时，复制代码要注意</div>的位置。<div>即块，在网页上的表现为一个小盒子。（可用*{border：1px solid;}使块的边框可视化）。当排版不如你意时，检查复制代码的位置有没有错误，有没有复制到别的盒子里去。

我复制的时候发现一个问题：最外面大盒子的</div>总是会消失，要给他加上，否则复制的代码不会按你希望的显示。

我的：

要做的：

问题：布局有问题

光看代码看不出来什么的，要去浏览器 检查

看在浏览器中div的嵌套关系，是否存在错误的等级关系。

找bug先找大框架的，再逐层往下找。

比如我这里的问题是，我需要五个同级的div，但是现在只有三个，导致了布局不合我意。

于是找到问题了：布局-div

感悟：找bug-用检查工具

以下视频为B站具体讲如何使用调试工具的:
浏览器调试工具精讲-Chrome Dev Tools