为何设置position:relative后div宽高不生效，加后缀分号就正常？

原理说明 #

这是CSS解析规则的正常表现，核心和CSS对空白符、声明分隔符的处理逻辑相关：

1. CSS会忽略代码中的所有换行、空格、制表符等空白字符，仅靠特定符号区分语句结构
2. 单条CSS声明的格式为属性名: 属性值;，分号是多个声明之间的强制分隔符，只有遇到分号，浏览器才会判定当前声明结束、下一个声明开始。

你给出的未加分号的代码片段：

position:relative

   width:300px;

浏览器实际会忽略换行和空格，读取为position:relative width:300px;：

• 从position:之后到下一个分号之前的所有内容，都会被判定为position属性的取值
• relative width:300px不属于position的合法取值（合法取值仅包括static/relative/absolute/fixed/sticky等），因此整条position声明会被浏览器判定为无效、直接丢弃
• 同时width被包含在了position的属性值片段中，不会被识别为独立的CSS属性，因此width:300px的配置也随之失效

此时.Container的生效样式只有未被影响的height:300px、background:yellow，宽度默认继承块级元素的auto特性，撑满父容器的可用宽度，所以会呈现你观察到的响应式表现。

当你在position:relative后补充分号后，声明分隔符生效，浏览器可以正确识别position:relative和width:300px为两条独立的有效声明，所有配置都能正常生效，容器就会按300px*300px的尺寸渲染。

补充：CSS规则中最后一条声明后面可以不加分号，因为没有后续声明需要分隔，你代码中div.PositionMe的background:red后无分号也能正常生效，就是这个原因。

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