From 8d18cec16f36a2f5f880cf07d0e75d14652609ad Mon Sep 17 00:00:00 2001 From: ppppp Date: Mon, 21 Oct 2024 11:23:18 +0800 Subject: [PATCH] 1 --- ...22\345\255\220\346\250\241\345\236\213.md" | 0 ...20240919-html5\350\241\250\345\215\225.md" | 0 .../20241014-css\344\274\252\347\261\273.md" | 0 ...22\345\255\220\346\250\241\345\236\213.md" | 104 +++++++++++++++++ .../20241017-\346\265\256\345\212\250.md" | 110 ++++++++++++++++++ 5 files changed, 214 insertions(+) delete mode 100644 "\351\202\271\346\260\270\346\266\233/giteenote/2 0241016-\347\273\247\346\211\277\346\200\247\350\246\206\347\233\226\346\200\247\344\273\245\345\217\212\347\233\222\345\255\220\346\250\241\345\236\213.md" rename "\351\202\271\346\260\270\346\266\233/giteenote/202040919-html5\350\241\250\345\215\225.md" => "\351\202\271\346\260\270\346\266\233/giteenote/20240919-html5\350\241\250\345\215\225.md" (100%) rename "\351\202\271\346\260\270\346\266\233/giteenote/2 0241014-css\344\274\252\347\261\273.md" => "\351\202\271\346\260\270\346\266\233/giteenote/20241014-css\344\274\252\347\261\273.md" (100%) create mode 100644 "\351\202\271\346\260\270\346\266\233/giteenote/20241016-\347\273\247\346\211\277\346\200\247\350\246\206\347\233\226\346\200\247\344\273\245\345\217\212\347\233\222\345\255\220\346\250\241\345\236\213.md" create mode 100644 "\351\202\271\346\260\270\346\266\233/giteenote/20241017-\346\265\256\345\212\250.md" diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/2 0241016-\347\273\247\346\211\277\346\200\247\350\246\206\347\233\226\346\200\247\344\273\245\345\217\212\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/2 0241016-\347\273\247\346\211\277\346\200\247\350\246\206\347\233\226\346\200\247\344\273\245\345\217\212\347\233\222\345\255\220\346\250\241\345\236\213.md" deleted file mode 100644 index e69de29b..00000000 diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/202040919-html5\350\241\250\345\215\225.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/20240919-html5\350\241\250\345\215\225.md" similarity index 100% rename from "\351\202\271\346\260\270\346\266\233/giteenote/202040919-html5\350\241\250\345\215\225.md" rename to "\351\202\271\346\260\270\346\266\233/giteenote/20240919-html5\350\241\250\345\215\225.md" diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/2 0241014-css\344\274\252\347\261\273.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/20241014-css\344\274\252\347\261\273.md" similarity index 100% rename from "\351\202\271\346\260\270\346\266\233/giteenote/2 0241014-css\344\274\252\347\261\273.md" rename to "\351\202\271\346\260\270\346\266\233/giteenote/20241014-css\344\274\252\347\261\273.md" diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/20241016-\347\273\247\346\211\277\346\200\247\350\246\206\347\233\226\346\200\247\344\273\245\345\217\212\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/20241016-\347\273\247\346\211\277\346\200\247\350\246\206\347\233\226\346\200\247\344\273\245\345\217\212\347\233\222\345\255\220\346\250\241\345\236\213.md" new file mode 100644 index 00000000..427d3c7f --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/giteenote/20241016-\347\273\247\346\211\277\346\200\247\350\246\206\347\233\226\346\200\247\344\273\245\345\217\212\347\233\222\345\255\220\346\250\241\345\236\213.md" @@ -0,0 +1,104 @@ +# CSS层叠与继承笔记 +## 一、CSS层叠（Cascading） +CSS，即层叠样式表，其“层叠”特性允许为同一个HTML元素指定多个样式规则，并通过特定的规则来决定哪些样式最终生效。 +
+层叠规则： +
+当一个元素有多个样式规则应用时，这些规则会按照特定的顺序和权重进行层叠，最终确定元素的样式。 +
+规则的权重（Specificity）由选择器的类型决定，包括元素选择器、类选择器、ID选择器等。权重值越高，规则的优先级越高。 +
+如果两个规则的权重相同，则后出现的规则会覆盖先出现的规则。 +
+使用!important标记的样式规则具有更高的优先级，能够覆盖未使用!important标记的相同权重规则。 +
+层叠顺序： +
+浏览器默认样式。 +
+用户自定义样式（通常通过浏览器设置）。 +
+开发者样式（即网页中的CSS代码）。 +
+重要性（!important）标记的样式。 +
+样式表中的顺序（后出现的规则覆盖先出现的规则）。 +
+ +## 二、CSS继承（Inheritance） +CSS继承是指某些样式属性会自动从父元素传递到子元素。 +
+可继承属性： +
+文本相关属性，如font-family、font-size、color、line-height、text-align等。 +
+列表相关属性，如list-style。 +
+表格相关属性，如border-collapse（在表格元素上）。 +
+不可继承属性： +
+盒模型相关属性，如margin、border、padding、width、height等。 +
+定位相关属性，如position、top、right、bottom、left、z-index等。 +
+浮动和清除浮动属性，如float、clear等。 +
+继承的特性： +
+继承是单向的，从父元素到子元素。 +
+子元素可以覆盖从父元素继承的样式。 +
+并非所有属性都可以继承，具体取决于属性的特性。 +
+继承的计算值： +
+当属性被继承时，子元素实际获得的是父元素计算后的值，而非父元素样式表中的原始值。 +
+ +## 三、示例与总结 + +html +``` + + + + + +CSS 层叠与继承示例 + + + +
+

