CSS世界笔记(三)
目录
css的层叠规则
文本处理
em
font-family
font
@font face 规则
letter-spacing 与字符间距
word-spacing 与单词间距
word-break 和 word-wrap
text-align:justify
实现瀑布流
如何解决 text-decoration 下划线和文本重叠的问题
text-transform
1. css的层叠规则
z-index 属性只有和定位元素（position 不为 static 的元素）在一起的时候才有作用，可以是正数也可以是负数。
CSS 2.1 的年代，在 CSS3 新世界还没有到来的时候（注意这里的前提），层叠顺序规则
层叠准则
（ 1 ） 谁大谁上 ： 当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一
个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
（ 2 ） 后来居上 ： 当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的
元素会覆盖前面的元素。
定位元素会层叠在普通元素的上面了
这下大家应该知道为什么定位元素会层叠在普通元素的上面了吧？其根本原因就是：元素
一旦成为定位元素，其 z-index 就会自动生效，此时其 z-index 就是默认的 auto ，也就是
0 级别，根据上面的层叠顺序表，就会覆盖 inline 或 block 或 float 元素。而不支持 z-index
的层叠上下文元素天然是 z-index:auto 级别，也就意味着，层叠上下文元素和定位元素是
一个层叠顺序的，于是当它们发生层叠的时候，遵循的是“后来居上”准则。
opacity 的值不是 1 的时候，是具有层叠上下文的，层叠顺序是 z-index:auto
级别，跟没有 z-index 值的 absolute 绝对定位元素是平起平坐的。
CSS3 transform 可以让元素具有新的层叠上下文
position:relative 也可以隐藏，另一个优势是它对原来的布局以及元素的行为没有任何影
对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需 要超过 2。由于 z-index 不能超过 2
2. 文本处理
em
CSS 中，1em 的计算值等同于当前元素所在的 font-size 计算值，可以将 其想象成当前元素中（如果有）汉字的高度。
使用
如果我们使用 SVG 矢量图标，建议设置 SVG 宽高如下：
svg {width: 1em; height: 1em;}
这样，无论图标是个大号文字混在一起还是和小号文字混在一起，都能和当前文字大小保持一 致，既省时又省力
如何权衡“易于实现维护”“视觉还原”“可访问性”这三者，
我这里有两个珍藏的建议。
（ 1 ）即使是定宽的传统桌面端网页，也需要做响应式处理，尤其是针对 1200 像素宽度设
计的网页，但只需要响应到 800 像素即可，可以保证至少有 1.5 倍的缩放空间，如果做到这一
步，那么是否需要响应浏览器的字号设置这一点就可以忽略。
（ 2 ）如果困各种原因无法做响应式处理，也没有必要全局都使用相对单位，毕竟成本等现
实问题摆在那里，其实只需要在图文内容为主的重要局部区域使用可缩放的 font-size 处理
即可。例如，小说网站的阅读页、微信公众号文章展示区、私信对话内容区、搜索引擎的落地
页、评论区等，都强烈建议摒弃 px 单位，而采用下面的实践策略。
•
容器设置 font-size:medium ，此时，这个局部展示区域的字号就跟着浏览器的设
置走了，默认计算值是 16px 。
•
容器内的文字字号全部使用相对单位，如百分比值或者 em 都可以，然后基于 16px 进
行转换。
font-family
font-family: serif; /* 衬线字体 */font-family: sans-serif; /* 无衬线字体 */
在移动端 Web 开发的时候，虽然设备的默认中文字体不一样，但都是无衬线，都挺好看的.
但是需要注意的是， serif 和 sans-serif 一定要写在最后，因为在大多数浏览器下，写在 serif 和 sans-serif 后面的所有字体都会被忽略。
font
目前，非常多网站的通用 font-family 直接就是：
html { font-family: 'Microsoft YaHei'; }
知道问题在哪里吗？这样一设置，就意味着所有操作系统下的所有浏览器都要使用“微软
雅黑”字体。假如说用户的 iMac 或者 macbook 因为某些原因安装了“微软雅黑”字体，那岂 不是这些系统原本更加漂亮的中文字就不能使用了？
于是，人们就会有这样的需求：希望非 Windows 系统下不要使用“微软雅黑”字体，而是
使用其系统字体。怎么处理呢？
html { font: menu; }
body { font-size: 16px; }
@font face 规则
@font face 本质上就是一个定 义字体或字体集的变量，这个变量不仅仅是简单地自定义字体，还包括字体重命名、默认字体样式 设置等。
@font face 规则支持的 CSS 属性有 font-family 、 src 、 font-style 、 font-weigh 、
unicode-range 、 font-variant 、 font-stretch 和 font-feature-settings 。
例如:
@font-face {font-family: 'example';src: url(example.ttf);font-style: normal;font-weight: normal;unicode-range: U+0025-00FF;font-variant: small-caps;font-stretch: expanded;font-feature-settings："liga1" on;}
目前在业界，凡是使用自定义字体的，差不多都是下面这种格式：
@font-face {font-family: ICON;src: url('icon.eot') format('eot');src: url('icon.eot?#iefix') format('embedded-opentype'),url('icon.woff2') format("woff2")url('icon.woff') format("woff"),url('icon.ttf') format("typetrue"),url('icon.svg#icon') format('svg');font-weight: normal;font-style: normal;}
svg 格式是为了兼容 iOS 4.1 及其之前的版本，考虑到现如今 iOS 的版本数已经翻了一
番，所以 svg 格式的兼容代码大可舍弃。
- eot 格式是 IE 私有的。注意，目前所有版本的 IE 浏览器都支持 eot 格式，并不是只 有 IE6 ～ IE8 支持。只是， IE6 ～ IE8 仅支持 eot 这一种字体格式。
- woff 是 web open font format 几个词的首字母简写，是专门为 Web 开发而设计的字体格式，显然是优先使用的字体格式，其字体尺寸更小，加载更快。Android 4.4 开始全面支持。
- woff2 是比 woff 尺寸更小的字体，小得非常明显。因此， Web 开发第一首选字体就 是 woff2 ，只是此字体目前仅 Chrome 和 Firefox 支持得比较好。
- ttf 格式作为系统安装字体比较多， Web 开发也能用，就是尺寸大了点儿，优点在于 老版本 Android 也支
于是，综合上面的全部知识会发现，业界常用的这套东西，其实可以优化成下面这样：
@font-face {font-family: ICON;src: url('icon.eot');src: local('☺'),url('icon.woff2') format("woff2"),url('icon.woff') format("woff"),url('icon.ttf');}
letter-spacing 与字符间距
letter-spacing 可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等。
" class="reference-link">
word-spacing 与单词间距
word-spacing 的作用就是增加 空格 的间隙宽度。有空格就有效，可以是 Space
键敲出来的空格（ U+0020 ），也可以是换行符产生的空格（浏览器解析为 U+0020 ），还可以是
Tab 键敲出来的空格（ U+0009 ），抑或是 &npsp; 非换行空格（ U+00A0 ）。
word-break 和 word-wrap
word-break:break-all 的作用是所有的都换行，毫不留情，一点儿空 隙都不放过，
word-wrap:break-word 如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的
text-align:justify
在默认设置下，text-align:justify 要想有两端对齐的效果，需要满足两点：
一是有分隔点，如空格；
二是要超过一行，此时非最后一行内容会两端对齐。
实现两端对齐:
关于底部莫名高度的问题
一是容器设置 font
0，列表 font-size 再还原；
二是辅助两端对齐的内联元素设置 vertical-align:top 或 vertical-align:bottom。
<ul class="justify"><li><img src="1.jpg"><p>图标描述1</p></li><li><img src="1.jpg"><p>图标描述2</p></li></ul>.justify {background-color: #f0f3f9;text-align: justify;font-size: .1px; // 兼容iefont-size: -webkit-calc(0px + 0px); // 兼容现代浏览器}.justify:after {content: "";display: inline-table;width: 100%;vertical-align: bottom;}.justify li{display:inline-block;fons-size:14px;}
实现瀑布流
<ul class="justify"><li><img src="1.jpg"><p>描述 1</p></li><li><img src="2.jpg"><p>描述 2</p></li><li><img src="3.jpg"><p>描述 3</p></li><li><img src="4.jpg"><p>描述 4</p></li><li><img src="5.jpg"><p>描述 5</p></li><li class="placeholder"></li><li class="placeholder"></li><li class="placeholder"></li></ul>.placeholder {display: inline-block;width: 128px;vertical-align: bottom;}
（ 1 ） 关于占位标签的个数 。 占位标签的个数和列表的列数保持一样就可以了， 100% 实现符合预期的布局效果，多了浪
费，少了不行。
（ 2 ） 关于使用空标签心理障碍 。代码排版确实不美了，但是功能很好地实现了， 且非常健壮，容错性强，而且对 SEO 没
有任何干扰，对辅助设备访问也没有任何干扰，百益无一害，有什么好难受的呢！
如何解决 text-decoration 下划线和文本重叠的问题
有没有什么办法让下划线不要靠得这么近，或者文字可以完整、清晰地显示呢？有。方法 很多，例如，浏览器支持并不好的 text-decoration-skip 属性、 CSS3 box-shadow 或者 background-image 模拟，甚至可以走 canvas 和 SVG 滤镜。然而，这些看上去很厉害的技巧 其实华而不实。转一圈后你会发现，最好的处理方法就是使用看似普通却功勋卓越的 border 属性。
a {text-decoration: none;border-bottom: 1px solid;padding-bottom: 1px;}
使用 border-bottom 模拟下划线的时候， border-color 最好省略，这样就会 使用文字的 color 颜色作为边框色，鼠标 hover 的时候，下划线会自动和文字一起变色
text-decoration:line-through => 可以直接使用 替换,兼容性很好
text-transform
全大写 text-transform:uppercase ，
全小写 text-transform:lowercase ，
1．场景一：身份证输入
我国的身份证最后一位有可能是字母 X ，且各种场合都是指定必须大写。如果我们给输入身份证的输入框设置：
input {text-transform: uppercase;}
那么就算我们敲进去的是小写 x，出现的也是大写的 X 模样，岂不甚好！
::after 、 ::before 、 ::backdrop、 ::first-letter 、 ::first-line 、 ::selection 等是伪元素， :active 、 :focus、 :checked 等被称为伪类
秒速五厘米
红太狼
分手后的思念是犯贱
系统管理员
亦凉
我会带着你远行
还没有评论，来说两句吧...