【Web前端】清除浮动&css中文字体
清理浮动有非常多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow。使用空标签来设置 clear:both
等等。但考虑到兼容问题和语义化的问题,一般我们都会使用例如以下代码来清理浮动。
/* 清理浮动 */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}
其原理是。在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来。并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块加入 haslayout 来让浮动块撑高并正常影响文档流。
上面的代码应该是如今主流的清理浮动方式。如今支付宝就使用这种方式。而如今,Nicolas
Gallagher 给出了一个更简洁的方案:
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
原理还是一样的。使用 :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 |
华文仿宋 | STFangsong | \534E\6587\4EFF\5B8B |
方正舒体 | FZShuTi | \65B9\6B63\8212\4F53 |
方正姚体 | FZYaoti | \65B9\6B63\59DA\4F53 |
华文彩云 | STCaiyun | \534E\6587\5F69\4E91 |
华文琥珀 | STHupo | \534E\6587\7425\73C0 |
华文隶书 | STLiti | \534E\6587\96B6\4E66 |
华文行楷 | STXingkai | \534E\6587\884C\6977 |
华文新魏 | STXinwei | \534E\6587\65B0\9B4F |
非常全面吧,但也不要高兴地太早。由于我们有着人手一个规则的浏览器大军,就算是举着完美支持 CSS 大旗的 Firefox,也有不尽如人意的地方,由于 Firefox 竟然不支持以上别名。对它来说 "Microsoft Yahei" 并非微软雅黑。仅仅能反馈出浏览器默认字体的的结果,唉,浏览器太多也不好,还不如回到 IE 垄断的年代,没有比較,也就没有抱怨。
-------------------------------------------------------------------------
原文地址:https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
很多其它学习资源请私信我的新浪微博...
【Web前端】清除浮动&css中文字体的更多相关文章
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
- Web 前端之HTML和CSS
Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...
- 好程序员web前端分享12个CSS高级技巧汇总
好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...
- CSS中文字体对照表
http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html CSS中文字体对照表 css字体名可以使用2种Unicode格式,以“微软雅 ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- css中文字体乱码解决方案
css中文字体乱码解决方案:把css编码和html页面编码统一起来.如果html页面是utf-8.css.js也统一成utf-8编码.还有一个避免中文乱码的办法就是把中文字体写成英文来表示 css中文 ...
- CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑
CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti ...
- css 中文字体 unicode 对照表
css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...
- 好程序员web前端开发测验之css部分
好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font si ...
随机推荐
- x86保护模式-六 控制转移
控制转移可以分为两大类 :同一任务内的控制转移 和 任务间的控制转移(任务切换) 同一个任务内的控制转移可以分为段内转移 .特权级不变的段间转移和特权级改变的段间转移 段内转移与实模式相同 ...
- Laya Timer原理 & 源码解析
Laya Timer原理 & 源码解析 @author ixenos 2019-03-18 16:26:38 一.原理 1.将所有Handler注册到池中 1.普通Handler在handle ...
- Caffe 编译: undefined reference to imencode()
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/52150781 整理之前编译工程中遇到的 ...
- js对文字进行编码
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...
- iOS NSLog各种打印
%@ 对象 %d,%i 整型 (%i的老写法) %hd 短整型 %ld , %lld 长整型 %u 无符整型 %f 浮点型和double型 %0.2f 精度浮点数,只保留两位小数 %x: 为32 ...
- 【bzoj4804】欧拉心算 欧拉函数
题目描述 给出一个数字N 输入 第一行为一个正整数T,表示数据组数. 接下来T行为询问,每行包含一个正整数N. T<=5000,N<=10^7 输出 按读入顺序输出答案. 样例输入 1 1 ...
- 【Luogu】P1868饥饿的奶牛(DP)
题目链接 话说我存一些只需要按照一个关键字排序的双元素结构体的时候老是喜欢使用链式前向星…… DP.f[i]表示前i个位置奶牛最多能吃到的草.转移方程如下: f[i]=f[i-]; f[i]=max( ...
- BZOJ 3143 [Hnoi2013]游走 ——概率DP
概率DP+高斯消元 与博物馆一题不同的是,最终的状态是有一定的概率到达的,但是由于不能从最终状态中出来,所以最后要把最终状态的概率置为0. 一条边$(x,y)$经过的概率是x点的概率$*x$到$y$的 ...
- POJ 1502 MPI Maelstrom【floyd】
题目大意:求点1到所有点最短路径的最大值 思路:水题,单源最短路,网上解题清一色dijkstra,但是点数小于100显然floyd更简洁嘛 #include<cstdio> #includ ...
- bzoj1065【Noi2008】奥运物流
题意:http://www.lydsy.com/JudgeOnline/problem.php?id=1065 给一棵基环树,每个点i的权值=ci+k*∑son[i],修改至多m个点的父亲使1号点权值 ...