diff --git "a/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.21-\345\256\232\344\275\215.md" "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.21-\345\256\232\344\275\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..97bb95cdcf4822bcae13b909a8e4397b09037cba --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.21-\345\256\232\344\275\215.md" @@ -0,0 +1,45 @@ +## 一、定位的基本概念 +``` +CSS定位允许你指定一个元素在文档中的位置。通过定位，你可以控制元素在页面上的精确布局。定位通常与边偏移属性（left、right、top、bottom）一起使用，以实现更复杂的布局需求。 +``` +## 二、常见的定位方式及其特点 +1. 静态定位（static） ++ 是所有元素的默认定位方式。 ++ 在静态定位下，元素按照正常的文档流进行布局，偏移量无法改变元素的位置。 +2. 相对定位（relative） ++ 元素相对于其正常位置进行偏移。 ++ 偏移后，元素仍然占据原来的空间，不影响其他元素的布局。 ++ 可以使用left、right、top、bottom属性来指定偏移量。 +3. 绝对定位（absolute） ++ 元素相对于最近的已定位祖先元素进行定位（如果没有已定位的祖先元素，则相对于初始包含块，通常是 <html>元素） ++ 绝对定位的元素会脱离文档流，不再占据原来的空间。 ++ 可以使用left、right、top、bottom属性来指定元素的位置。 +4. 固定定位（fixed） ++ 元素相对于浏览器窗口进行定位。 ++ 无论页面如何滚动，固定定位的元素都会保持在窗口的固定位置。 ++ 无论页面如何滚动，固定定位的元素都会保持在窗口的固定位置。 ++ 需要设置宽度和高度，除非有内容撑开。 +5. 粘滞定位（sticky） ++ 元素在跨越特定阈值前为相对定位，之后为固定定位。 ++ 常用于头部导航在滚动到某个位置时固定的场景。 ++ 兼容性可能因浏览器而异。 +## 三、定位的应用场景 +1. 相对定位 +- 用于微调元素的位置，而不影响其他元素的布局。 +- 可以作为绝对定位元素的参考点。 +2. 固定定位 +- 用于创建复杂的布局，如模态框、弹出层等。 +- 常与相对定位结合使用（子绝父相），以实现更灵活的布局。 +3. 固定定位 +- 用于创建固定在页面上的元素，如导航栏、广告栏等。 +- 确保元素在滚动页面时始终可见。 +4. 粘滞定位 +- 用于实现头部导航在滚动到特定位置时固定的效果。 +- 提升用户体验，使用户在滚动页面时仍能保持对导航栏的访问。 +## 四、注意事项 +1. z-index属性 ++ 用于调整定位元素的堆叠顺序。 ++ z-index的值可以是负整数、0或正整数。值越大，元素越靠近用户。 +2. 脱离文档流的影响 ++ 绝对定位和固定定位的元素会脱离文档流，不再占据原来的空间。这可能会影响其他元素的布局。 ++ 相对定位的元素不会脱离文档流，但会改变其位置。 diff --git "a/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.23-css\345\261\236\346\200\247.md" "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.23-css\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..f8863cb94803cb2401ef52d48e56af3e7a57efa6 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.23-css\345\261\236\346\200\247.md" @@ -0,0 +1,124 @@ +## css3现状 +1. 移动端支持优于pc端 +2. 不断改进中 +3. 应用相对广泛 +## 符号 +* `[]`表示可选项 +* `||`表示或者 +* `|` 表示多选一 +* `?`0个或1个 +* `*`0个或多个 +* `{}`范围 +## css3选择器 +1. div 标签选择器 +2. .box 类选择器 +3. #box id选择器 +4. div p 后代选择器 +5. div.box 交集选择器 +6. div,p,span 并集选择器 +7. div>p 子代选择器 +8. div+p 选中的div后面相邻的第一个p +9. div~p 选中的div后面所有的p +10. `*` 通配符 + +1.**UI 元素状态伪类选择器**：用于选择用户界面元素的不同状态。 + - `:enabled` 和 `:disabled`：选择启用或禁用的表单元素。 + ```css + input:enabled { + background-color: white; + } + input:disabled { + background-color: gray; + } + ``` + - `:read-only` 和 `:read-write`：选择只读或可编辑的元素。 + ```css + input:read-only { + background-color: silver; + } + input:read-write { + background-color: white; + } + ``` + +2. **通用兄弟选择器**：`~` 选择器选择后续所有兄弟元素。 + ```css + h1 ~ p { + color: #555; + } + ``` + +3. **相邻兄弟选择器**：`+` 选择器选择紧随其后的兄弟元素。 + ```css + h1 + p { + color: #333; + } + ``` + +4. **子元素选择器**：`>` 选择器选择作为某元素直接子元素的元素。 + ```css + ul > li { + margin-left: 20px; + } + ``` + +## 属性选择器 +- **属性选择器**：根据元素的属性及其值来选择元素。 + ```css + [type="text"] { + border: 1px solid #ccc; + } + ``` +- **属性选择器的扩展**：可以更精确地选择具有特定属性值的元素。 + ```css + input[type="radio"] { + margin-right: 5px; + } + ``` +1. 标志性符号`[]` +2. `E[title]` 选中页面的E元素，并且E存在 title 属性 +3. `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc +4. `E[attr~=val]`选择具有 attr 属性且属性值为：用空格分隔的字词列表，其中一个等于val的E元素.如`
` +5. `E[attr|=val]`表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的 +6. `E[title^="abc"]`选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头 +7. `E[title$="abc"]`选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾 +8. `E[title*="abc"]`选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc +## 结构伪类选择器 +1. **伪类选择器**：用于选择处于特定状态的元素。 + - `:nth-child()`：选择指定的子元素。 + ```css + li:nth-child(2) { + font-weight: bold; + } + ``` + - `:nth-of-type()`：选择父元素中指定类型的子元素。 + ```css + ul li:nth-of-type(2) { + font-weight: bold; + } + ``` + - `:first-of-type`：选择父元素中第一个特定类型的子元素。 + ```css + ul li:first-of-type { + font-weight: bold; + } + ``` + - `:last-of-type`：选择父元素中最后一个特定类型的子元素。 + ```css + ul li:last-of-type { + font-weight: bold; + } + ``` + - `:not()`：选择不匹配指定选择器的元素。 + ```css + li:not(:first-child) { + background-color: #eee; + } + ``` + - `:checked`：选择被选中的 radio 或 checkbox 元素。 + ```css + input[type="checkbox"]:checked { + background-color: yellow; + } + ``` + diff --git "a/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.24-css\345\212\250\347\224\273.md" "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.24-css\345\212\250\347\224\273.md" new file mode 100644 index 0000000000000000000000000000000000000000..6d406f0cc15846e0b420eb236e8567b8e50afef9 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.24-css\345\212\250\347\224\273.md" @@ -0,0 +1,64 @@ +## 一、基本概念 +1. **关键帧动画（Keyframe Animation）**：通过定义关键帧来控制动画的变化过程。使用@keyframes规则来定义动画，并为每个关键帧设置样式。 +2. **转换（Transform）**：用于对元素进行旋转、缩放、移动或倾斜等变换操作。这些变换操作可以应用于动画中的关键帧。 +3. **过渡（Transition）**：定义元素状态的变化方式，比如改变颜色、大小或位置。虽然过渡与动画有所不同，但它们都可以用来创建视觉效果的平滑变化。 +## 二、核心动画属性 +1. **animation-name**：指定要绑定到选择器的关键帧的名称。在CSS中，使用@keyframes+动画名字来定义动画规则，并通过animation-name: 动画名字;来引用这个动画规则。 +2. **animation-duration**：定义动画完成一个周期需要多少秒或毫秒。例如，animation-duratio: 2s;表示动画完成一个周期需要2秒。 +3. **animation-timing-function**：指定动画将如何完成一个周期，即动画的速度曲线。常见的值包括： + ++ linear：匀速动画。 ++ ease：默认值，开始低速，逐渐加快速度，最后再减速。 ++ ease-in：动画以低速开始。 ++ ease-out：动画以低速结束。 ++ ease-in-out：动画以低速开始和结束。 ++ cubic-bezier(x1, y1, x2, y2)：自定义贝塞尔曲线。 ++ steps(int, start|end)：阶跃函数，用于创建逐帧动画效果。 +4. **animation-delay**：定义动画什么时候开始。通过指定一个时间值（如1s或500ms）来设置动画的延迟时间。 +5. **animation-iteration-count**：定义动画应该播放多少次。常见的值包括： ++ infinite：无限次播放。 ++ <number>：具体播放次数，如3表示动画播放3次。 +6. **animation-direction**：定义动画播放的方向。常见的值包括： ++ normal：正常方向（从开始到结束）。 ++ reverse：反方向（从结束到开始）。 ++ alternate：交替方向（正常方向和反方向交替）。 ++ alternate-reverse：反向交替方向（反方向和正常方向交替）。 +7. **animation-fill-mode**：定义动画在播放前和播放后的样式，避免动画结束时元素回到初始状态。常见的值包括： ++ none：动画前后状态不变。 ++ forwards：动画结束后保持最后一帧的状态。 ++ backwards：动画开始前应用第一帧的状态。 ++ both：动画前后都应用动画的状态。 +8. **animation-play-state**：指定动画是否正在运行或已暂停。常见的值包括： ++ running：动画正在播放。 ++ paused：动画暂停。 +## 三、简写属性 +animation是一个简写属性，用于同时设置动画的多个属性。例如： +``` +element { + animation: spin 2s linear 1s infinite; +} +在这个例子中，spin是动画名称，2s是持续时间，linear是速度曲线，1s是延迟时间，infinite是迭代次数。 +``` +## 四、实践示例 +以下是一个简单的CSS动画示例，通过关键帧动画让一个元素在原始大小和放大后之间循环播放，并配合旋转效果： +``` +.my-element { + width: 100px; + height: 100px; + background-color: blue; + animation: myAnimation 2s infinite alternate; +} + +@keyframes myAnimation { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.5) rotate(180deg); + } + 100% { + transform: scale(1); + } +} +在这个示例中，.my-element类被应用于一个元素，并通过animation属性引用了名为myAnimation的关键帧动画。动画周期为2秒，无限次播放，并以交替方向播放。 +```