web页面制作实训实践报告

第一个卡住我的地方不是布局，是作实box-sizing。明明设了width:100%，训实加上padding:20px之后整个盒子就撑出父容器，践报右边多出一截。面制我盯着DevTools里的作实盒模型看了快十分钟，才想起默认的训实content-box在搞鬼。改成border-box之后，践报世界安静了。面制这事让我明白，作实很多“页面错位”根本不是训实技术难题，是践报没搞清浏览器那套计算逻辑。

实训前两周都在跟盒模型和浮动打交道。面制老师丢过来一个三栏布局案例，作实左边导航固定宽度，训实右边内容自适应，中间留白。我第一反应是用float:left，写完发现父容器高度塌了，背景色只包住半截。后来加了clearfix——用::after伪元素清浮动，才算把父元素撑开。那个下午我反复改了三遍代码，每次刷新页面看到灰色背景完整覆盖三栏，都有种莫名其妙的踏实感。

Flexbox是第三周才正式用的。之前用浮动和定位拼出来的导航栏，要垂直居中得算line-height，遇到多行文字就崩。换成display:flex加align-items:center之后，两行代码解决。我盯着屏幕愣了一下——原来布局可以这么直接。后来做卡片列表，justify-content:space-between加上flex-wrap:wrap，一行三个卡片自动换行，间距均匀。那种感觉就像从手动挡换成了自动挡。

但Flex也不是万能的。做整页布局的时候，我一开始把body设成display:flex; flex-direction:column，想让footer永远沉底。结果中间内容区域的高度撑不开，页面短的时候footer悬在半空，页面长的时候又正常。后来查了才知道要给main加flex:1。这个flex:1其实是flex-grow:1; flex-shrink:1; flex-basis:0%的简写，意思是把剩余空间全吃掉。改完刷新，footer老老实实贴在底部，不管内容多少。

响应式部分我做得比较粗糙。媒体查询只写了两个断点：768px和480px。在768px以下把三栏改成单栏，导航从水平变成汉堡菜单。汉堡菜单的交互是用纯CSS做的——checkbox加:checked选择器控制菜单展开。没有用JS，因为当时还没学到事件监听。点击那个三道杠图标时，菜单从顶部滑下来，虽然动画有点生硬，但至少能用了。

最后一周在调细节。链接的:hover状态、按钮的:active反馈、表单输入框的:focus轮廓——这些平时浏览网页根本不会注意的东西，自己写的时候才发现缺一个都显得“不对劲”。我给导航链接加了底部边框过渡，鼠标移上去时一条细线从左往右展开，0.3秒的transition。室友路过看了一眼说“挺流畅的”，就这一句话我高兴了半天。

代码写到最后，页面在Chrome里看着没问题，用Firefox打开发现有个圆角没生效，Safari里字体又粗了一圈。跨浏览器兼容这事，真的得亲手试过才知道疼。我后来在border-radius前面补了-webkit-前缀，字体用font-family列了一串备选，从system-ui到Helvetica Neue再到sans-serif。虽然不能保证完全一致，至少不会崩得太难看。

交完作业那天晚上，我把自己写的页面从头到尾滚动了一遍。没有JS框架，没有构建工具，就是一个.html加一个.css。但每个像素的位置都是我手动调出来的。以前觉得“写页面”就是拖控件，现在知道从空白文件开始，一行行敲出结构、样式、交互，那种掌控感是拖拽给不了的。下次想试试Grid布局，听说做二维排版比Flex更顺手。

(责任编辑：百科)