文章目录一、CSS 选择器及其优先级伪元素作用伪类的作用伪类与伪元素区别二、CSS 属性的继承性1. 无继承性的属性2. 有继承性的属性三、Display 属性详解1. 常用属性值及其作用2. block、inline 与 inline-block 的区别四、隐藏元素的方法对比五、 CSS3 新特性与动画1. CSS3 新功能2. Transition (过渡) vs Animation (动画)3. 伪类 (:) 与 伪元素 (::)六、伪类与伪元素的本质区别七、 文本溢出处理八、 布局单位与响应式1. 常见单位2. CSS 预处理器与后处理器九、用css实现单行多行文本的溢出1. 单行文本溢出省略2. 多行文本溢出省略 (WebKit 方案)十、Flexbox1. 容器与项目2. 容器属性3. 项目属性flex十一、BFC块格式化上下文BFC 的布局规则原理如何触发 BFCBFC 的实际应用场景十二、三栏布局的实现十三、CSS 中隐藏元素的方法十四、盒子模型盒子模型的组成部分两种盒子模型1. 标准盒子模型 (Standard Box Model)2. 怪异盒子模型 / IE 盒子模型 (Border Box Model)十五、Tailwindcss与传统css区别一、CSS 选择器及其优先级CSS 优先级由四个等级决定通常表示为(a, b, c, d)权重。选择器格式类型权重 (简易值)示例内联样式Style 属性1000stylecolor: red;ID 选择器#id100#header类/属性/伪类.class / [ref] / :hover10.menu,li:last-child标签/伪元素div / ::after1div,li:after通配符/关系选择器* / / 0*,ul li,h1 p注意事项!important声明的样式优先级最高应慎用后来者居上如果优先级相同最后出现的样式生效继承最低继承得到的样式优先级最低趋于 0来源顺序内联样式 内部样式 外部样式 浏览器用户自定义 浏览器默认伪元素作用CSS伪元素用于在不改变HTML结构的情况下为页面元素的特定部分添加样式和内容常见类型与场景内容插入::before在内容前插入常用于加图标、装饰线::after在内容后插入常用于清除浮动或装饰注必须配合content属性文本细分::first-letter选中首字母做“首字下沉”::first-line选中首行文字用户界面::selection修改用户鼠标划选文字时的背景色和文字色。::placeholder修改输入框占位符的样式伪类的作用伪类的作用是根据元素的状态或位置特征来选择元素而不需要添加额外的类名或ID用CSS代替JS去感知元素的动态状态和结构位置实现交互反馈、样式美化和代码简化常见类型与场景用户交互状态:hover鼠标悬停:active鼠标点击那一刻:focus元素获得焦点如输入框被选中结构性****伪类:nth-child(n)选择父元素下的第 n 个子元素:first-child/:last-child选择第一个或最后一个子元素:not(selector)排除掉符合条件的元素表单/链接状态:checked选中的单选框或复选框:disabled禁用的表单元素:visited用户访问过的链接伪类与伪元素区别特性伪类 (Pseudo-class)伪元素 (Pseudo-element)本质描述元素的特殊状态描述元素的特殊部分虚拟节点语法使用单冒号 : (如 :hover)使用双冒号 :: (如 ::after)DOM 影响只是对现有元素添加类样式相当于在 DOM 中添加了一个虚拟标签数量限制一个元素可以同时拥有多个伪类一个元素通常只能定义一个 ::before 和一个 ::after二、CSS 属性的继承性1. 无继承性的属性布局/盒子模型display,width,height,margin,border,padding背景/定位background,position,float,clear,z-index,overflow文本装饰vertical-align,text-decoration,text-shadow,white-space2. 有继承性的属性字体系列font-family,font-weight,font-size,font-style文本系列text-indent,text-align,line-height,word-spacing,letter-spacing,color其他visibility,cursor,list-style三、Display 属性详解1. 常用属性值及其作用属性值作用none元素不显示并从文档流中移除block块类型。独占一行可设宽高默认宽度为父元素宽度inline行内元素。同行显示不可设宽高宽度由内容撑开inline-block行内块。同行显示但可设置宽高inherit从父元素继承 display 值2. block、inline 与 inline-block 的区别block独占一行支持所有盒子模型属性width/height/margin/paddinginline同行显示。设置宽高无效水平方向的 margin/padding 有效垂直方向无效inline-block结合了两者的特性既能同行显示又能设置宽高四、隐藏元素的方法对比方法占据空间响应事件触发机制display: none否否触发重排 (Reflow)visibility: hidden是否触发重绘 (Repaint)opacity: 0是是重绘position: absolute否否移出可视区clip-path: circle(0)是否裁剪隐藏transform: scale(0)是否缩放隐藏五、 CSS3 新特性与动画1. CSS3 新功能选择器如:not(), 伪类增强视觉圆角 (border-radius), 阴影 (box-shadow), 线性渐变 (gradient)布局多列布局 (multi-column),Flex 布局,Grid 布局变换transform旋转、缩放、倾斜、平移2. Transition (过渡) vs Animation (动画)Transition强调状态过渡需要事件触发如:hover只有起始和结束两个关键帧Animation强调循环和复杂序列无需触发事件支持keyframes定义多个关键帧3. 伪类 ( 与 伪元素 (:伪类用于选择元素的特定状态如:hover,:active伪元素用于创建不在 DOM 树中的虚拟元素如::before,::after。CSS3 规范建议伪元素使用双冒号六、伪类与伪元素的本质区别维度伪类 (Pseudo-classes)伪元素 (Pseudo-elements)逻辑本质已有元素的特殊状态不存在于 DOM的虚拟元素数量关系一个元素可以同时拥有多个状态通常用于选取元素的特定部分或生成额外内容标准语法单冒号:双冒号::是否产生新内容❌ 否只改变现有元素样式✅ 是可以插入新内容需配合content典型代表:hover,:active,:first-child,:nth-child::before,::after,::first-line,::selection七、 文本溢出处理单行文本溢出.single-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}多行文本溢出 (WebKit).multi-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;/* 显示行数 */overflow:hidden;}八、 布局单位与响应式1. 常见单位px绝对像素物理像素与设备相关%相对于父元素对应属性的百分比em相对于父元素的字体大小rem相对于根元素 (html) 的字体大小响应式首选vw/vh相对于视口Viewport宽高的 1%2. CSS 预处理器与后处理器预处理器 (Sass/Less)提供变量、嵌套、Mixin 等编程特性提高代码复用性后处理器 (PostCSS)如autoprefixer在编译后自动添加浏览器私有前缀处理兼容性九、用css实现单行多行文本的溢出1. 单行文本溢出省略原理是强制文本不换行并将超出容器的部分隐藏最后用省略号...代替CSS实现.single-line { width: 200px; /* 必须设置宽度 */ overflow: hidden; /* 隐藏超出部分 */ white-space: nowrap; /* 强制不换行 */ text-overflow: ellipsis; /* 显示省略号 */ }2. 多行文本溢出省略 (WebKit 方案)CSS实现.multi-line { width: 200px; display: -webkit-box; /* 必须结合的属性将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式垂直 */ -webkit-line-clamp: 3; /* 限制显示的行数 */ overflow: hidden; /* 超出隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ }十、Flexbox1. 容器与项目Flexbox 由两个核心角色组成Flex Container弹性容器父元素。通过设置display: flex或display: inline-flex开启Flex Items弹性项目容器内的直接子元素2. 容器属性以下属性作用于父容器决定子元素的整体排列规则属性描述常用值flex-direction定义主轴方向水平或垂直row (默认), column, row-reverseflex-wrap定义如果一行排不下是否换行nowrap (默认), wrapjustify-content主轴上的对齐方式flex-start, center, space-between, space-aroundalign-items交叉轴上的对齐方式单行stretch (默认), center, flex-startalign-content多行在交叉轴上的对齐方式space-between, center3. 项目属性以下属性作用于子元素决定单个项目的伸缩行为order属性用来定义项目的排列顺序。数值越小排列越靠前默认为0flex-grow定义项目的放大比例如果有多余空间项目占多少份flex-shrink定义项目的缩小比例如果空间不足项目缩小多少flex-basis在分配多余空间之前项目占据的主轴空间默认autoflex简写属性通常建议使用flex: 1表示项目自动填满剩余空间align-self允许单个项目覆盖父容器的align-items设置flexflex: 0 1 auto是属性flex的**默认值**它是由三个子属性组成的简写分别代表了弹性项目在空间分配时的行为规则参数属性值含义第一个值flex-grow0不放大。即使容器有剩余空间该项目也不会扩展占据多余空间第二个值flex-shrink1收缩。如果容器空间不足该项目会随其他项目一起等比例缩小以防止溢出第三个值flex-basisauto自动基准。项目的初始大小取决于它自身的内容width/height或设定的尺寸flex: 1(即flex: 1 1 0%)表现它会尽可能地放大占据所有剩余空间并且会平分空间。常用于等分列布局flex: none(即flex: 0 0 auto)表现既不放大也不缩小无论容器多大或多小它都保持内容本身的尺寸flex: auto(即flex: 1 1 auto)表现会根据内容大小作为基准但既能放大填满剩余空间也能在空间不足时缩小十一、BFC块格式化上下文BFC 是一个独立的隔离容器。容器内部的元素布局无论如何变化都不会影响到外部元素反之外部元素也不会干扰 BFC 内部BFC 的布局规则原理当一个元素触发了 BFC 后它会遵循以下渲染规则内部垂直排列内部的 Box 会在垂直方向上一个接一个地放置垂直距离由 Margin 决定属于同一个 BFC 的两个相邻 Box 的上下外边距Margin会发生重叠Collapse左边界对齐每个元素的左外边距与包含块的左边界相接触即使有浮动也是如此不会与浮动元素重叠BFC 的区域不会与浮动float元素产生的区域重叠这是实现自适应两栏布局的关键独立隔离BFC 是一个独立的容器里外的元素互不干扰计算高度包含浮动计算 BFC 的高度时浮动元素也会参与计算这解决了高度塌陷问题如何触发 BFC根元素html天然的 BFC浮动元素float值为left或right绝对定位元素position值为absolute或fixed特定的 display 属性inline-block、table-cell、flex、grid等溢出处理overflow值不为visible如hidden、auto、scrollBFC 的实际应用场景防止外边距重叠现象两个垂直相邻的div上一个设margin-bottom: 20px下一个设margin-top: 30px结果它们之间的间距是30px而不是50px。解决将其中一个div包裹在另一个 BFC 容器中由于它们不再属于同一个 BFC重叠就会消失。清除内部浮动 (高度塌陷)现象父元素没设高度子元素全部float导致父元素高度变为 0解决给父元素设置overflow: hidden触发 BFC。根据规则BFC 在计算高度时会包含浮动子元素实现自适应两栏布局现象左侧浮动右侧文字会环绕在左侧元素下方解决给右侧元素触发 BFC例如overflow: hidden。此时右侧元素会变成一个矩形块不与左侧浮动元素重叠从而实现完美的侧边栏 自适应主内容的布局十二、三栏布局的实现Flex 布局.container { display: flex; } .left, .right { width: 200px; flex-shrink: 0; /* 防止被压缩 */ } .main { flex: 1; /* 占据剩余所有空间 */ }Grid 网格布局.container { display: grid; grid-template-columns: 200px 1fr 200px; }十三、CSS 中隐藏元素的方法opacity: 0元素依然占据空间且会响应点击事件filter: opacity(0)常用于多重滤镜组合如模糊、对比度display: none彻底移除。元素不占位不响应事件。由于改变了布局切换时会触发重排Reflow性能开销最大visibility: hidden隐身。元素占位但不响应事件scale(0)元素缩放到 0依然占位translate(-9999px, 0)将元素移出视野十四、盒子模型盒子模型的组成部分一个盒子从内到外由四个部分组成Content (内容)盒子的核心显示文本、图像或视频Padding (内边距)内容与边框之间的透明区域Border (边框)围绕在内边距和内容外的边框Margin (外边距)边框外的区域用于撑开盒子与盒子之间的距离两种盒子模型CSS 中有两种主要的盒子模型它们计算盒子实际总宽高的方式完全不同1. 标准盒子模型 (Standard Box Model)这是浏览器的默认模式。属性box-sizing: content-box;计算公式实际宽度 width padding(左右) border(左右)实际高度 height padding(上下) border(上下)直观理解你设置的width仅仅是内容的宽度。增加 padding 或 border 会把盒子“撑大”。2. 怪异盒子模型 / IE 盒子模型 (Border Box Model)属性box-sizing: border-box;计算公式实际宽度 width实际高度 height直观理解你设置的width已经包含了内容、padding 和 border。增加 padding内容区域会自动收缩但盒子的总大小不变避免由于内边距和边框导致的布局溢出问题特性标准盒模型 (content-box)怪异盒模型 (border-box)width 包含仅 ContentContent Padding Border常用场景基础学习、默认属性实际项目优点符合物理直觉布局更可控不会因为加了边框就撑破容器十五、Tailwindcss与传统css区别维度传统 CSS / CSS ModulesTailwind CSS开发速度需要在 HTML 和 CSS 文件间来回切换直接在 HTML 中编写无需离开页面命名压力极高.card-wrapper-inner-btn零命名除非使用 apply包体大小随业务增加线性增长固定上限只打包用到的原子类通常极小维护成本容易产生冗余代码不敢随便删 CSS安全。删掉 HTML样式自动“消失”一致性容易出现 13px 和 14px 混用强制使用预设规范如 spacing-4