Web前端CSS题库

CSS样式表的写法及优先级

• 内联样式表（Inline Style）：通过style属性直接在HTML标签中添加样式，适用于单个元素的样式设置。
• 内部样式表（Internal Style Sheet）：在文档的部分使用标签定义样式，适合页面内元素共享样式。
• 外部样式表（External Style Sheet）：将样式存储为独立的.css文件，并通过``标签引用，适合多个页面共享样式。
• 优先级排序：
• 内联样式表 > 内部样式表 > 外部样式表
• 特殊性高的选择器优先级高。
• !important声明可以提高优先级，具有相同特殊性时，!important的规则优先。
• 如果两个规则同时使用!important，则更具体的选择器或后出现的规则会覆盖前者。

• 外部样式表的使用场景：多个HTML页面共享相同样式时使用，便于代码维护。

  CSS基本语法与选择器

• 基本语法：由选择器、属性、属性值组成，格式为：
  CODEBLOCK0

• 常用选择器：
• ID选择器：以#开头，匹配特定ID值。
• 类选择器：以.开头，匹配特定类名。
• 标签选择器：使用HTML标签名称。
• 通用选择器：*匹配所有元素。
• 伪类：用于定义非内容驱动的样式，例如：
• :hover：鼠标悬停时的样式
• :link：未访问过的链接样式
• :visited：已访问过的链接样式
• :active：活动链接的样式

• :focus：获取焦点时的样式

  盒子模型与页面布局

• CSS盒子模型：由四个部分组成：

• Margin：外边距
• Border：边框
• Padding：内边距
• Content：内容区域
• 页面布局方法：
• 绝对定位：元素相对于最近的已定位祖先元素（position不是static）定位。
• 相对定位：元素相对于其正常位置定位。
• 静态定位：默认定位方式。

• 固定定位：元素相对于浏览器窗口定位，通常用于固定头部或底部。

  其他重要CSS属性

• visibility与display的区别：

• visibility: hidden：元素不可见，但占用空间。
• display: none：元素不显示且不占用空间。
• 清除浮动：
• clear: left：不允许左侧有浮动元素。
• clear: right：不允许右侧有浮动元素。
• clear: both：不允许两侧有浮动元素。
• clearfix技巧：通过额外标签和CSS属性清除浮动效果。