前端开发过程小知识点记录（开发过程实时更新）

1.#main div 距离页面顶部和左边有间距，但是并没有人为设置

出现现象图：

 原因：大多数浏览器会为 body 和 html 元素添加默认的外边距。可以通过重置这些样式来解决此问题。

解决办法：在css中清除浏览器的默认样式

html, body { margin: 0; /* 清除默认外边距 */ padding: 0; /* 清除默认填充 */ }

2.div 的flex 样式编写

如果要让一个父div内部的多个子div能水平排布，则：

        <div id="top">
                    <div id="top_left">
                        <div id="top_left_content">
                        </div>
                    </div>
                    <div id="top_middle">
                        <div id="top_middle_content">
                        </div>
                    </div>
                    <div id="top_right">
                        <div id="top_right_content"></div>
                    </div>
                </div>

#top {
  /* border: 0.5px solid rgb(0, 81, 255); */
  width: 99.8%;
  height: 14%;
  
  background-image: url("../images/01_top_background.png");
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position: center; */
  background-position: top left;

  display: flex;
  /* 设置为 Flexbox 容器 */
  align-items: center;
  /* 在交叉轴（垂直方向）上居中对齐子元素 */

}
#top_left {
  flex: 0 0 25%;
  /* 不增长, 不缩小, 基础宽度为 30% */
  height: 100%;
  /* 高度与父元素相同 */
  /* background-color: rgba(255, 0, 0, 0.5); /* 红色背景 */
  border: 1px solid red;
}

#top_middle {
  flex: 0 0 45%;
  /* 不增长, 不缩小, 基础宽度为 40% */
  height: 100%;
  /* 高度与父元素相同 */
  background-color: rgba(0, 255, 0, 0.5);
  /* 绿色背景 */
}

#top_right {
  flex: 0 0 30%;
  /* 不增长, 不缩小, 基础宽度为 30% */
  height: 100%;
  /* 高度与父元素相同 */
  background-color: rgba(0, 0, 255, 0.5);
  /* 蓝色背景 */
  border: 1px solid red;
}

3.一个div内的背景图，正常浏览器访问正常，当浏览器全屏显示时左侧部分图片超出不显示问题解决

将background-position: center;修改为：background-position: top left;

 

完整代码：

#top {  
    width: 99.8%;  
    height: 14%;  
    
    background-image: url("../images/01_top_background.png");  
    background-size: cover; /* 保持覆盖 */  
    background-repeat: no-repeat;  
    background-position: top left; /* 从左上角开始显示 */  

    display: flex;  
    align-items: center;  
}