diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-12/\344\272\214\345\215\201\344\270\21101.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21101.html" similarity index 100% rename from "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-12/\344\272\214\345\215\201\344\270\21101.html" rename to "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21101.html" diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-12/\344\272\214\345\215\201\344\270\21102.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21102.html" similarity index 100% rename from "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-12/\344\272\214\345\215\201\344\270\21102.html" rename to "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21102.html" diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-12/\344\272\214\345\215\201\344\270\21103.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21103.html" similarity index 94% rename from "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-12/\344\272\214\345\215\201\344\270\21103.html" rename to "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21103.html" index d36cfa2c581c502b4792bfd73cd391326ee24344..d10b67497ced3ba4c0f3318b2cda1a2a7f267597 100644 --- "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-12/\344\272\214\345\215\201\344\270\21103.html" +++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21103.html" @@ -14,7 +14,7 @@ /* 当前激活的链接（class="active"）的子元素 在悬停时背景色变为深灰色 */ nav ul li a.active:hover { background-color: darkgray; - /* 或者你可以使用 #a9a9a9 表示深灰色 */ + } diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21104.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21104.html" new file mode 100644 index 0000000000000000000000000000000000000000..d9f64257133ddf3c75f6b59e48343ec935289d2d --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21104.html" @@ -0,0 +1,24 @@ + + + + + + Document + + + + +

Special Title

+ + + \ No newline at end of file diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21105.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21105.html" new file mode 100644 index 0000000000000000000000000000000000000000..2576904d69abc1a283ea2934298adf0377d7afd0 --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21105.html" @@ -0,0 +1,39 @@ + + + + + + + Document + + + + + + + + + + \ No newline at end of file diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21106.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21106.html" new file mode 100644 index 0000000000000000000000000000000000000000..a00f438f9a14a4adbb67a6d11db317d856dbf820 --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-14/\344\272\214\345\215\201\344\270\21106.html" @@ -0,0 +1,31 @@ + + + + + + Document + + + + +
+
+ + + + + +
+
+ + + \ No newline at end of file diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/image-1.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/image-1.png" new file mode 100644 index 0000000000000000000000000000000000000000..630f11ba3caa58f12d23d64ab47178003130b315 Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/image-1.png" differ diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/image.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/image.png" new file mode 100644 index 0000000000000000000000000000000000000000..559b25a5317a652b391492e4cce431db02f0cc3c Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/image.png" differ diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/\345\261\202\345\217\240\346\200\247\345\222\214\347\273\247\346\211\277\346\200\247\344\276\213\351\242\230.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/\345\261\202\345\217\240\346\200\247\345\222\214\347\273\247\346\211\277\346\200\247\344\276\213\351\242\230.html" new file mode 100644 index 0000000000000000000000000000000000000000..3579767b62f2d00a94968d071c59a440e3a9d440 --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/\345\261\202\345\217\240\346\200\247\345\222\214\347\273\247\346\211\277\346\200\247\344\276\213\351\242\230.html" @@ -0,0 +1,213 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + +
+
+
+ 中华人民共和国 +
+
+
+ + + + + + \ No newline at end of file diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/\347\233\222\345\255\220\346\250\241\345\236\213\345\233\276.md" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/\347\233\222\345\255\220\346\250\241\345\236\213\345\233\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..84b065ccfd829369df3ceaee281190d4b05168cd --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-16/\347\233\222\345\255\220\346\250\241\345\236\213\345\233\276.md" @@ -0,0 +1,28 @@ +1. 宽262，高242 + +![alt text](image.png) + +2. 宽302+高272 + +![alt text](image-1.png) + +3.盒子模型图代码 +``` + div{ + width: 123px; + height: 123px; + padding: 20px 40px; + border: 1px solid gray; + + } +``` +4.盒子模型图代码 +``` + div{ + width: 123px; + height: 123px; + padding: 20px 20px; + padding-left: 40px ; + border: 1px solid gray; + } +``` \ No newline at end of file diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/image.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/image.png" new file mode 100644 index 0000000000000000000000000000000000000000..2f29a805079b05f1c859b1075cb84028fce10e06 Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/image.png" differ diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/image2.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/image2.png" new file mode 100644 index 0000000000000000000000000000000000000000..b1a976b60372cd24c0d8ad2398526ce603e349ca Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/image2.png" differ diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/\346\265\256\345\212\250\347\273\203\344\271\2401.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/\346\265\256\345\212\250\347\273\203\344\271\2401.html" new file mode 100644 index 0000000000000000000000000000000000000000..d7f57ee327449d780f41d7de5d035b9f94954370 --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/\346\265\256\345\212\250\347\273\203\344\271\2401.html" @@ -0,0 +1,151 @@ + + + + + + + Document + + + + +
+
+
logo
+
+
语言选择
+
导航条
+
+
+
+
大广告
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/\346\265\256\345\212\250\347\273\203\344\271\2402.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/\346\265\256\345\212\250\347\273\203\344\271\2402.html" new file mode 100644 index 0000000000000000000000000000000000000000..4203408b6251aefd30f019ae610c985d9a9093e0 --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-17/\346\265\256\345\212\250\347\273\203\344\271\2402.html" @@ -0,0 +1,99 @@ + + + + + + + Document + + + + +
+
+

