CSS样式不生效求助：box1与content1样式无效果问题排查

1. #box1 看不到的核心原因 #

你给#box1设置了position: absolute和right: 1000px，这个right值过大，直接把元素推到了浏览器视口右侧之外，所以你看不到它——不是样式没生效，是位置出了问题。另外float: right和position: absolute冲突，绝对定位元素会忽略浮动属性，直接删掉float就行。

修改示例：

#box1{ 
    border: 2px solid black; 
    width: 30%; 
    height: 80px; 
    padding: 30px 40px 0px 10px; 
    margin-left: 90px; 
    background: grey; 
    position: absolute; 
    right: 20px; /* 调整为合理的视口内数值 */
    /* 删除float: right，绝对定位下该属性无效 */
}

2. #content1 样式无效果的原因 #

• 你只写了border-color: black，但CSS边框需要同时设置border-style和border-width才会显示，单独设置颜色等于没加边框。
• #content1的背景色和父元素#box1完全一致，就算样式生效也看不出来；加上父元素设置了内边距，进一步压缩了content1的显示区域。

修改示例：

#content1 { 
    border: 1px solid black; /* 直接写完整边框属性 */
    position: relative; 
    background-color: #ccc; /* 换浅灰色和父元素区分 */
    height: 100%; /* 改为100%填充父元素 */
    padding: 10px; /* 加内边距避免文字贴边框 */
}

额外优化提示 #

所有带position: absolute的box元素，建议统一用left/right/top/bottom定位，不要混用margin，避免布局混乱；另外box2和box3的height: 29%在父元素body未设置高度的情况下，百分比不会生效，可换成固定高度或给body加height: 100vh。

内容的提问来源于stack exchange，提问作者Ariana Samimi -