CSS世界笔记(三)

我会带着你远行 2021-07-26 14:58 438阅读 0赞

**目录**

1.  css的层叠规则

2.  文本处理

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  新世界还没有到来的时候（注意这里的前提），层叠顺序规则

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70][]

** 层叠准则**

（ 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;
    }

1.  svg  格式是为了兼容  iOS 4.1  及其之前的版本，考虑到现如今  iOS  的版本数已经翻了一 
    
    番，所以  svg  格式的兼容代码大可舍弃。
2.  eot 格式是 IE 私有的。注意，目前所有版本的 IE 浏览器都支持 eot 格式，并不是只 有  IE6 ～ IE8  支持。只是， IE6 ～ IE8  仅支持  eot  这一种字体格式。
3.  woff 是 web open font format 几个词的首字母简写，是专门为 Web 开发而设计的字体格式，显然是优先使用的字体格式，其字体尺寸更小，加载更快。Android 4.4 开始全面支持。
4.  woff2  是比  woff  尺寸更小的字体，小得非常明显。因此， Web  开发第一首选字体就 是 woff2 ，只是此字体目前仅  Chrome  和  Firefox  支持得比较好。
5.  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  可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等。
> 
>

### ![20200517155924610.png][] ###

### **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（中文/日文/韩文）之类的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1][]

### text-align:justify ###

**在默认设置下，text-align:justify 要想有两端对齐的效果，需要满足两点：**

**一是有分隔点，如空格；**

**二是要超过一行，此时非最后一行内容会两端对齐。**

实现两端对齐:

> 关于底部莫名高度的问题
> 
> 一是容器设置 font:size:0，列表 font-size 再还原；
> 
> 二是辅助两端对齐的内联元素设置 vertical-align:top 或 vertical-align:bottom。

.justify {
      background-color: #f0f3f9;
      text-align: justify;
      font-size: .1px;  // 兼容ie
      font-size: -webkit-calc(0px + 0px); // 兼容现代浏览器
    }
    .justify:after {
      content: "";
      display: inline-table;
      width: 100%;
      vertical-align: bottom;
    }
    .justify li{
      display:inline-block;
      fons-size:14px;
    }

### 实现瀑布流 ###

.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 => 可以直接使用 <del></del>替换,兼容性很好**

### **text-transform** ###

> 全大写  text-transform:uppercase ， 
> 
>  
> 
> 全小写  text-transform:lowercase ，
> 
>

** 1．场景一：身份证输入**

我国的身份证最后一位有可能是字母 X ，且各种场合都是指定必须大写。如果我们给输入身份证的<input>输入框设置：

input {
     text-transform: uppercase;
    }

那么就算我们敲进去的是小写 x，出现的也是大写的 X 模样，岂不甚好！

::after 、 ::before 、 ::backdrop、 ::first-letter 、 ::first-line 、 ::selection  等是伪元素， :active 、 :focus、 :checked  等被称为伪类

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70]: /images/20210726/4857e3feaae34482aa1967ce73cd36f0.png
[20200517155924610.png]: /images/20210726/c3e2d44abf1549c493d2f5153e725861.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1]: /images/20210726/3837a83dfd924f46a166383695f8f150.png