非零基础自学前端最后一遍一 HTML+CSS 7 CSS属性-字体 7.1 字体属性font-size

迷南。 2024-03-25 10:19 70阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  7 CSS属性-字体
         *   *  7.1 字体属性font-size
             *   *  7.1.1 font-size(重要)

![在这里插入图片描述][89416ea89f0348308793ca3f322081c3.png_pic_center]

#### 一 HTML+CSS ####

#### 7 CSS属性-字体 ####

##### 7.1 字体属性font-size #####

###### 7.1.1 font-size(重要) ######

font-size决定文字的大小

常用的设置

*  具体数值+单位
    
     *  比如100px
     *  也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%
 *  百分比
    
     *  基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

![在这里插入图片描述][7c0a508b41644ea787e84d3215847ecc.png_pic_center]

em单位对比：

![在这里插入图片描述][3639a4cf70594c43b27b4798b126e089.png_pic_center]

1em 没区别

设置为2个

![在这里插入图片描述][ec689e37e2dc49e7b252a609fd7c440a.png_pic_center]

![在这里插入图片描述][fc4f0d3a12a14b37a04d29bba81d5520.png_pic_center]

![在这里插入图片描述][3c52a50e77c8482cb1747a1998c34219.png_pic_center]

没毛病，200%【浏览器默认16px】

我们把第一个div 包一下

![在这里插入图片描述][fd9a9ca5840b4d7893c03522a7c59fe6.png_pic_center]

这种情况有几种说法：

*  em 是根据父元素字体的尺寸来计算的
 *  父元素的属性被继承了

反正都是浏览器根据父元素来进行渲染的

用百分比：

![在这里插入图片描述][ec02a11e78ec46d187346145bf466fb7.png_pic_center]

[89416ea89f0348308793ca3f322081c3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b5a43619e4ea4a44b101f8fc2c121919.png
[7c0a508b41644ea787e84d3215847ecc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8eeeadc36a7d465badc120e975c9813a.png
[3639a4cf70594c43b27b4798b126e089.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a88cbdc048f04eb3a2dd513b30852ee1.png
[ec689e37e2dc49e7b252a609fd7c440a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7ce339739e57472392be297280eb4c60.png
[fc4f0d3a12a14b37a04d29bba81d5520.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8f0a7ea689b84ff08b9234c6c1b97d44.png
[3c52a50e77c8482cb1747a1998c34219.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/43ba55d3bfcb44258e2c9b2e19fc1876.png
[fd9a9ca5840b4d7893c03522a7c59fe6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d4b5ac3300fd4a0587b7cc8e06478a5a.png
[ec02a11e78ec46d187346145bf466fb7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5ca330bd956a42b28eaa5493ebe4a8cd.png