diff --git "a/\345\210\230\346\254\242/20240925\347\254\224\350\256\260.md" "b/\345\210\230\346\254\242/20240925\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..640defecad6d95928579e579be8c5c30ca5ba834 --- /dev/null +++ "b/\345\210\230\346\254\242/20240925\347\254\224\350\256\260.md" @@ -0,0 +1,208 @@ +# CSS属性 +## 字体属性 +为了严格保证字在行里面居中，我们有个约定：**行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除 + +> 小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。 + +> 如果还想让多行文本垂直居中，则需要计算盒子的padding，计算如下： + + +![](http://img.smyhvae.com/20170808_2240.png) + + +### `verticl-align: middle;` 属性 + +`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。 + +代码举例： + +```css +vertical-align: middle; /*指定行级元素的垂直对齐方式。*/ +``` + +### 字号、行高、字体三大属性 +（1）字号： + +``` + font-size:14px; +``` + +（2）行高： + +``` + line-height:24px; +``` + +（3）字体：（font-family就是“字体”，family是“家庭”的意思） + +``` + font-family:"宋体"; +``` + +是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family） + +格式： + +``` + font: 加粗 字号/行高/ 字体 + +``` + +举例： + +``` + font: 400 14px/24px "宋体"; +``` + +PS：400是nomal，700是bold。 + +font属性连写至少要有**字号和字体**，否则连写是不生效的 + +### 字体属性的说明 + +（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，如果用户的Windows电脑里面没有这个字体，那么就会变成宋体。 + +（2）为了防止用户电脑里，没有微软雅黑这个字体，就要用英语的逗号，提供备选字体 +``` + font-family: "微软雅黑"，"宋体"; +``` + +（3）须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体： +``` + font-family: "Times New Roman","微软雅黑","宋体"; +``` + +(错误写法): + +``` + font-family: "微软雅黑","Times New Roman","宋体"; +``` + +上方代码会导致，中文和英文都会采用微软雅黑字体。 + +（4）所有的中文字体，都有英语别名 +微软雅黑的英语别名： +``` + font-family: "Microsoft YaHei"; +``` +宋体的英语别名： +``` + font-family: "SimSun"; +``` + +字号、行高、字体三个属性合二为一： +``` + font: 12px/30px "Times New Roman","Microsoft YaHei","SimSun"; +``` + +（5）行高也可以用百分比，表示字号的百分之多少 +一般来说，百分比都是大于100%的，因为行高一定要大于字号。 + +`font: 12px/200% "宋体"` 等价于`font: 12px/24px "宋体"` + + +# 字体练习 +## 效果图 +![alt text](./imgs/图片1.png) + +## 代码 +```html + + +

字号、行高、字体三大属性

+

字号、行高、字体三大属性

+ +``` + +# 博客园导航栏 +## 效果图 +![alt text](./imgs/博客园.png) + +## 代码 +```html + + + + +``` + +# 百度练习 +## 效果图 +![alt text](<./imgs/百度.png>) + +## 代码 +```html + + +
+

百度新闻热榜

+ +
+ + +``` \ No newline at end of file diff --git "a/\345\210\230\346\254\242/imgs/\345\215\232\345\256\242\345\233\255.png" "b/\345\210\230\346\254\242/imgs/\345\215\232\345\256\242\345\233\255.png" new file mode 100644 index 0000000000000000000000000000000000000000..5b696e4e1582bab0b21f5e3f7f9936e9ee93d666 Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\345\215\232\345\256\242\345\233\255.png" differ diff --git "a/\345\210\230\346\254\242/imgs/\345\233\276\347\211\2071.png" "b/\345\210\230\346\254\242/imgs/\345\233\276\347\211\2071.png" new file mode 100644 index 0000000000000000000000000000000000000000..2a4f88c94d56699773b4d4e89cae1a3145c92cdd Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\345\233\276\347\211\2071.png" differ diff --git "a/\345\210\230\346\254\242/imgs/\347\231\276\345\272\246.png" "b/\345\210\230\346\254\242/imgs/\347\231\276\345\272\246.png" new file mode 100644 index 0000000000000000000000000000000000000000..06b24054cfad8e69f9327b3faec4ff0cfc21e5a9 Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\347\231\276\345\272\246.png" differ