7day-行内元素垂直对齐方式-元素的溢出处理、iconfont使用

最新推荐文章于 2024-10-02 17:15:49 发布

DaB210

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量652

点赞数 23

分类专栏： HTML&CSS 文章标签： html css

本文链接：https://blog.csdn.net/DaB210/article/details/137170565

版权

HTML&CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细解释了行内元素的高度如何由line-height控制，讨论了行距的概念，介绍了行框和内联框在浏览器渲染中的作用，以及veruical-align属性的使用。同时涵盖了文本溢出处理和iconfont在CSS中的应用。

摘要由CSDN通过智能技术生成

行内元素垂直对齐方式

行的高度

一个空的div标签默认高度为0，在添加文字之后，div高度出现，那么这个高度是从哪来的？或者说是由哪个css属性决定的？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      font-size: 0;
      line-height: 20px;
      border: 1px solid #000;
      margin-bottom: 50px;
    }
    .box2{
      font-size: 20px;
      line-height: 0;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="box">我是一个div1</div>
  <div class="box2">我是一个div2</div>
  <div>123123</div>
</body>
</html>

盒子的高度实际上是由line-height来控制的。或者换句话说，这样的文本类型的纯内联元素高度完全由line-height来决定。

行距：指相邻文本间上一个文本行基线和下一个文本行顶线之间的距离。（line-height - font-size = 行距）
一般浏览器，如果不设置行高，则默认行高为当前字体大小的1.4倍。不同浏览器比例不一样。

行的构成

行内框：是一个浏览器渲染模型中的概念，无法显示出来。但又确实存在，他的高度就是行高指定的高度
行框：同行内框是类似的概念，行框是指本行的一个虚拟举行框，也是浏览器渲染模型中的一个概念。行框的高度等于本行内所有元素中行内框最大的值（以行高最大的行内框为基准，其他的行采用自己的对齐方式向基准对齐，最终计算行框的高度）

veruical-align 设置元素的垂直对齐方式

veruical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | %/px

baseline：基线对齐（默认值）
sub：下标显示，将元素的基线相对于基准元素的基线下降（下标字的位置）
super：上标显示，将元素的基线相对于基准元素的基线升高（上标字的位置）
top：顶端对齐，是将元素的行内框的顶端与行框的顶端对齐
text-top：文本的顶端对齐,是将元素行内框的顶端，与文本行的顶线对齐
middle：中部对齐，通常使用在图片上，将图片的垂直方向的中线与文本行刚的中线对齐。
bottom：底端对齐,与top相反，将元素行内框的底端与行框的底端对齐
text-bottom：文本的底端对齐，将元素行内框的底端，与文本行的底线对齐
%/px：具体的数值,将元素的基线进行抬升或下沉的量,(百分比的参考对象为元素自身行内框的高度，而非行框的高度)。可以设置负值。

中线的定义：中线位于基线的上方，与基线的距离为小写字母x高度的一半（即0.5ex），而ex同font-size相关，大部分浏览器认为1ex = 0.5em，因此会将基线以上四分之一em处作为中线来对齐。

元素内容的溢出处理

overflow属性用于处理当元素内的内容溢出时的处理

overflow:visible | hidden | scroll | auto

visible:默认值，内容不会被剪裁，会呈现到元素框之外
hidden：内容会被剪裁，超出部分会被隐藏掉
scroll：内容会被剪裁，但是浏览器会以滚动条的形式来查看其余超出部分的内容
auto：如果内容被剪裁，浏览器会显示滚动条，如果没有超出则不显示滚动条

实现文本超出隐藏为省略号

单行文本溢出处理

white-space: nowrap;
让文本不换行显示
text-overflow:ellipsis;
表示以怎样的形式展示超出的部分，这里ellipsis代表用省略号代替溢出的文本。
overflow:hidden;
核心代码：超出部分隐藏

{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

多行文本溢出处理

{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

核心代码：overflow:hidden;
display:-webkit-box;：这是为了让下面两个属性生效的前置条件，将对象作为弹性伸缩盒子模型展示。
-webkit-box-orient:vertical;：设置伸缩盒对象的子元素的排列方式
-webkit-line-clamp:2;：用来限制在一个块元素显示的文本行数

-webkit-line-clamp:2;这个属性的特殊性，我们不需要在单独设置text-overflow:ellipsis;，它默认超出的文本会处理为省略号

iconfont

字面意思理解，就是图标字体，资源占用比图片下的图标。

使用

引入方式

开发项目时推荐使用下载至本地引入项目

通过图标项目生成的cdn链接引入
可以通过页面的link标签引入或者script标签引入

<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4061964_clp4fkopsie.css">

注意需要手动添加请求协议（http头或者https）
2. 将图标文件下载至本地，然后将文件放入到项目文件中，引入到需要使用的页面即可。

--iconfont.css
--iconfont.js
--iconfont.ttf
--iconfont.woff
--iconfont.woff2

之后只需要将iconfont.css或iconfont.js引入页面即可。

使用方法

通过Font Class使用（最常用的方法）

图标不会保留原本的颜色，会变成黑白。

文件引入后，我们使用图标一般搭配i标签使用，通过为标签添加class类名，写上iconfont前缀中间空格隔开加上图标的class

  <i class="iconfont icon-shouye"></i>
  <i class="iconfont icon-weixin"></i>

通过unicode使用

图标颜色会变成黑白。

将网页生成的代码复制到当前页面的样表中。

或者直接引入iconfont.css文件

样式定义完成通过为标签添加iconfont类名，之后在标签内写入图标的字符代码。

<i class="iconfont">&#xe607;</i>

通过Symbol使用

可以保留图标雨原来的色彩

通过script标签引入js依赖文件

<svg class="icon">
      <use xlink:href="#icon-weixin"></use>
    </svg>
    <script src="http://at.alicdn.com/t/c/font_4061964_2rjeb6k1ogs.js"></script>