外边距合并是CSS中垂直相邻块级元素上下外边距相遇时合并成一个外边距的现象合并后取较大值这种现象只发生在垂直方向触发条件包括相邻兄弟元素父元素与首尾子元素间无边框内边距等情况以及空块级元素外边距合并可能导致布局不符合预期如间距计算错误等问题解决方案包括使用边框内边距设置overflow属性使用浮动定位或flexgrid布局现代CSS提供了gap属性等新方法控制间距调试时可使用开发者工具或临时边框法CSS规范明确定义了正负外边距合并的不同计算方式理解并合理利用这一特性可以简化样式设计

CSS盒模型是网页布局的核心概念包含标准盒模型和替代盒模型两种计算方式标准盒模型下元素总宽度为内容宽度加内外边距和边框替代盒模型则将边框和内边距包含在设定宽度内内联元素的盒模型特性与块级元素不同负边距会改变元素空间占用百分比尺寸基于父元素计算最小最大尺寸具有优先级边框直接影响元素尺寸滚动条会占用空间表格和弹性盒子有特殊计算规则视口单位基于浏览器窗口calc函数支持动态计算开发者工具可辅助调试盒模型

CSS中的margin border和padding是盒模型的三个核心属性 margin控制元素外部间距支持单边设置和简写形式可实现水平居中和负值重叠 border围绕内容与内边距包含宽度样式和颜色支持圆角和透明边框 padding定义内容与边框间距百分比基于父元素宽度计算 三者协同决定元素总尺寸 box-sizing可改变计算方式 高级技巧包括响应式间距和边框绘制三角形 理解这些属性对精确布局至关重要

标准盒模型和怪异盒模型是CSS中两种主要的盒模型模式标准盒模型中元素的width和height仅表示内容区域尺寸实际空间需加上内边距和边框怪异盒模型通过box-sizingborder-box触发其width和height包含内容内边距和边框的尺寸两者在布局上差异明显标准盒模型元素更大怪异盒模型保持指定尺寸怪异盒模型更适合响应式设计现代浏览器默认标准盒模型但可通过全局设置boxsizingborder-box统一开发体验避免布局问题

CSS选择器在不同浏览器中的兼容性存在差异基本选择器如元素类ID选择器在所有现代浏览器中都有良好支持属性选择器从IE7开始支持而伪类选择器如hover在IE6仅限于a标签结构性伪类如nthchild需要IE9以上版本伪元素选择器建议使用单冒号语法确保兼容IE8组合选择器如子选择器和兄弟选择器从IE7开始支持CSS3新增选择器如not和target需要IE9以上实际项目中可通过Modernizr检测特性或使用备用样式预处理器的嵌套选择器编译后不影响兼容性现代CSS框架主要使用类选择器保证兼容性未来CSS4选择器如has支持度有限需谨慎使用

CSS选择器性能优化关键在于理解浏览器从右到左的解析机制避免通用选择器减少后代选择器深度优先使用类选择器替代属性选择器谨慎使用伪类和伪元素避免CSS表达式采用BEM规范减少重绘回流考虑浏览器渲染差异进行性能测试管理选择器特异性合理应用CSS变量预处理避免过度嵌套移动端需特别优化关键渲染路径优先内联关键CSS这些原则能显著提升页面渲染速度

CSS样式规则的优先级由选择器类型和数量决定，表示为四元组a b c d分别对应内联样式、ID选择器、类属性伪类选择器、元素伪元素选择器的数量比较时从左到右数值大的优先级更高内联样式权重最高其次是ID选择器类属性伪类元素伪元素通配符组合符不影响优先级但not内部选择器参与计算important声明会覆盖所有规则相同优先级后定义的生效继承样式优先级最低实践中建议减少ID选择器避免深层嵌套慎用important利用CSS变量浏览器开发者工具可查看优先级信息伪类伪元素属性选择器有不同权重where优先级总是0is取参数中最高优先级

相邻兄弟选择器和通用兄弟选择器是CSS中用于选择兄弟元素的重要工具相邻兄弟选择器使用加号符号选择紧接在指定元素后的第一个兄弟元素例如可以让紧跟在特定类名后的列表项变为红色加粗通用兄弟选择器使用波浪线符号选择指定元素后的所有兄弟元素不要求紧邻例如可以让特定类名后的所有列表项获得灰色背景两种选择器在表单布局标题样式和动态内容处理中非常实用相邻兄弟选择器要求元素直接相邻且只影响第一个匹配元素而通用兄弟选择器不要求紧邻会影响所有后续元素浏览器从右向左解析这些选择器使用时应注意性能优化避免深层嵌套组合使用可以实现更复杂的选择逻辑这两种选择器在现代浏览器中兼容性良好但在动态内容处理和空白文本节点方面需要注意特殊场景

后代选择器和子选择器是CSS中两种重要的元素选择方式后代选择器使用空格匹配任意层级的后代元素而子选择器使用大于号仅匹配直接子元素后代选择器范围更广但性能较低子选择器更精确且高效实际应用中后代选择器适合批量设置样式子选择器适合精确控制样式继承两者可以组合使用实现更灵活的选择现代浏览器都良好支持这两种选择器在响应式设计和预处理器中都有广泛应用使用时需注意避免样式污染和过度嵌套同时考虑JavaScript操作时的查询效率

CSS组合选择器是精确控制元素样式的强大工具后代选择器通过空格连接匹配嵌套元素子选择器使用大于号只选择直接子元素相邻兄弟选择器用加号选择紧邻元素通用兄弟选择器用波浪号选择后面所有同级元素这些选择器可以组合使用实现更精确的选择属性选择器能与各类选择器组合基于属性值匹配元素伪类选择器如hover和nth-child也能与其他选择器组合创建复杂交互效果在响应式设计中组合选择器能针对不同设备应用不同样式表单控制中它们能精确管理各种输入状态虽然功能强大但过度复杂的组合可能影响性能建议在频繁操作的元素上使用类选择器替代复杂组合选择器合理运用这些技术能显著提升CSS代码的可维护性和效率