这是一个段落，它继承了body的字体和颜色。

+

这是一个高亮段落，它的颜色被!important规则覆盖。

+
+ + +``` +在上面的示例中： + +* 段落元素`

`继承了`body`元素的`font-family`和`color`属性。 +* 高亮段落`

`通过`!important`规则覆盖了继承的`color`属性。 +## 2. 总结： + +* CSS层叠允许为同一个元素指定多个样式规则，并通过权重和顺序来决定哪些规则最终生效。 +* CSS继承使得某些样式属性能够自动从父元素传递到子元素，从而简化样式表的编写和维护。 +* 理解层叠和继承的规则是掌握CSS布局和样式设计的关键。 diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/20241017-\346\265\256\345\212\250.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/20241017-\346\265\256\345\212\250.md" new file mode 100644 index 00000000..b1d22c89 --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/giteenote/20241017-\346\265\256\345\212\250.md" @@ -0,0 +1,110 @@ +# CSS浮动（Float） +## 一、浮动的基本概念 +浮动（Float） 是CSS中用于让元素脱离文档流并按照指定方向排列的一种布局方式。 +
+浮动元素会向左或向右移动，直到其外边缘碰到包含框或另一个浮动元素的边缘为止。非浮动元素则会环绕在浮动元素的周围。 +
+## 二、浮动的基本用法 +## 设置浮动 +使用 float 属性可以为元素设置浮动方向，可选值有： +
+`left`：元素向左浮动。 +
+`right`：元素向右浮动。 +
+`none`：默认值，元素不浮动。 +
+css +``` +.float-left { + float: left; +} + +.float-right { + float: right; +} +``` +## 清除浮动 +当浮动元素被使用后，其父元素可能会塌陷（即高度为0），为了解决这个问题，可以使用 clear 属性清除浮动。可选值有： +
+`left`：清除左侧浮动。 +
+`right`：清除右侧浮动。 +
+`both`：清除左右两侧浮动。 +
+`none`：默认值，不清除浮动。 +
+css +``` +.clearfix::after { + content: ""; + display: table; + clear: both; +} +``` +
+.clearfix 是一个常用的类名，用于在浮动元素的父元素上清除浮动，从而避免父元素塌陷。 + +## 三、浮动布局示例 +### 左右布局 +``` +html +

+
左侧内容
+
右侧内容
+
+css +.container { + border: 1px solid #000; + padding: 10px; +} + +.left, .right { + width: 45%; + padding: 10px; + box-sizing: border-box; +} +``` +### 三栏布局 + +``` +html +
+
左侧内容
+
中间内容
+
右侧内容
+
+css +.container { + border: 1px solid #000; + padding: 10px; + overflow: hidden; /* 清除浮动导致的父元素塌陷 */ +} + +.left, .right { + width: 20%; + padding: 10px; + box-sizing: border-box; +} + +.middle { + margin: 0 20%; /* 左右留出浮动元素的宽度 */ + padding: 10px; + box-sizing: border-box; +} +``` +## 四、浮动与清除浮动的注意事项 +浮动元素脱离文档流：浮动元素不再占据原来的位置，后面的非浮动元素会环绕在其周围。 +
+父元素塌陷问题：浮动元素会导致其父元素高度塌陷，需要使用清除浮动技术（如 .clearfix）来解决。 +
+布局灵活性：浮动布局灵活，但维护起来相对复杂，特别是当浮动元素较多时，容易出现布局混乱的问题。 +
+现代布局技术：随着CSS的发展，现代布局技术（如Flexbox、Grid）逐渐取代了浮动布局，成为更推荐的选择。 +## 五、总结 +浮动是CSS中一种重要的布局方式，通过浮动可以实现灵活的页面布局。然而，浮动布局也存在一些问题， +
+如父元素塌陷等，需要掌握清除浮动技术来解决。在现代Web开发中，虽然浮动布局仍然有用，但更推荐使用Flexbox、Grid等 +
+现代布局技术来实现页面布局。 \ No newline at end of file -- Gitee