每日一结笔记

一、单行文本溢出显示省略号

方法1：省略号：          

width：200px；设置盒子的宽度(限制宽度)

white-space：nowrap；设置文本不换行

overflow：hidden；溢出隐藏

text-overflow：ellipsis；文本溢出的显示省略号

方法2：伪元素：

 overflow: hidden；溢出隐藏

 white-space: nowrap;强制不换行

 position: relative;子绝父相、

二、多行文本溢出显示省略号

方法1：伪元素：

通过行高和高度控制显示的行数

 height: 120px;

 line-height: 30px;

 background-color: red;

 position: relative;

 文本两端对齐方式

 text-align: justify;

 溢出隐藏

overflow: hidden;

方法2：弹性盒：

​width：200px；设置盒子的宽度(限制宽度)

display：-webkit-box；将对象作为弹性伸缩盒子模型显示

-webkit-line-clamp：2；用来限制在一个快元素显示的文本行数

-webkit-box-orient：vertical；设置或检索伸缩盒对象的子元素的排列方式

overflow：hidden；溢出隐藏

注意：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端

```

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 设置或伸缩盒对象的子元素的排列方式 。

vertical:从上到下垂直排列子元素

三、阿里矢量图标(字体图标)

（1）.使用步骤

1.登录阿里矢量图标网站

  2.搜索想要的图标且加到购物车

  3.点击右上角的购物车

  4.选择下载代码，下载完成后解压文件

  5.把下载的文件放到你的项目中

  6.引入iconfont.css文件或者iconfont.js文件

1.使用三种方式：下载代码（第一种方式）

（1）、Unicode 方式引用

Unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。

支持按字体的方式去动态调整图标大小，颜色等等。

但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

使用步骤如下：

第一步：引入项目下面生成的 fontclass代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取字体编码，应用于页面、、

（2）、font-class 方式引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

兼容性良好，支持 IE8+，及所有现代浏览器。

相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。

因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：引入项目下面生成的 fontclass代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

 （3）、Symbol方式引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇[文章]() 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。

通过一些技巧，支持像字体那样，通过 `font-size`, `color` 来调整样式。

兼容性较差，支持 IE9+，及现代浏览器。

浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：引入项目下面生成的 symbol代码

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行

第三步：挑选相应图标并获取类名，应用于页面

2.引入字体图标第二种方式：添加至项目

1.添加至项目

2.选择要添加的项目（如果没有项目点击右上角新建项目），点击确定

3.点击查看在线链接，复制在线链接即可

4.新添加图标后点击更新代码（ 下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式）

5.把之前的链接替换掉就可以了

 四、布局技巧

等高布局：

等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。

实现要点（需求）：

多列

每一列背景不同

其中任意一列变高，其它列同步变高

方法一：

利用内外间距相抵消，父元素设置overflow:hidden;属性实现

原理：利用padding和margin负值 相抵销

实现步骤

每一列使用padding-bottom值提前撑开背景颜色；

将每一列用padding值撑开的多余的占位让margin负值抵消；

父元素设置溢出隐藏(把多余撑开的部分隐藏掉)

优缺点

伪等高，需要合理的控制padding和margin值

可以实现任意列等高布局

方法二：

利用内容撑开父元素的特点，实现等高布局

原理：嵌套元素内容能够撑开外部所有元素的高度

实现三个嵌套div负责背景，三列放在最内部的div中；

通过相对定位，分配三列背景的位置；

通过margin负值，将内容移动到对应的背景处；

父元素设置溢出隐藏

实现步骤：

结构——左侧背景盒中嵌套中间背景盒，中间背景盒中嵌套右侧背景盒；在右侧背景盒中设置左、中、右盒；

左侧背景盒、中间背景盒、右侧背景盒分别设置背景颜色。左、中、右盒分别设置宽度，高度（最小高度）、浮动

通过相对定位移动背景盒到指定位置。将中间背景盒向右移动左侧盒子宽度（left: 左侧盒宽度）、右侧背景盒向移动中间盒子宽度（left: 中间盒宽度）

通过margin-left负值移动内容到指定背景处。将左侧盒子向左移动 左盒宽度+中间盒子的宽度（margin-left: -（左盒+中盒宽度））；将中间盒子向左移动中间盒的宽度（margin-left - 中间盒子的宽度）

父元素设置overflow: hidden;

优缺点

结构复杂

可以创建任意列数