伪元素

在CSS中，::before和::after伪元素是非常实用的工具，它们允许我们在不修改HTML结构的前提下，通过CSS向元素前后插入内容。虽然看起来只是加点小装饰，但在实际开发中用途很广。 清除浮动（Clearfix） 这是::after一个非常经典的用法。当内部元素都浮动了，父容器可能会“塌陷”…

::marker伪元素用于自定义列表项标记样式，如改变颜色、大小和字体。可应用于ul、ol、li元素，支持color、font-size、font-weight、text-shadow等属性，示例包括将项目符号设为红色或加大编号字号。虽不支持content完全替换内容，但可结合计数器实现“第X条”效…

利用CSS渐变与透明度可创造丰富视觉效果，核心在于rgba()颜色模式与linear-gradient、radial-gradient等函数的结合。通过调整颜色透明度实现从半透明到全透明的平滑过渡，如从红色到透明的线性渐变：background: linear-gradient(to right, …

浮动表格会脱离文档流导致布局错乱，引发父容器塌陷和内容重叠；应避免对表格元素使用float，推荐用text-align、flex或grid等现代布局替代，并通过clear或包裹容器清除浮动影响。 浮动（float）在CSS中常用于实现文字环绕图片或创建多栏布局，但当它被应用到表格（ table ）或…

CSS选择器通过多样性和组合能力实现精准样式控制，提升开发效率与代码可维护性。 CSS选择器是前端开发中不可或缺的基石，它们是告诉浏览器将哪些样式应用到HTML文档的哪些特定部分的指令。理解并熟练运用这些选择器，是编写高效、可维护且响应迅速的CSS代码的关键。说白了，就是精准定位你要“打扮”的HTM…

overflow: hidden触发BFC，使父容器包裹浮动子元素，解决高度塌陷；2. 结合float实现两栏自适应布局，兼容性好；3. 兼具隐藏溢出与清除浮动效果，适用于旧式布局，但现代推荐使用Flex或Grid。 浮动元素常导致父容器高度塌陷，而 overflow: hidden 能触发BFC（…

使用float属性可实现元素左右浮动，常用于图文环绕或布局。设置float:left或right使元素左或右对齐，但会脱离文档流导致父容器塌陷，需通过clear:both、overflow:hidden或伪元素::after清除浮动。现代布局推荐使用Flexbox或Grid，但float在简单对齐和…

答案：CSS按钮悬停效果通过色彩变化提供交互反馈，提升可用性与视觉吸引力。核心是利用:hover伪类和transition实现平滑颜色过渡，如背景、文字、边框色变化；进阶可结合渐变、伪元素、box-shadow和transform创造动态效果。设计时需遵循品牌一致性、对比度达标、符合用户心理预期，并…

浮动元素宽高由内容决定，未设尺寸时收缩包裹内容，父容器易高度塌陷；需用clearfix或BFC解决；margin不合并但需防溢出；混用布局时易错位，现代开发推荐Flex或Grid替代。 浮动元素的宽高计算在CSS布局中容易引发意料之外的结果，尤其在未明确设置尺寸或与其他布局方式混用时。掌握其行为特点…

overflow属性可清除浮动、控制弹性与网格布局溢出、隐藏滚动条。通过触发BFC包裹浮动元素，结合text-overflow实现省略号，设置min-width:0使flex项目收缩，grid中独立滚动，及伪元素或::-webkit-scrollbar隐藏滚动条，提升布局控制力。 在CSS布局中，o…