diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test11.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test11.html" new file mode 100644 index 0000000000000000000000000000000000000000..5bf371d45cd0ee4679a84349b0fb744835162dfd --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test11.html" @@ -0,0 +1,26 @@ + + + + + test11 + + + +
+ + + + + + + + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test12.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test12.html" new file mode 100644 index 0000000000000000000000000000000000000000..40356b6e78a0f2c95e85b232e52daa440d9c7953 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test12.html" @@ -0,0 +1,25 @@ + + + + + test12 + + + +
+ + + + + + + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test01-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\347\273\203\344\271\240.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test01-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\347\273\203\344\271\240.html" new file mode 100644 index 0000000000000000000000000000000000000000..8e8eea477f3bdacc1be11f37d3969797966b125c --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test01-\351\200\211\346\213\251\345\231\250\347\234\237\345\256\236\351\241\271\347\233\256\347\273\203\344\271\240.html" @@ -0,0 +1,35 @@ + + + + + test01 + + + +
+
+

Welcome

+

This is the introduction section.

+
+
+

Post Title

+

Post content...

+ +
+ +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test02.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test02.html" new file mode 100644 index 0000000000000000000000000000000000000000..952b182f7ccbe148d63a31caac3ce8e5b9e94fca --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test02.html" @@ -0,0 +1,23 @@ + + + + + test02 + + + +
+ + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test03.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test03.html" new file mode 100644 index 0000000000000000000000000000000000000000..2e6e0985e2435b0b249fc4b5953db119e388713d --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test03.html" @@ -0,0 +1,30 @@ + + + + + test03 + + + + + + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test04.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test04.html" new file mode 100644 index 0000000000000000000000000000000000000000..3403fd644240c88ceca7dc0121fad8b09073fc32 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test04.html" @@ -0,0 +1,18 @@ + + + + + test04 + + + +

Special Title

+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test05.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test05.html" new file mode 100644 index 0000000000000000000000000000000000000000..18acbf0a874eb145022ec05092364287ae3abddf --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test05.html" @@ -0,0 +1,31 @@ + + + + + test05 + + + + + + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test06.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test06.html" new file mode 100644 index 0000000000000000000000000000000000000000..176451facf1806b8fee9879c06ffe598debd3741 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test06.html" @@ -0,0 +1,27 @@ + + + + + test06 + + + +
+
+ + + + + +
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test07-\346\273\232\345\212\250\350\247\206\345\267\256\346\225\210\346\236\234\345\210\235\346\216\242.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test07-\346\273\232\345\212\250\350\247\206\345\267\256\346\225\210\346\236\234\345\210\235\346\216\242.html" new file mode 100644 index 0000000000000000000000000000000000000000..b94f430a57cd28abbe33b315e2dd48072112d5ca --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test07-\346\273\232\345\212\250\350\247\206\345\267\256\346\225\210\346\236\234\345\210\235\346\216\242.html" @@ -0,0 +1,51 @@ + + + + + test07 + + + +
头部
+
+
内容
+
+
底部
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test08-line-height\344\270\223\351\241\271\350\256\255\347\273\203.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test08-line-height\344\270\223\351\241\271\350\256\255\347\273\203.html" new file mode 100644 index 0000000000000000000000000000000000000000..5fc385d43c11c0c01a73fd5df794123f11a3b573 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241014/test08-line-height\344\270\223\351\241\271\350\256\255\347\273\203.html" @@ -0,0 +1,23 @@ + + + + + + test08 + + + + +
+ + 这是一段没有感情的文字 +
+ + + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test01-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test01-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230.html" new file mode 100644 index 0000000000000000000000000000000000000000..403f9b45d21e1e5f23b7d1b44456fd3391ad0958 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test01-\346\240\267\345\274\217\347\273\247\346\211\277\345\222\214\345\217\240\345\212\240\346\200\247\345\272\217\345\210\227\351\242\230.html" @@ -0,0 +1,27 @@ + + + + + 蓝色 + + + +
+
+
+

