web开发基础期末自测题答案

第一题考的发基是HTTP状态码。我班上三十七个人，础期测题有二十八个把302和304搞混了。末自302是答案临时重定向，304是发基Not Modified——服务器告诉你，你缓存的础期测题东西还能用，别重新下载了。末自记这个有个土办法：3开头全是答案重定向和缓存相关，但304后面跟的发基是“没改”，302后面跟的础期测题是“去别处”。你要是末自考试时拿不准，就想想浏览器地址栏有没有变。答案变了就是发基302，没变就是础期测题304。

第二题是末自CSS选择器优先级。这道题错得最冤。很多人背了“id大于class大于标签”，但题目给的是`div .box #title`这种组合选择器，算权重时得逐项相加。id是100，class是10，标签是1。`div .box #title`就是1+10+100=111。有个同学写成`#title .box div`，权重还是111，但顺序不影响结果，可他在卷子上写了个“因为后面覆盖前面”，直接扣了一半分。优先级跟顺序没关系，跟权重有关系。权重相同才看谁在后面。

第三题问的是box-sizing。这题我印象深，因为去年我自己也栽过。默认的content-box，你设width:200px，实际占的宽度是200加padding加border。改成border-box，200px就是最终宽度，padding和border往里挤。现在主流做法是全局设`*{ box-sizing:border-box}`，省得每次算尺寸都脑壳疼。但考试题不会问你这个，它问的是“标准盒模型下，一个div宽度设为300px，左右padding各20px，border左右各2px，内容区实际多宽？”答案是256px。你拿300减40再减4，别算反了。

第四题是flex布局。题目给了个容器`display:flex`，三个子项，问`justify-content:space-between`和`space-around`的区别。space-between是两头贴边，中间的间距相等。space-around是每个项目左右都有空间，所以两头的空间只有中间间距的一半。这题画个图就明白了，但考试时没图，你得在脑子里过。我建议你记个生活场景：space-between像三个人排队，第一个人贴墙，最后一个人贴墙，中间人均匀站。space-around像三个人各自站在自己的小格子里，格子宽度一样，但格子之间有空隙。

最后一道大题是写一个简单的响应式导航栏。给的是移动端优先的媒体查询写法。很多人把`@media (min-width:768px)`和`@media (max-width:768px)`写反了。min-width是“至少这么宽才生效”，max-width是“最多这么宽就生效”。移动端优先就用min-width，从窄往宽写。桌面端优先用max-width，从宽往窄写。这题还涉及一个隐藏菜单的常见做法——小屏时用`display:none`把导航链接藏起来，点汉堡图标用JS切class。但考试不考JS，只考CSS部分。你只要写出媒体查询里把隐藏的菜单重新`display:flex`，就算拿到大半分数。

说实话，这套题不算难，但错的人多是因为平时写代码太依赖浏览器自动补全和调试工具。手写代码时，很多细节就露馅了。比如第三题的盒模型，你让浏览器自己算，它永远帮你算对，但考试就是逼你手动算。我的建议是，复习时别光看笔记，拿张白纸，把每个属性的计算过程写一遍。写错了再改，比看十遍都管用。

期末这东西，考的不是你有多聪明，是你有没有把基础抠扎实。web开发这行，框架年年换，但HTML、CSS、HTTP这些底层逻辑十年没大变。你把这几道题弄透了，比背十个新框架的API都值。