html第十二天-CSDN博客

本文链接：https://blog.csdn.net/wqx945/article/details/127218850

# 一、文本溢出处理显示省略号

![image-20210414133803719](C:/Users/Administrator/Desktop/web/系统班课程大纲/day08/笔记/image-20210414133803719.png)

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

#### 方法1：省略号

单行文本：

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

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

overflow：hidden；溢出隐藏

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

```html

<style>

.box{

width:200px;

background-color:red;

height:40px;

line-height:40px;

/* 关键代码 */

text-overflow: ellipsis; /* 溢出显示省略号 */

overflow: hidden; /* 溢出隐藏 */

white-space: nowrap; /* 强制不换行 */

}

</style>

<body>

<div class="box">MONTBLANC万宝龙男士经典系列椭圆形针扣皮带/腰带 38157</div>

</body>

```

#### 方法2：伪元素

```html

<style>

.box {

width: 200px;

height: 40px;

line-height: 40px;

background-color: orchid;

overflow: hidden;/* 溢出隐藏 */

white-space: nowrap;/* 强制不换行 */

position: relative;/* 子绝父相 */

}

.box:after {

content: "...";

position: absolute;

right: 0px;

bottom: 0px;

/* 设置宽度可以微调省略号的盒子大小，盖住多余的文字 */

width: 20px;

background-color: red;

}

</style>

</head>

<body>

可以沉迷，可以抱怨，可以奔溃，可以抱怨，可以奔溃，人要有自愈能力

</div>

</body>

```

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

#### 方法1：伪元素

```html

<style>

.box {

width: 200px;

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

height: 120px;

line-height: 30px;

background-color: red;

position: relative;

/* 文本两端对齐方式 */

text-align: justify;

/* 溢出隐藏 */

overflow: hidden;

}

.box:after {

content: "...";

position: absolute;

right: 0;

bottom: 0;

background-color: red;

width: 16px;

}

</style>

<body>

<div class="box">MONTBLANC万宝龙男士经典系列椭圆形针扣皮带/腰男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带带 38157</div>

</body>

```

#### 方法2：弹性盒

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

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

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

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

overflow：hidden；溢出隐藏

```html

<style>

.box2 {

/* 1.设置宽度 */

width: 200px;

background-color: pink;

line-height: 30px;

/* 2.设置旧版弹性盒 */

display: -webkit-box;

/* 3. 控制行数*/

-webkit-line-clamp: 2;

/* 4. 设置子元素的排列方式垂直排列*/

-webkit-box-orient: vertical;

/* 5.溢出隐藏 */

overflow: hidden;

}

</style>

<body>

可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力

</div>

</body>

```

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

```

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

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

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

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

```

# HTML参考手册

- 作用

- 帮助我们快速查阅完整的html元素并给出目标元素的相应释义

- 方便我们学习和使用

- 经常查阅文档是一个好的学习习惯

- 推荐的网址

- W3C : http://www.w3school.com.cn/

- MDN: https://developer.mozilla.org/zh-CN/

扩展

```html

word-wrap: break-word; 单词,数字强制换行

white-space: nowrap; 文字强制不换行

```

# 二、阿里矢量图标(字体图标)

网址：https://www.iconfont.cn/

#### 1.使用步骤

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

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

3.点击右上角的购物车

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

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

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

##### 使用三种方式：下载代码

##### 1、Unicode 方式引用

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

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

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

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

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

使用步骤如下：

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

```css

```

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

```html

```

##### 2、font-class 方式引用

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

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

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

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

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

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

使用步骤如下：

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

```html

```

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

```html

```

> " iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

##### 3、Symbol方式引用

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

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

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

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

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

使用步骤如下：

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

```html

```

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

```html

<style>

.icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

//改变样式

.icon{

width: 100px;

height: 100px;

font-size: 20px;

display: block;

}

</style>

```

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

```html

</svg>

```

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

1.添加至项目

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

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

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

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

```html

</svg>

```

# 三、图片格式

## PSD

.psd是Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。

## JPG：

- 色彩丰富【不支持透明】

- 压缩比高，生成文件体积小，

- 支持多种压缩级别可以控制文件大小

- 适用于：色彩丰富的图片（摄影图像（产品图，照片，渐变，banner图））

## GIF：

- 支持动画

- 支持透明（全透明）

- 颜色不够丰富，只支持256种颜色、文件小

- 适用于：色彩简单的logo/icon/动图

## PNG

png8(与gif相似)

png24

- 颜色丰富

- 支持alpha透明（全透明和全不透明，半透明）

- 早期的浏览器不支持PNG图像（IE6不支持）

- 适用于：透明背景图片【投影，发外光, 线条复杂（文字）】

## WebP

谷歌（google）10年推出一种新型图片格式

- 文件小，支持有损和无损压缩，支持动画、透明

- 但并不是所有浏览器都支持 webp

# 四、布局技巧

## 等高布局

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

![img](C:/Users/Administrator/Desktop/web/系统班课程大纲/day08/笔记/wps1.jpg)

### 实现要点（需求）

- 多列

- 每一列背景不同

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

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

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

#### 实现步骤

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

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

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

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.clearfix::after {

content: "";

display: block;

clear: both;

}

* {

margin: 0;

padding: 0;

}

.warp {

width: 1200px;

margin: 0 auto;

/* 溢出隐藏 */

overflow: hidden;

}

.left,

.center,

.right {

/* 最小高度 ----指定盒子可以大于等于100px 不用最小高度否则父盒子溢出隐藏就实现不了等高效果了 */

min-height: 200px;

float: left;

padding-bottom: 10000px;

margin-bottom: -10000px;

}

.left {

width: 200px;

background-color: blue;

}

.center {

width: 700px;

background-color: tomato;

}

.right {

width: 300px;

background-color: purple;

}

</style>

</head>

<body>

</div>

</body>

</html>

```

### 优缺点

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

- 可以实现任意列等高布局

### 方法二:利用内容撑开父元素的特点，实现等高布局

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

- 实现

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

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

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

父元素设置溢出隐藏

### 实现步骤

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

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

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

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

- 父元素设置overflow: hidden;

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.clearfix::after {

content: "";

display: block;

clear: both;

}

* {

margin: 0;

padding: 0;

}

.warp {

width: 1200px;

margin: 0 auto;

overflow: hidden;

}

.col1 {

background-color: yellow;

}

.col2 {

background-color: blue;

position: relative;

left: 200px;

}

.col3 {

background-color: pink;

position: relative;

left: 700px;

}

.left,

.center,

.right {

float: left;

min-height: 200px;

}

.left {

width: 200px;

margin-left: -900px;

}

.center {

width: 700px;

margin-left: -700px;

}

.right {

width: 300px;

}

</style>

</head>

<body>

</div>

</body>

</html>

```

### 优缺点

- 结构复杂

- 可以创建任意列数