面试时偶尔会问到 css 属性、布局的使用
今天复习一下
当涉及到CSS（层叠样式表）的知识点时，有许多重要的方面需要考虑。以下是一些关键的CSS知识点：
- 选择器（Selectors）： 选择器用于选择HTML文档中的特定元素，以便对其应用样式。选择器可以基于元素名称、类名、ID、属性等进行选择。
- 属性（Properties）： 属性是您可以应用于选定元素的单个样式属性。它们定义了诸如颜色、字体大小、边距、填充等各种视觉属性。
- 值（Values）： 值是您分配给属性的设置。例如，对于
color属性，值可以是颜色名称（"red"）或十六进制代码（"#FF0000"）。 - 声明（Declarations）： 声明由属性及其对应的值组成。它在CSS规则的花括号
{}内使用。 - 规则（Rules）： 规则是选择器和一个或多个声明的组合。规则定义了如何为特定一组HTML元素设置样式。
- CSS盒模型（Box Model）： 盒模型描述了元素在内容、填充、边框和外边距方面的结构。它对于理解CSS中的布局和间距非常重要。
- 层叠（Cascading）： CSS中的"C"代表"层叠"。这意味着如果对同一元素应用了多个样式，它们将根据特异性和继承规则进行合并。
- 选择器层次结构（Selectors Hierarchy）： CSS提供了多种方法来根据HTML结构中的位置选择元素，例如子选择器、后代选择器、相邻兄弟选择器等。
- 继承（Inheritance）： 一些属性从父元素继承给子元素。例如，如果在
body元素上设置了字体颜色，它可能会应用于文档中的所有文本，除非明确覆盖。 - 媒体查询（Media Queries）： 媒体查询允许您根据设备特性（如屏幕大小、方向和分辨率）应用不同的样式。这对于创建响应式的网页设计非常重要。
- 伪类和伪元素（Pseudo-classes and Pseudo-elements）： 伪类和伪元素基于特定状态或位置选择元素，例如
hover、active、first-child、::before和::after。 - 外部、内部和内联CSS（External, Internal, and Inline CSS）： CSS可以通过外部文件（使用
<link>链接）、在<head>部分内部使用<style>标签，或者直接在HTML元素中使用style属性进行内联。
以下是一个简单CSS规则的示例：
cssCopy code
/* 这是CSS中的注释 */
h1 {
color: blue;
font-size: 24px;
margin-bottom: 10px;
}
在上面的示例中，CSS规则针对所有的h1元素，应用了蓝色的颜色，24像素的字体大小，以及10像素的底部边距。
CSS是网页开发中的重要工具，使开发人员能够创建具有视觉吸引力和用户友好性的网站。
一、CSS选择器及其优先级
| 选择器 | 格式 | 优先级权重 |
|---|---|---|
| id选择器 | #id | 100 |
| 类选择器 | .classname | 10 |
| 属性选择器 | a[ref=“eee”] | 10 |
| 伪类选择器 | li:last-child | 10 |
| 标签选择器 | div | 1 |
| 伪元素选择器 | li:after | 1 |
| 相邻兄弟选择器 | h1+p | 0 |
| 子选择器 | ul>li | 0 |
| 后代选择器 | li a | 0 |
| 通配符选择器 | * | 0 |
- CSS中可继承与不可继承属性有哪些
- display的属性值及其作用
- display的block、inline和inline-block的区别
- 隐藏元素的方法有哪些
- ink和@import的区别
- transition和animation的区别
- display:none与visibility:hidden的区别
- 伪元素和伪类的区别和作用？
- 对requestAnimationframe的理解
- 对盒模型的理解
- 为什么有时候⽤translate来改变位置⽽不是定位？
- li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？
- CSS3中有哪些新特性
- 替换元素的概念及计算规则
- 常见的图片格式及使用场景
- 对 CSSSprites 的理解
- 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