中华人民共和国

+
+
+
+ + diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test02.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test02.html" new file mode 100644 index 0000000000000000000000000000000000000000..b56012349609948cdae644685c428eb59f74ea84 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test02.html" @@ -0,0 +1,25 @@ + + + + + 红色 + + + +
+

+ + 中华人民共和国 + +

+
+ + diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test03.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test03.html" new file mode 100644 index 0000000000000000000000000000000000000000..c9d56eb3b8a3026639974f2afaa65083df7fab7e --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test03.html" @@ -0,0 +1,36 @@ + + + + + 绿色 + + + +
+ +
+ + diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test04.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test04.html" new file mode 100644 index 0000000000000000000000000000000000000000..1e0ba0f92e65f79992f0b1565567b7e998483afb --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test04.html" @@ -0,0 +1,24 @@ + + + + + 绿色 + + + +
+
+
+

中华人民共和国

+
+
+
+ + diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test05.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test05.html" new file mode 100644 index 0000000000000000000000000000000000000000..88a577f7bd50d9c3c61a223700f538726bace9d2 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test05.html" @@ -0,0 +1,31 @@ + + + + + 蓝色 + + + +
+

+ 中华人民共和国 +

+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test06.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test06.html" new file mode 100644 index 0000000000000000000000000000000000000000..abc4dddf0aa44c9ec70eb67bd72c0aafaf899c7c --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test06.html" @@ -0,0 +1,23 @@ + + + + + 蓝色 + + + +
+

+ 中华人民共和国 +

