样式和例题这两个词放在一起通常是学习资料里的固定搭配。很多同学学CSS也这样看属性挨个背示例挨个敲但真拿到一个页面需求还是不知道从哪里下手。今天这篇我就把前端样式里最核心的几块拆开讲先捋清楚层叠、盒模型这些底层规则再用例题带你把Flex、Grid、居中和组件样式走一遍最后集中说说那些改样式改到怀疑人生的坑。内容不追求大而全只挑日常高频、面试爱考、以及写页面时真正会卡住的点。适合正在学CSS基础的前端初学者也适合做了几年项目但样式细节一直靠粘贴的开发者。1. 先把样式体系的底层逻辑捋清楚1.1 层叠最终样式不是按书写顺序来的层叠这个词听上去玄乎其实解决的是“冲突时听谁的”。同一个元素身上可能同时命中多个选择器每个选择器都想给同一个属性填值最后必须有个裁判。裁判第一看特异性第二看源顺序。举个例子页面上有一个div.panel同时命中div和.panel两条规则。div { background: #eee; } .panel { background: #ffcc00; }最后背景色是黄色不是灰色。因为类选择器的特异性是(0,1,0)元素选择器是(0,0,1)类更高。如果两条规则特异性一样比如都是类选择器那就看谁写在后头后面的赢。这一点在写覆盖样式时特别重要你后引入的样式文件如果特异性跟原来相同就能覆盖掉旧的不需要加!important。很多人遇到样式不对第一反应是补一个!important。真没必要这么做的结果往往是下一个同学要用更高的!important来覆盖你的!important整个文件最后变成一场互相加码的军备竞赛。我在调试时几乎不看!important只看 DevTools 里的 Styles 面板哪条规则被划掉了哪条规则生效了一目了然。大多数“改了没反应”的问题根源都在覆盖顺序上而不是属性拼写错误。1.2 盒模型宽度不等于你想要的宽度盒模型是CSS的另一个地基。同样是width: 100px在标准盒模型下这100px只算内容区padding 和 border 是另外加的。也就是说.box { width: 100px; padding: 20px; border: 5px solid #333; }这个盒子的实际占位宽度是100 20*2 5*2 150px。很多新手把 padding 加到原本想固定宽度的元素上结果整个页面出现横向滚动条就是没搞懂这一层。如果你希望width直接包含内容和 padding、border那就用.box { box-sizing: border-box; width: 100px; padding: 20px; border: 5px solid #333; }加了border-box之后盒子总宽始终是100px内容区被压缩到100 - 40 - 10 50px。这在响应式布局里几乎成了标配因为你能非常确定地控制最终占位。实际项目里我一般开场就写全局重置*, *::before, *::after { box-sizing: border-box; }这个规则让页面里所有元素的宽度都按同一个逻辑计算心智负担瞬间小很多。面试中只要问到盒模型十有八九会问box-sizing回答完差异再补一句“项目里我全局设成 border-box”基本就过关了。1.3 继承不是所有属性都会“传下去”CSS里有些属性天生会继承设置给父元素后子元素自动带上。比如color、font-size、line-height、text-align这些。但也有大量属性不继承比如width、height、margin、padding、border每个子元素都得单独设置。继承最容易踩的坑藏在表单控件里。浏览器默认让input、button、textarea、select使用系统字体不跟随父级的font-family。所以你在body上写了字体输入框里却依然是默认字体。解决方式是把这些元素显式重置body { font-family: PingFang SC, Microsoft YaHei, sans-serif; } input, button, textarea, select { font: inherit; }font: inherit的意思就是让它们跟父级保持一致。另外链接的color也不会自动继承父级文字颜色浏览器默认给a一个蓝色所以你经常需要显式写a { color: inherit; }。不确定某个属性是否继承的时候最快的办法是打开 DevTools看 Styles 面板里有没有“Inherited from xxx”这个分组一眼就能分辨。2. 布局样式怎么选Flex、Grid、定位三选一2.1 选型判断一维、二维还是重叠布局是CSS里最容易让人纠结的地方尤其现在Flex和Grid都有很好支持。我的判断方法很简单先不碰属性就问自己这一层的结构是什么形状。横向一排、纵向一列是一维布局用Flex行和列都要对齐是二维网格用Grid某个元素要盖在另一个元素上面才考虑定位。方案核心场景常用属性容易踩的坑Flex导航、按钮组、两栏/三栏框架display: flex; justify-content; align-items; gap子项默认不收缩需要 flex-shrink 控制Grid卡片宫格、商品列表、数据面板display: grid; grid-template-columns; gap现代浏览器无大问题但老项目要注意语法position浮层、吸顶、重叠效果position: relative/absolute/fixed; top/left/right/bottom脱离文档流容易遮挡或需要额外层级管理选型不靠背靠看一眼结构就能定。把这一层当成一个盒子如果里面的东西可以按一条线排就Flex如果横竖都有固定轨道就Grid如果纯粹是叠上去的再上定位。这套逻辑我用了很多年基本没出过错。2.2 例题一两栏后台框架用Flex实现最常见的后台页面就是左侧固定宽度菜单右侧自适应内容区。结构很简单div classapp aside classsidebar菜单/aside main classcontent内容区/main /div样式长这样.app { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; background: #2c3e50; color: #fff; } .content { flex: 1; padding: 24px; background: #f5f7fa; }重点在.sidebar的flex-shrink: 0。Flex布局下子项默认可以收缩如果你只在侧栏上写了width: 240px不禁止收缩当视口变窄时侧栏会被压缩到180px甚至更窄界面就垮了。flex-shrink: 0表示“宽度固定不许压缩”。而.content的flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写意思是剩余空间我全吃下。配合min-height: 100vh整个后台不管内容多少都能铺满屏幕高度。以前做这种布局要用float: left加清除浮动侧栏固定宽度主内容区还要算margin-left。现在Flex一行display: flex就解决了这也是我推荐新人直接上Flex而不是继续学浮动布局的原因。2.3 例题二卡片宫格用Grid实现商品卡片、数据卡片、图片画廊这类行列对齐的场景Grid比Flex更自然。做一个三列等宽的卡片宫格div classgrid div classitem卡片1/div div classitem卡片2/div div classitem卡片3/div /div.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .item { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }1fr是“分数单位”repeat(3, 1fr)等价于1fr 1fr 1fr把容器宽度平均分成三份。gap统一控制间距代替以前margin加nth-child的骚操作。这个布局用Flex也能写每个item设flex: 0 0 calc((100% - 32px) / 3)还要考虑换行和最后一行对齐写起来繁琐得多。Grid还有个很实用的写法让卡片自动换行并适应容器宽度。.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }minmax(220px, 1fr)规定每列最小220px如果空间允许就平均伸展。容器足够宽就多放几列不够就自动换行很多响应式商品列表就是靠这一行代码撑起来的。在做“先移动端后桌面端”的页面时这个方案能少写很多媒体查询。3. 高频组件样式例题拆解3.1 例题三水平垂直居中的完整方案居中大概是CSS里被问过最多的问题。先分清楚居中到底是什么在居中text-align: center只能让文字和行内元素水平居中margin: 0 auto能让固定宽度的块级元素水平居中但前提是元素设置了宽度。遇到一个同时要水平和垂直居中的场景最稳定的做法是用Flexdiv classcenter-wrap div classcenter-box我要居中/div /div.center-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; }justify-content: center控制主轴方向居中align-items: center控制交叉轴方向居中。Flex默认主轴是水平方向所以这两个属性一组合水平和垂直同时居中。如果你用的是flex-direction: column那主轴变成纵向justify-content控制的就变成垂直方向了容易绕晕但逻辑是固定的。另一种老牌方案是用绝对定位加transform.center-wrap { position: relative; } .center-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }把元素的左上角先移到容器中心再通过translate(-50%, -50%)把元素自身的一半拉回来。这个方案兼容老浏览器但有个副作用定位和transform都可能创建层叠上下文如果页面里有复杂层级关系会影响z-index。所以现在我做居中默认先上Flex只有遇到需要兼容非常老的国产浏览器时才考虑transform。还有一个很容易被忽略的居中技巧在Flex容器里子项设置margin: auto也能居中而且不用写justify-content和align-items。因为Flex布局里的automargin会吸收剩余空间。比如搜索框右侧的按钮组需要整体靠右对齐我会在第一个元素上加margin-right: auto比挨个调布局轻松很多。3.2 例题四卡片样式与悬浮交互卡片是页面里出现频率最高的组件之一样式看着简单但细节不少。先看一个基础卡片div classcard div classcard-cover/div div classcard-body h3卡片标题/h3 p这里是一段描述文字用来撑起一定高度。/p /div /div.card { width: 260px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, .12); } .card-cover { height: 120px; background: linear-gradient(135deg, #667eea, #764ba2); } .card-body { padding: 16px; }最容易忽略的是overflow: hidden。卡片顶部放图片时如果图片本身不够圆角会直接盖住卡片的圆角边框看起来非常生硬。给卡片加上overflow: hidden后所有子内容都会被裁切成圆角范围。另一个细节是transition只写需要变化的属性不要图省事写transition: all .2s ease不然hover时字体颜色、背景色全都跟着“过渡”视觉上反而很吵。box-shadow的四个值分别是水平偏移 垂直偏移 模糊半径 阴影颜色。默认阴影水平垂直偏移为0看起来就是一个均匀的弥散边。hover时把偏移加大、颜色加深视觉上就有“卡片被从页面里抬起来”的效果。这个套路被无数组件库使用值得自己动手调一遍手感比看文档管用。3.3 例题五响应式导航栏导航栏的响应式是绕不开的。桌面端一行菜单手机端变成纵向这个需求看起来简单但写的时候有很多隐藏要求。先给一个基础结构nav classnav a href# classbrandLogo/a ul classnav-links lia href#首页/a/li lia href#产品/a/li lia href#关于/a/li /ul /nav.nav { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #333; } .nav-links { display: flex; list-style: none; gap: 16px; margin: 0; padding: 0; } .nav-links a { display: inline-block; padding: 12px 8px; color: #fff; text-decoration: none; } media (max-width: 600px) { .nav { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; } .nav-links a { display: block; width: 100%; } }核心思路是桌面端用flex-direction: row默认移动端切换到column菜单项从上到下排列。gap: 16px替代了以前给每个li写margin的做法少写不少代码。移动端还有一个常被忽略的点点击区域。手机上手指接触面积大约需要44x44px如果菜单项只有文字那一点点区域可点很容易误触或点不中。所以我在做移动端导航时会把每个菜单项补上至少12px垂直padding和合适宽度让整行都能点。这个细节不是样式代码本身能体现的但直接影响用户手感。媒体查询的断点不要死记成某个设备宽度而是看内容在什么宽度下开始变得难看再定断点。4. 改样式最容易踩的五个坑4.1 margin折叠间距突然“消失”了两个垂直排列的兄弟元素第一个设置了margin-bottom: 30px第二个设置了margin-top: 20px你预期它们之间的间距是50px实际上只有30px。这在CSS里叫“外边距折叠”垂直方向上相邻的外边距会合并取较大的那个值而不是相加。.divider-top { margin-bottom: 30px; } .divider-bottom { margin-top: 20px; }间距最终是30px。父子元素之间也会发生折叠比如父元素没有padding、border、overflow之类的隔离子元素的margin-top会“穿透”到父元素身上把父元素整个顶下去。我见过不少新手给子元素加了margin结果父元素跟着位移还以为定位写错了。解决方式很简单要么只使用一个方向的margin不搞上下同时设要么在父级加overflow: hidden、padding: 1px或display: flow-root之类触发BFC把折叠关掉。理解原理后写间距时我会习惯性只设置一个方向比如统一用margin-bottom不混用margin-top这能避免一大类问题。4.2 浮动高度塌陷父容器高度被儿子“带崩”现在新项目很少用浮动来布局了但老代码里到处都是。最典型的问题是父级没有高度子元素一浮动父级高度直接变成0。div classparent div classchild/div /div.child { float: left; height: 100px; }辛辛苦苦给子元素设了100px高度结果父容器一点都没撑起来背景颜色和边框全都不显示。原因是float让子元素脱离了文档流父级在计算自身高度时根本不会把它算进去。解决的标准姿势是清除浮动我给老项目改bug时最爱用的是伪元素方案.parent::after { content: ; display: block; clear: both; }这段伪元素高度为0像一块垫子在后面把浮动元素“往上托”父级也就有了正常高度。也可以用display: flow-root一行搞定但老浏览器支持有限。如果你在维护老代码建议把这个clearfix写成通用工具类凡是包含浮动子元素的容器直接套上省得每个地方都复制一遍。4.3 z-index失效层叠上下文才是幕后黑手写弹窗和遮罩时很多人会给元素一个很大的z-index: 9999结果发现还是被一个z-index: 1的元素盖住了。问题往往出在层叠上下文。当一个元素设置了opacity小于1、transform、filter、position: fixed或主动z-index时它会创建一个“层叠上下文”就像一个独立的小世界。小世界里的子元素再大也只能在父级的小世界内部比较层级不能跟外面的兄弟元素抗衡。举一个常见场景父级A为了做淡入动画设置了opacity: 0.8还带一个transform: translateY(0)父级B只是普通定位元素。即使A里有个子元素设置了z-index: 9999B只要设置了z-index: 1层级依然可能比A高因为A的opacity把它整个儿子们“封”在了同一个上下文里。处理办法不是继续加z-index而是先检查这条链路上谁创建了层叠上下文。能去掉opacity就去掉能不用transform就不用。如果必须保留半透明背景优先用rgba()的背景色而不是opacity这样既不影响透明度也不会创建额外的上下文。层级比较只在兄弟之间进行这一条记住了很多“离奇遮挡”都能瞬间解释通。4.4 移动端1px边框的真实处理移动端项目里最让人难受的样式问题之一就是1px边框。设计稿上写的是1px在视网膜屏幕上却显示成2px甚至3px因为高分辨率屏幕的物理像素和设备像素比不一致。直接改小像素值不靠谱0.5px只在部分浏览器生效。我常用的方案是利用伪元素加缩放.hairline { position: relative; } .hairline::after { content: ; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1px solid rgba(0, 0, 0, .1); transform: scale(0.5); transform-origin: 0 0; pointer-events: none; }先把边框画成2倍大小再用transform: scale(0.5)缩回去物理上正好占用1个设备像素。transform-origin: 0 0保证缩放时从左上角开始不会位移。如果只需要底部一条线就保留伪元素的border-bottom把其他边去掉。这个方法唯一需要注意的是position: relative不能被别的样式覆盖否则伪元素基准就错了。实际上很多第三方组件库里也能看到类似思路只不过被封装成了.hairline之类的工具类。自己做一遍比直接改组件库参数更能理解为什么需要这么绕一圈。4.5 优先级和覆盖为什么新加的class不生效给元素加了一个class样式却完全没变化。打开DevTools一看新写的样式被划掉了旧的规则还稳稳地占领着。这是典型的优先级问题。选择器权重是四组数字比较的内联样式、ID选择器、类/属性/伪类选择器、元素/伪元素选择器。比如这两条规则都作用于同一个链接ul.nav li a { color: red; } .nav li a { color: blue; }第一条权重大于第二条所以链接是红色即使第二条写在后面也没用。因为第一条里多了一个ul元素选择器整体权重多了一档。很多人在覆盖组件样式时拼命加class结果发现不管用就是因为组件内部的选择器特异性更高。我自己的习惯是能少用ID选择器就少用因为ID特异性太高后期覆盖非常痛苦写组件对外可定制样式时会刻意用类选择器而不是多层后代选择器给使用方留出覆盖空间。排查“样式不生效”时先看DevTools里被划掉的规则计算一下选中的这条权重是多少再决定是加class还是提权。鼠标瞎点“查看代码”再猜个几百遍不如一次把Computed面板看明白。写样式这些年我最深的体会是样式问题不是靠背属性解决的而是靠一套稳定的排查路径。拿到一个异常先在计算样式里看是哪条规则成了最终赢家再往前查优先级和层叠上下文最后才动手改。配合最小复现代码和DevTools的实时调整几乎所有“鬼打墙”的问题都能定位到根上。上面这些例题和踩坑记录都是实际项目里反复出现过的花点时间自己动手敲一遍比囤一堆速查表有用得多。