1.div中直接添加p标签之类的元素会使得上下留白

直接使用带文字的div,不会使得上下留白撑开

2.div里面的div不能排成一行

【Web】基础网页布局一些小问题记录
对子div使用display:inline-block

3.使用inline-block后,标签下方出现留白

【Web】基础网页布局一些小问题记录
对该标签使用vertical-align: bottom;

4.二级菜单栏的使用定位的时候出现在比较远的地方(重点)

【Web】基础网页布局一些小问题记录
后来经过排查才知道我对于父元素也就是列表项li应该设置定位属性,否则找到向上具有定位属性的元素进行绝对定位:position:absolute这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性父级元素进行绝对定位。如果不存在就逐级向上排查,直到相对于body元素,即相对于浏览器窗口
【Web】基础网页布局一些小问题记录关键代码(按照自己喜好定位咯):
【Web】基础网页布局一些小问题记录
这里说一下,如果你是用position:relative它还是会占用该元素在文档中初始的页面空间,通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置,然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。这么做的结果就是会撑开菜单栏,就像这样:

【Web】基础网页布局一些小问题记录撑开了,是不会很丑?

相关文章:

  • 2021-06-22
  • 2021-11-03
  • 2021-11-28
  • 2021-11-04
  • 2021-09-30
  • 2021-04-30
  • 2021-08-20
  • 2021-12-08
猜你喜欢
  • 2021-11-19
  • 2021-10-08
  • 2021-11-25
  • 2021-04-21
  • 2021-10-09
相关资源
相似解决方案