+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test07.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test07.html" new file mode 100644 index 0000000000000000000000000000000000000000..1242e8863ce72604d3571518e1f4d13dc83dcc99 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test07.html" @@ -0,0 +1,29 @@ + + + + + 黄色 + + + +
+
+
+ 中华人民共和国 +
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test08-\347\233\222\345\255\220\346\250\241\345\236\213.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test08-\347\233\222\345\255\220\346\250\241\345\236\213.html" new file mode 100644 index 0000000000000000000000000000000000000000..4cdd8467959194493b5380b053ec90a8e86e270b --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test08-\347\233\222\345\255\220\346\250\241\345\236\213.html" @@ -0,0 +1,19 @@ + + + + + test08 + + + +
真实占用的宽为262px,高为242px
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test09.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test09.html" new file mode 100644 index 0000000000000000000000000000000000000000..a0ac0d158936be40df100d9249050acc798aeedd --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test09.html" @@ -0,0 +1,21 @@ + + + + + test09 + + + +
真实占用的宽为302px,高为272px
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test10.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test10.html" new file mode 100644 index 0000000000000000000000000000000000000000..68ce810c192f179af793e66ceab603894463a438 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test10.html" @@ -0,0 +1,18 @@ + + + + + test10 + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test11.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test11.html" new file mode 100644 index 0000000000000000000000000000000000000000..fbd794e284619ea183d2291b1f00cd68d959b3d8 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241016/test11.html" @@ -0,0 +1,19 @@ + + + + + test11 + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241017/test01-\346\265\256\345\212\250.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241017/test01-\346\265\256\345\212\250.html" new file mode 100644 index 0000000000000000000000000000000000000000..b27d3bc11148099f17839336bcf437952dd46074 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241017/test01-\346\265\256\345\212\250.html" @@ -0,0 +1,131 @@ + + + + + test01 + + + +
+
+ +
语言选择
+
导航条
+
+
+
大广告
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241017/test02.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241017/test02.html" new file mode 100644 index 0000000000000000000000000000000000000000..79eb45b3c2efbc7439df837f74c3d853b65f48ed --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241017/test02.html" @@ -0,0 +1,108 @@ + + + + + test02 + + + +
+
+
通知公告
+
更多 >>
+
+ +
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" index 2b34826ea463bf9249736bead28c1786f4eff928..5012f681e1069ff5ad0ccd1f411596e9fdcce901 100644 --- "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" @@ -136,7 +136,7 @@ h3后面紧挨着的第一个兄弟 ``` ## 伪类（伪类选择器 ： ）——静态、动态 -伪类：同一个标签，不同的状态，有不同的样式。例如，查看前、后。 +伪类：同一个标签，不同的状态，有不同的样式。例如，查看前、后 1. `静态`伪类选择器：只能用于`超链接`的样式 - `:link` 链接：超链接点击之前 diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\266\205\351\223\276\346\216\245\347\232\204\347\276\216\345\214\226.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\266\205\351\223\276\346\216\245\347\232\204\347\276\216\345\214\226.md" new file mode 100644 index 0000000000000000000000000000000000000000..196fbc81c046ac933c6a9aab6c1a052c3efe27ca --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\266\205\351\223\276\346\216\245\347\232\204\347\276\216\345\214\226.md" @@ -0,0 +1,26 @@ +### 超链接的美化 + +`a{}`定义超链的属性，`a:link{}`定义超链点击之前的属性。 + +**`a{}`和`a:link{}`的区别：** + - `a{}`定义的样式针对所有的超链接(包括锚点) + - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点) + +> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性） +> 在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范 + +```css +/*两个伪类的属性，可以用逗号隔开*/ +.nav ul li a:link , .nav ul li a:visited{ + text-decoration: none; + background-color: purple; + color:white; + } +/*去掉小圆点*/ +list-style: none; +/*让行高等于nav的高度，就可以保证内容垂直居中*/ +line-height: 50px; +height: 50px; +/*border-collapse属性：对表格的线进行折叠*/ +border-collapse: collapse; +``` \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241016-CSS\346\240\267\345\274\217\350\241\250\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247+\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241016-CSS\346\240\267\345\274\217\350\241\250\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247+\347\233\222\345\255\220\346\250\241\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..710c7bacad3f220d99cd0161674de03a4c356a45 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241016-CSS\346\240\267\345\274\217\350\241\250\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247+\347\233\222\345\255\220\346\250\241\345\236\213.md" @@ -0,0 +1,155 @@ +## CSS的继承性 +**继承性**：某些属性，当给自己设置的时候，自己的后代也继承上了。从自己开始，直到最小的元素 + +- 关于文字样式的属性，都具有继承性。包括：color、 text-开头的、line-开头的、font-开头的 + +- 关于盒子、定位、布局的属性，都不能继承 + +> 如果不能直接选中某个元素，通过继承性影响的话，那么权重是0 + +## CSS的层叠性——css处理冲突的能力 +css有着严格的处理冲突的机制。当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重： + +- id 选择器 +- 类选择器、属性选择器、伪类选择器 +- 标签选择器、伪元素选择器 + +**权重相同时**：第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则：大家权重相同，采用就近原则：谁描述的近，听谁的） + +### CSS样式表的冲突的总结 +1. 对于相同的选择器（如同是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） +2. 对于相同类型的样式表（如同是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器 +3. 外部样式表的ID选择器 > 内嵌样式表的标签选择器 +4. 对于同一个标签，如果用到的都是`内嵌样式表`，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁 +5. 对于同一个标签，如果用到的都是`外部样式表`，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁 + +### !important标记：优先级最高,给一个属性提高权重。这个属性的权重就是 无穷大 +语法： +``` +font-size:60px !important; +``` +1. !important提升的是一个属性，而不是一个选择器 +2. !important无法提升继承的权重，还是0 +3. !important不影响就近原则 + +PS：做网站的时候，!important 尽量不要用。否则会让css写的很乱 + +## 盒子模型box model——如div、span、a +图片、表单元素一律看作文本，不是盒子 + +### 盒子中的区域 +一个盒子中主要的属性就5个：width、height、padding、border、margin + +- width和height：`内容`的宽度、高度（不是盒子的宽度、高度） + - 注意：宽度和真实占有宽度，不是一个概念 + - 真实占有宽度 = 左border + 左padding + width + 右padding + 右border + - 如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width +- padding：内边距 +- border：边框 +- margin：外边距 + +### 标准盒模型和IE盒模型 +- **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸 +- **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度 + +### ``标签也有margin +整个网页最大的盒子是``，即浏览器。``是``的儿子。浏览器给``默认的margin大小是8个像素px，此时``占据了整个页面的一大部分区域，而不是全部区域 + +### padding区域也有颜色 +padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域** + +### padding有四个方向 +方法有两种，第一种写小属性；第二种写综合属性，用空格隔开 +```css + /*小属性*/ + padding-top: 30px; + padding-right: 20px; + padding-bottom: 40px; + padding-left: 100px; +``` +```css + /*综合属性*/ + padding: 30px 20px 40px 100px;(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的） + padding: 20px 20px 20px;(上、右左、下) + padding: 40px 40px;(上下、左右) + padding: 100px;(上下左右) +``` +```css + /*用小属性层叠大属性*/ + padding: 20px; + padding-left: 30px; +``` + +### 一些元素，默认带有padding(如ul标签) +```css + /*使用`*`进行清除*/ + *{ + margin: 0; + padding: 0; + } +``` + +但`*`的效率不高，所以我们使用并集选择器，罗列所有的标签 +```css +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ + margin:0; + padding:0; +} +``` + +### 认识border +边框三要素：像素（粗细）、线型、颜色（默认为黑色） +```css +border: 2px solid red; +``` +较稳定的border-style:solid、dashed、dotted + +### border拆分 +两大拆开方式： + +- 按`三要素`拆开：border-width、border-style、border-color（一个border属性是由三个小属性综合而成的,如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序） +- 按`方向`拆开：border-top、border-right、border-bottom、border-left +- 按`三要素和方向`拆：把每个方向的每个要素拆开（3*4 = 12） +``` +border-width:10px 20px; +border-style:solid dashed dotted; +border-color:red green blue yellow; +``` + +小技巧：在sublime text中，为快速输入`border:1px solid red;`这个属性，可直接输入`bd`，然后选第二个后回车 + +### 利用 border 属性画直角三角形、等边三角形、扇形（小技巧） +```css +/*直角三角形*/ +div{ + width: 0; + height: 0; + border: 50px solid transparent; + border-top-color: red; + border-bottom: none; +} +``` + +```css +/*等边三角形*/ +.div1{ + width: 0; + height: 0; + border-top: 30px solid red; + /* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */ + border-left: 20px solid transparent; + border-right: 20px solid transparent; +} +``` + +```css +/*扇形*/ +.div1{ + width: 0; + height: 0; + border-top: 30px solid red; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-radus: 20px; +} +``` \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..076ba09e9893abc352a9b2fe60f8ef5d5c891014 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md" @@ -0,0 +1,148 @@ +### 标准文档流的特性 +1. 空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格 +2. 高矮不齐，底边对齐 +3. 自动换行，一行写不满，换行写 + +### 行内元素和块级元素 +**行内元素和块级元素的`区别`：**（非常重要） + +1. 行内元素： + +- 与其他行内元素并排 +- 不能设置宽、高。默认的宽度，就是文字的宽度 + +2. 块级元素： + +- 霸占一行，不能与其他任何元素并列 +- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100% + +**行内元素和块级元素的`分类`：** + +从html上看 + +- 文本级标签：p、span、a、b、i、u、em。 +- 容器级标签：div、h系列、li、dt、dd。 + +> PS：p里面只能放文字、图片、表单元素，不能放h和ul，也不能放p。所以为文本级标签 + +从css上看 + +- 行内元素：除了p之外，所有的文本级标签，都是行内元素 +- 块级元素：所有的容器级标签都是块级元素，包括p标签 + +### 行内元素和块级元素的相互转换 +通过`display`属性（显示模式）将块级元素和行内元素进行相互转换 +```css +display: inline;/*行级元素*/ +display: block;/*块级元素，如果不设置宽度，将撑满父亲*/ +``` + +css中一共有三种手段，使一个元素脱离标准文档流： + +- 浮动 +- 绝对定位 +- 固定定位 + +## 浮动的性质 +1. 浮动的元素脱标(脱离标准流) + - 一旦一个元素浮动了，那么将能够并排，并且能够设置宽高，无论它原来是div还是span + - 所有标签浮动后，就不区分行内、块级了 +2. 浮动的元素互相贴靠 +3. 浮动的元素有“字围”效果 + - 标准流中的文字不会被浮动的盒子遮挡住（div浮动，p不浮动，div挡住了p，但不会挡住p中的文字） + - 永远不是一个东西单独浮动，浮动都是一起浮动 +4. 收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度 + +## 浮动的清除——清除浮动与浮动之间的影响 +> 一个网页有header、content、footer三部分。如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里 + +清除浮动的方法： + +1. 给浮动元素的祖先元素加高度 + - li的**父亲div没有设置高度**，导致这两个div的高度均为0px + - 给div设置高度（大于儿子），如果div自己的高度小于孩子的高度，也会出现不正常的现象 + - 如果一个元素要浮动，那么它的祖先元素一定要有高度 + - 只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素 +2. clear:both; + - 不允许左侧和右侧有浮动对象 + - 它所在的标签，margin属性失效了（本质原因：高度为零） +3. 隔墙法：为防止第二个div贴靠到第一个div，可以在两个div中间用一个新的div隔开，然后给新的div设置`clear: both;`属性；新的div无法设置margin属性，可以给它设置height，以达到margin的效果 + - 内墙法：![内墙法公式](http://img.smyhvae.com/20170802_1123.png)：一个父亲是不能被浮动的儿子撑出高度的 + - 与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度，高度可以自适应内容 + - 外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content +4. overflow:hidden; + +## 浏览器的兼容性问题 +### 兼容性1（微型盒子） +**兼容性的第一条**：IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。IE 6不支持微型盒子 + +解决方法：将盒子的字号大小，设置为小于盒子的高 +``` +height: 10px; +_font-size:0; +``` + +浏览器hack：hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。 + +IE6留了一个**后门**：只要给css属性之前，加上**下划线**，这个属性就是IE6的专有属性 + +### 兼容性2 +**兼容性的第二条：**IE6不支持用`overflow:hidden;`来清除浮动。 + +解决办法： +```css +overflow: hidden; +_zoom:1;/*触发浏览器hasLayout机制*/ +``` + +### margin塌陷/margin重叠 +**标准文档流中，竖直方向的margin不叠加，取**较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象) + +如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的 + +### 盒子居中`margin:0 auto;` +```css +margin-left: auto; +margin-right: auto; +``` +简写： +``` +margin:0 auto; +``` +1. 只有标准流的盒子，才能使用`margin:0 auto;`居中。当盒子浮动、绝对定位、固定定位，都不能使用margin:0 auto; +2. 使用`margin:0 auto;`的盒子，必须有明确的width +3. `margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;` + +## 关于margin的IE6兼容问题 +### IE6的双倍margin的bug： +当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign + +解决方案： + +1. 使浮动的方向和margin的方向，相反 +``` + float: left; + margin-right: 40px; +``` +2. 使用hack，单独给队首的元素，写一个一半的margin +```html +
  • +``` +```css +ul li.no1{ + _margin-left:20px; +} +``` + +## Fireworks和others +### Fireworks +fireworks是Adobe公司的一个设计软件,默认文件格式是png + +标尺的快捷键：Ctrl + Alt+ R + +### others +首行缩进两个汉字： +``` +text-indent: 2em; +``` +em就是汉字的一个宽度,indent的意思是缩进 \ No newline at end of file