网页设计css代码大全

很多人把CSS当成“调颜色的网页”，结果写出来的设计页面一改布局就崩。真正的网页问题不在CSS本身，而在你把它当成了填空表，设计而不是网页一套有层级的规则系统。我见过一个电商首页，设计设计师用绝对定位把每个模块钉死在像素坐标上，网页上线三天后运营要加一个促销标签，设计前端直接重写了整个头部。网页这不是设计CSS的错，是网页写法从一开始就埋了雷。

盒模型是设计所有布局的起点。你写 width: 200px，网页浏览器默认给这个宽度加上padding和border。设计一个200px宽的网页盒子，左右各10px内边距、2px边框，实际占224px。两列并排就溢出。解决办法不是到处减宽度，而是在全局加一句 * { box-sizing: border-box; }。这行代码让padding和border吃进width里面，算账简单得多。我自己的项目里，这几乎是第一行CSS。

浮动曾经是布局主力，现在更多用来做文字环绕图片。清除浮动有几种写法，clear: both 加一个空div最省事但多一个无意义标签。overflow: hidden 触发BFC也能包住浮动子元素，可一旦里面有下拉菜单就会被裁掉。更稳的是给父元素加 display: flow-root，专门为这个场景设计的，没有副作用。浏览器支持已经很好，没必要再写clearfix那一长串。

Flexbox解决了一维排列。导航栏左logo右菜单，父容器 display: flex; justify-content: space-between; align-items: center; 三行搞定。不用算宽度，不用管垂直居中。垂直居中以前要靠 line-height 等于高度，或者 position: absolute; top: 50%; transform: translateY(-50%);。现在 align-items: center 直接完事。有个细节：flex子项默认 min-width: auto，内容过长会撑破容器。加 min-width: 0 或者 overflow: hidden 才能让省略号生效。这个坑我踩过两次才记住。

Grid适合二维布局。后台管理系统的侧边栏加主内容区，display: grid; grid-template-columns: 240px 1fr; 一行代码。响应式更简单，grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 卡片列表自动换行，不用写媒体查询。但Grid不是万能，一维排列用Flex更顺手。别为了用Grid而用Grid。

定位要慎用。position: absolute 脱离文档流，父元素没有定位时它会跑到最近的有定位的祖先那里。常见错误是给一个没有 position: relative 的父元素里的子元素写absolute，结果子元素飞到页面角落。position: fixed 在移动端有键盘弹出时视口变化的问题，底部固定按钮会被顶上去。用 position: sticky 做吸顶导航更自然，但父元素不能有 overflow: hidden，否则失效。

选择器权重是个隐形战场。!important 能不用就不用，一旦用了，后面维护的人只能加更多 !important。ID选择器权重太高，类选择器足够。我习惯用BEM命名，.card__title--active 这种，一眼看出层级关系，也避免嵌套过深。CSS预处理器里 & 嵌套超过三层就该停下来想想是不是结构有问题。

响应式不是只写 @media (max-width: 768px)。移动优先意味着先写小屏样式，再用 min-width 覆盖。字体用 clamp(1rem, 2.5vw, 1.5rem) 可以平滑缩放，不用断点跳变。图片加 max-width: 100%; height: auto; 防止溢出。这些细节堆起来，页面才不别扭。

CSS变量让主题切换变简单。:root { --primary: #3b82f6; } 然后用 var(--primary)。改一个地方全站生效。暗色模式用 @media (prefers-color-scheme: dark) 覆盖变量值，不用重写选择器。但变量不能用于媒体查询的条件里，这是规范限制。

最后说一个观察：很多人CSS写不好，是因为改样式时只看当前元素，不看它在文档流里怎么跟兄弟、父级互动。打开开发者工具，点开Computed面板，看盒模型图，比盲目调数值快得多。CSS没有捷径，但方向对了，少写很多废代码。