【Web前端】清除浮动&css中文字体

原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是，隐藏这个空白使用的是 display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。

值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context，这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话，应该让他们不折叠（虽然这种情况并不常见）。

------------------------------------------------------------------------------------------------------------------------------------------------

在写一个网站的样式表的时候，都会不可避免地用到一些中文字体，比如说微软雅黑、黑体等，除非是做英文站，或者说你乐意整站都用浏览器默认的字体，那我也算服了U。在 CSS 中写入中文字体的方法一般采用 font-family:“微软雅黑”,“黑体”;这样类似的表达方式，但是对于像 WordPress 这样需要 UTF8 编码平台来说，一个不注意没有转换编码就会导致中文字体无法按照希望的字体表形出来。所以我们可以通过英文、unicode 这种形式来表达中文，比如说刚才的 font-family:“微软雅黑”,“黑体”;就可以写成 font-family:“Microsoft Yahei”,“SimHei”; 这样看起来是不是也可以统一一点呢。

中文字体与英文、unicode 对应的太多，背也背不下来，就搜集了一张表格收藏记录一下，希望也是你想要的：

| 中文名 | 英文名 | Unicode |

| — | — | — |

| Mac OS |

| — |

| 华文细黑 | STHeiti Light [STXihei] | \534E\6587\7EC6\9ED1 |

| 华文黑体 | STHeiti | \534E\6587\9ED1\4F53 |

| 华文楷体 | STKaiti | \534E\6587\6977\4F53 |

| 华文宋体 | STSong | \534E\6587\5B8B\4F53 |

| 华文仿宋 | STFangsong | \534E\6587\4EFF\5B8B |

| 丽黑 Pro | LiHei Pro Medium | \4E3D\9ED1 Pro |

| 丽宋 Pro | LiSong Pro Light | \4E3D\5B8B Pro |

| 标楷体 | BiauKai | \6807\6977\4F53 |

| 苹果丽中黑 | Apple LiGothic Medium | \82F9\679C\4E3D\4E2D\9ED1 |

| 苹果丽细宋 | Apple LiSung Light | \82F9\679C\4E3D\7EC6\5B8B |

| Windows |

| — |

| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |

| 细明体 | MingLiU | \7EC6\660E\4F53 |

| 标楷体 | DFKai-SB | \6807\6977\4F53 |

| 黑体 | SimHei | \9ED1\4F53 |

| 宋体 | SimSun | \5B8B\4F53 |

| 新宋体 | NSimSun | \65B0\5B8B\4F53 |

| 仿宋 | FangSong | \4EFF\5B8B |

| 楷体 | KaiTi | \6977\4F53 |

| 仿宋_GB2312 | FangSong_GB2312 | \4EFF\5B8B_GB2312 |

| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |

| 微软正黑体 | Microsoft JhengHei | \5FAE\x8F6F\6B63\9ED1\4F53 |

| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |

| Office |

| — |

| 隶书 | LiSu | \96B6\4E66 |

| 幼圆 | YouYuan | \5E7C\5706 |

| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |

| 华文楷体 | STKaiti | \534E\6587\6977\4F53 |

| 华文宋体 | STSong | \534E\6587\5B8B\4F53 |

| 华文中宋 | STZhongsong | \534E\6587\4E2D\5B8B |

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！