CSS样式优先级与盒模型详解

"CSS相关知识" 在CSS（Cascading Style Sheets）中，选择器的优先级是决定样式应用的关键因素。优先级的顺序如下： 1. `!important` - 最高优先级，用于强制应用某个样式，无论其他选择器如何。 2. 行内样式 - 如`style="..."`，优先级次之。 3. ID选择器 (`#id`) - 每个ID具有较高的权重。 4. 类选择器 (`.`class)、属性选择器和伪类选择器 - 这些具有相同的权重，次于ID选择器。 5. 标签选择器 (`element`) 和伪元素选择器 - 优先级较低。 6. 后代选择器（如`div p`）和子选择器（如`ul > li`） - 优先级更低。 7. 继承（`inherit`） - 从父元素继承的样式，优先级最低。 8. 默认样式 - 浏览器对元素的默认样式设定。 盒模型是CSS布局的基础，有两种主要类型： 1. `content-box` - 默认的盒模型，元素的宽度和高度只包含内容区域，不包括边框和内边距。 2. `border-box` - 在这种模型下，元素的宽度和高度包括内容、边框和内边距。 处理浮动元素导致的父级塌陷有多种方法： 1. 定义父元素高度 - 易于理解但不适合高度动态变化的布局。 2. 使用`overflow: hidden`或`auto` - 防止内容溢出，但可能隐藏内容。 3. 伪类清除浮动 - 如`.parent::after`，通过添加清除浮动来修复布局。 4. 使用带有`clear`属性的空元素 - 添加一个`<div class="clear"></div>`并定义样式 `.clear { clear: both; }`。 `rem`（root em）和`em`都是长度单位，但它们的参照对象不同： - `rem` - 基于根元素（通常是`html`标签）的`font-size`。 - `em` - 基于父元素的`font-size`。 在处理元素重叠时，`z-index`属性用于控制层叠顺序，但仅对设置了`position`（非`static`）的元素有效。 创建一个三角形的技巧是利用边框的透明度和不透明度，例如： ```css div { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid transparent; border-left: 10px solid red; } ``` `link`和`@import`都是在CSS中引入外部样式表的方法： - `link`是HTML标签，同时加载页面和样式，支持浏览器缓存和渐进渲染。 - `@import`是CSS语法，页面加载完成后再导入样式，可能导致延迟渲染。 在进行响应式设计时，`px`到`rem`的转换对于实现不同设备的适配至关重要，可以使用`px2rem`等插件简化这一过程。