diff --git "a/css\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/css\345\212\250\347\224\273\350\257\246\350\247\243.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\347\216\213\347\276\275\347\206\231/css\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\347\216\213\347\276\275\347\206\231/css\345\256\232\344\275\215\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..194917b74aeebf1f7f0b173ff9bc8d8fd7849f08 --- /dev/null +++ "b/\347\216\213\347\276\275\347\206\231/css\345\256\232\344\275\215\345\261\236\346\200\247.md" @@ -0,0 +1,36 @@ +# CSS定位属性笔记（Markdown格式） + +## 一、引言 +CSS的定位属性在网页布局中起着至关重要的作用，能精准控制元素在页面中的位置，实现多样的布局效果。以下是对常见CSS定位属性的详细介绍。 + +## 二、常见定位属性 + +### （一）static（静态定位） +- **性质**：这是元素的默认定位方式。 +- **特点**： + - 元素依照正常的文档流布局，按从上到下、从左到右的顺序依次排列。 + - 不受 `top`、`bottom`、`left`、`right` 和 `z-index` 等属性影响。 + +### （二）relative（相对定位） +- **特点**： + - 元素依旧按正常文档流布局，但可凭借 `top`、`bottom`、`left`、`right` 属性相对于其原本位置产生偏移。 + - 偏移后，元素原本所占空间仍保留在文档流中，其他元素布局不受其偏移影响，仿佛元素只是在原位置上“挪动”了，原位置仍空着。 + - 可利用 `z-index` 属性设定元素在堆叠顺序里的层级。 + +### （三）absolute（绝对定位） +- **特点**： + - 元素脱离正常文档流，不再占据页面空间，其他元素会无视它的存在并填补其原位置。 + - 相对于最近的已定位（即 `position` 属性值不为 `static` 的）祖先元素定位；若不存在已定位的祖先元素，则相对于文档的初始包含块（通常是 `` 元素）定位。 + - 能通过 `top`、`bottom`、`left`、`right` 属性精准设置元素位置。 + - 常借助 `z-index` 属性把控绝对定位元素的堆叠顺序。 + +### （四）fixed（固定定位） +- **特点**： + - 元素脱离文档流，相对于浏览器窗口定位，无论页面怎样滚动，它都始终固定在特定位置。 + - 常用于固定导航栏、广告横幅等场景。 + - 同样可通过 `top`、`bottom`、`left`、`right` 和 `z-index` 属性来设置位置与层级。 + +### （五）sticky（粘性定位） +- **特点**： + - 融合了相对定位和固定定位的特性。在元素未到达指定位置前，它按正常文档流布局；一旦到达指定位置，就会像固定定位那样相对于浏览器窗口或其他相关参照物固定在该位置，直至页面滚动使其离开该指定位置范围，之后又会按正常文档流布局。 + - 也可利用 `z-index` 属性调整其在堆叠顺序中的层级。 \ No newline at end of file diff --git "a/\347\216\213\347\276\275\347\206\231/css\351\200\211\346\213\251\345\231\250.md" "b/\347\216\213\347\276\275\347\206\231/css\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..82e2deac81391d85c4223299453eda0d680070dd --- /dev/null +++ "b/\347\216\213\347\276\275\347\206\231/css\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,71 @@ +# CSS选择器笔记 + +## 一、引言 +CSS选择器是用于选取HTML元素以便应用样式的工具。它们允许我们精确地定位和操作网页中的特定元素，从而实现丰富多样的样式设计。 + +## 二、常见CSS选择器类型 + +### （一）元素选择器 +- **定义**：根据元素的名称来选择元素。 +- **示例**： + - `p` { color: blue; } 会选择所有的 `

` 元素，并将其文字颜色设置为蓝色。 + - `div` { background-color: gray; } 会选中所有的 `

` 元素，并设置其背景颜色为灰色。 + +### （二）类选择器 +- **定义**：通过给元素添加类名，然后使用类选择器来选择具有该类名的元素。类名可以在多个元素上重复使用，以实现相同样式的应用。 +- **示例**： + - HTML中：`

这是一段文字

` `
这是一个div
` + - CSS中：`.my-class` { font-size: 16px; } 会将所有具有 `my-class` 类名的元素的字体大小设置为16像素。 + +### （三）ID选择器 +- **定义**：每个HTML元素可以有一个唯一的ID，ID选择器通过ID来选择特定的元素。 +- **示例**： + - HTML中：`

这是一段特殊的文字

` + - CSS中：`#unique-paragraph` { color: green; } 会专门选择具有 `unique-paragraph` ID的 `

` 元素，并将其文字颜色设置为绿色。 + +### （四）后代选择器 +- **定义**：用于选择某一元素的后代元素。后代可以是子元素、孙元素等。 +- **示例**： + - HTML中：`

这是div里面的p元素

这是span里面的p元素

` + - CSS中：`div p` { background-color: yellow; } 会选择 `
` 元素内部的所有 `

` 元素，并设置它们的背景颜色为黄色。这里的 `

` 元素无论是 `

` 的直接子元素还是更深层次的后代元素都将被选中。 + +### （五）子选择器 +- **定义**：只选择某一元素的直接子元素。 +- **示例**： + - HTML中：`
  • 列表项1
  • 列表项2
  • 列表项3中的span元素
` + - CSS中：`ul > li` { font-weight: bold; } 会选择 `