嵌套Div元素在不同屏幕尺寸下的白色间隙及CSS焦点样式问题

一、解决嵌套Div的白色间隙问题 #

问题修复要点： #

1. 图片容器右侧间隙：

   • 原#image使用align-content:center无效（flex单行布局需用align-items），且图片未限制尺寸，导致无法填满容器或溢出产生间隙。
   • 调整容器对齐方式，同时限制图片最大尺寸，确保完全适配黑色背景容器。

2. 按钮上方间隙：

   • 部分flex容器错误使用align-content:center（单行布局应使用align-items），导致元素垂直对齐异常；图片作为inline元素存在基线间隙，需改为block类型消除。

关键CSS修改： #

#image {
    display: flex;
    justify-content: center;
    align-items: center; /* 替换align-content为align-items */
    background-color: black;
}

#mainImage {
    max-width: 100%; /* 限制图片宽度不超容器 */
    max-height: 100%; /* 限制图片高度不超容器 */
    display: block; /* 消除inline元素基线间隙 */
}

#mainForm {
    align-self: center;
    display: flex;
    justify-content: space-between;
    align-items: center; /* 替换align-content为align-items */
}

二、解决输入框聚焦背景色不生效问题 #

问题原因： #

Chrome等浏览器会给输入框添加默认的自动填充样式，优先级高于自定义样式，导致设置的明亮背景色被深色默认样式覆盖。

关键CSS修改： #

#mainInput:focus {
    outline: none;
    background-color: rgba(0, 255, 242, 0.306) !important; /* 提高样式优先级 */
}

/* 覆盖浏览器自动填充的背景色 */
#mainInput:-webkit-autofill,
#mainInput:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px rgba(0, 255, 242, 0.306) inset; /* 用内阴影覆盖默认背景 */
}

完整修改后的CSS代码 #

* {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    box-sizing: border-box;
}

#mainContainer {
    display: flex;
    justify-content: center;
}

#window {
    min-width: 600px;
    min-height: 850px;
    max-width: 600px;
    max-height: 850px;
    display: grid;
    border: 3px solid black;
    grid-template-rows: 1fr 0.5fr 0.2fr;
}

#window>div {
    border-bottom: 3px solid black;
}

#window div:nth-child(3) {
    border-bottom: none;
}

#image {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

#mainImage {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

#content {
    display: grid;
    grid-template-rows: 2fr 1fr;
}

#movieSelect {
    border-top: 3px solid black;
}

#movieDetails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    text-align: center;
}

#control {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(153, 65, 65, 0.83);
}

#mainForm {
    align-self: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* 用gap替代margin-right，布局更稳定 */
}

#mainInput {
    padding: 8px;
    font-size: 20px;
    border: 2px solid black;
}

#mainInput:focus {
    outline: none;
    background-color: rgba(0, 255, 242, 0.306) !important;
}

#mainInput:-webkit-autofill,
#mainInput:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px rgba(0, 255, 242, 0.306) inset;
}

#btn {
    padding: 12px 24px;
    border: 2px solid black;
}

#btn:active {
    background-color: rgb(109, 109, 109);
}

#movieSelect {
    display: flex;
    overflow-x: scroll;
}

#movieSelect>button {
    min-width: 118.8px;
    max-width: 118.8px
}

#movieSelect>button:focus {
    background-color: skyblue;
}

内容的提问来源于stack exchange，提问作者legendman