通知公告

+

更多>>

+
+
+
+ +
+
+ + + \ No newline at end of file diff --git "a/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-14-\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-14-\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..5ea1520c0ad38fde8b4bce919343bd71f5e0c96c --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-14-\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,110 @@ +# 常见的伪类选择器 +1. :hover + +用于选择鼠标悬停在其上的元素。 + +``` +a:hover { + color: red; +} +``` +2. :focus + +用于选择获得焦点的元素（通常是表单元素）。 +``` +input:focus { + border: 2px solid blue; +} +``` +3. :active + +用于选择被用户激活的元素（通常是通过鼠标点击）。 +``` +button:active { + background-color: green; +} +``` +4. :first-child + +用于选择其父元素的第一个子元素。 +``` +p:first-child { + font-weight: bold; +} +``` +5. :last-child + +用于选择其父元素的最后一个子元素。 +``` +p:last-child { + color: purple; +} +``` +6. :nth-child(n) + +用于选择其父元素的第n个子元素。n 可以是一个数字、关键词（如 odd 或 even），或者一个公式（如 2n+1）。 +``` +li:nth-child(2) { + color: orange; +} +``` +``` +li:nth-child(odd) { + background-color: lightgray; +} +``` +7. :not(selector) + +用于选择不匹配给定选择器的元素。 +``` +div:not(.special) { + border: 1px solid black; +} +``` + +# 常见的伪元素 +1. ::before + +在选定元素的内容之前插入内容。通常用于添加装饰性内容或图标。 +``` +p::before { + content: "Note: "; + color: blue; +} +``` +2. ::after + +在选定元素的内容之后插入内容。 +``` +p::after { + content: "*"; + color: red; +} +``` +3. ::first-letter + +用于选择块级元素的首字母，并对其进行样式化。 +``` +p::first-letter { + font-size: 2em; + color: gold; +} +``` +4. ::first-line + +用于选择块级元素的首行，并对其进行样式化。 +``` +p::first-line { + font-weight: bold; + color: green; +} +``` +5. ::selection + +用于选择用户高亮（选择）的文本。 +``` +::selection { + background: yellow; + color: black; +} +``` diff --git "a/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-16-CSS\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md" "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-16-CSS\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..0104b1fd07d128e2bf6680e20b384cf1f0212eac --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-16-CSS\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md" @@ -0,0 +1,52 @@ +## CSS的继承性 + +CSS的继承性指的是在文档树中，子元素会继承父元素的某些样式属性。这种机制可以减少代码的冗余，并使得样式表更加简洁和易于维护。需要注意的是，并非所有CSS属性都会被子元素继承。一些与文本样式相关的属性（如color、font-family、font-size等）默认具有继承性，而一些与布局和定位相关的属性（如margin、padding、border等）则不具有继承性。 + +## CSS的层叠性 +CSS的层叠性指的是当同一元素上应用多个样式规则时，浏览器会根据一系列优先级规则来决定哪条规则最终生效。这种机制使得网页设计更加灵活和高效，因为它允许定义多个样式规则，并通过优先级规则来解决潜在的冲突。 + +### CSS层叠性的优先级规则主要包括以下几点： + +1. 浏览器默认样式：在没有显式设置CSS属性的情况下，浏览器会提供默认的样式。 +1. 用户自定义样式：一些页面中会提供让用户自定义字体大小、颜色等的选项。 +1. 外部样式：通过<link>标签引用的CSS文件。 +1. 内部样式：写在<style>标签内的样式。 +1. 内联样式：直接写在HTML标签的style属性内的样式。 + +### 权重总结 ++ 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。 + ++ 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。 + +在优先级上，通常遵循以下规则： + +1. 创作人员样式（包括外部样式、内部样式和内联样式）的优先级高于用户自定义样式。 +1. 用户自定义样式的优先级高于浏览器默认样式。 +1. 有!important标志的声明的权重要高于不带!important标志的声明。 +1. 按选择器优先级排序，ID选择器的优先级高于类选择器，类选择器的优先级高于元素选择器。 +1. 按出现顺序排序，后定义的样式会覆盖前面定义的样式（即就近原则）。 + + +## 盒子模型 + +1. 边框: 大小 颜色 样式三者缺一不可 border + 1. 颜色 + 2. 样式 + 3. 粗细(宽度 大小),边框尺寸也要算到盒子总尺寸中 + 4. 方向 上右下左 +2. 内容 + 1. 宽和高 +3. 内边距: padding + 1. 四个方向,可以单独设置 + 2. 内边距也要算到盒子总尺寸中,会增大原尺寸,所以要保持原总尺寸不变.就要修改原尺寸 +4. 外边距: margin + 1. 四个方向,可以单独设置 + 2. 外边距也要算到盒子总尺寸中 + 3. margin-top的塌陷问题 + 1. 给父级加边框 + 2. 给父级加一个overflow:hidden + 3. 将子级的margin改成父级里写padding +5. box-sizing: 盒子模型的模式 + 1. content-box : 默认以内容尺寸为主,往外延伸 + - 盒子尺寸的计算: 内容+边框(宽和高都有两个边,注意是不是要两个都加)+内边距(也要注意有两边)+外边距(也有两边) + 2. border-box: 以边框尺寸为主,往内部收缩 \ No newline at end of file diff --git "a/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-17-\346\265\256\345\212\250.md" "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-17-\346\265\256\345\212\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..f083f590b508c4ea2589e4652d6a2225ac4af43e --- /dev/null +++ "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-17-\346\265\256\345\212\250.md" @@ -0,0 +1,52 @@ +# 浮动 +## 脱离文档流： +浮动元素会脱离正常的文档流，这意味着它们不再占据原本的空间，后续的非浮动元素会围绕浮动元素排列。 + +## 左右浮动： +使用 float: left; 或 float: right; 可以将元素分别向左或向右浮动。 + +float: none; 是默认值，表示元素不浮动。 + ++ 包含块： +浮动元素会包含在其最近的块级祖先元素（包含块）内。如果包含块没有足够的空间容纳浮动元素，浮动元素会移动到下一行。 + +## 清除浮动： +使用 clear 属性可以清除浮动的影响。 +1. clear: left; 会使元素移动到所有左浮动元素的下方。 +2. clear: right; 会使元素移动到所有右浮动元素的下方。 +3. clear: both; 会使元素移动到所有浮动元素的下方。 +4. clear: none; 是默认值，表示不清除浮动。 + +### 浮动元素的收缩： +浮动元素通常会收缩到其内容的宽度，除非指定了宽度。这意味着如果浮动元素内没有足够的内容，它可能会变得非常窄。 + +### 父元素高度塌陷： +当一个父元素内只包含浮动元素时，父元素的高度可能会塌陷到0，因为浮动元素脱离了文档流。这通常需要使用清除浮动的方法（如伪元素清除法）来解决。 + +#### 浮动与文本环绕： +浮动元素可以使文本和其他内联元素环绕在其周围。这是浮动在图文混排等布局中非常有用的特性。 + +#### 层叠上下文： +浮动元素会创建一个新的层叠上下文（stacking context），这会影响元素的层叠顺序和z-index属性。 + +## 清除浮动的方法 +1. 使用空元素清除浮动： +``` +
+``` +2. 使用伪元素清除浮动（推荐）： +``` +.clearfix::after { + content: ""; + display: table; + clear: both; +} +``` +然后在需要清除浮动的父元素上添加 clearfix 类： +``` +
+ +
+``` +3. 使用 overflow 属性： +给父元素设置 overflow: hidden; 或 overflow: auto; 也可以清除浮动。