理解CSS中的基线和行高概念
最编程
2024-02-15 17:24:33
...
CSS行高——line-height
顶线、中线、基线、底线
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
span
{
padding:0px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
</div>
</div>
</body>
<html>
从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。
行高、行距与半行距
行高、行距与半行距：
- 行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
- 行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
- 半行距是行距的一半，即区域
3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2。
内容区、行内框、行框
内容区、行内框、行框：
内容区：底线和顶线包裹的区域，即下图深灰色背景区域。
行内框：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（
padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距[（行高-字体size）/2]分别增加/减少到内容区域的上下两边（深蓝色区域）。行框（
line box）：行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。
line-height
line-height属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
| 值 | 说明 |
|---|---|
normal |
默认,设置合理的行间距。 |
number |
设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数 |
length |
设置固定的行间距 |
% |
基于当前字体尺寸的百分比行间距 |
inherit |
规定应该从父元素继承 line-height 属性的值 |
单行文字垂直居中
line-height的大小为元素的高度即可实现效果。
<div style="line-height:100px;border:dashed 1px #0e0;">
This is a test.
</div>
元素对行高影响
行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。
<div style="border:dashed 1px #0e0;margin-bottom:30px;">
<span style="font-size:14px;background-color:#999;">This is a test</span>
</div>
<div style="border:dashed 1px #0e0;">
<span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
</div>
第二个
span虽然因为padding原因内容区变大，当行高并未改变。
行高的继承
行高是可继承的，但并不是简单的copy父元素行高，继承的是计算得来的值。
<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;">
<p style="font-size:30px;">
1232<br/>
</p>
</div>
如果属性值没有单位，则浏览器会直接继承这个因子（数值），而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height值。
推荐阅读
-
epoll简介及触发模式（accept、read、send）-epoll的简单介绍 epoll在LT和ET模式下的读写方式 一、epoll的接口非常简单，一共就三个函数：1. int epoll_create(int size);创建一个epoll的句柄，size用来告诉内核这个监听的数目一共有多大。这个参数不同于select中的第一个参数，给出最大监听的fd+1的值。需要注意的是，当创建好epoll句柄后，它就是会占用一个fd值，在linux下如果查看/proc/进程id/fd/，是能够看到这个fd的，所以在使用完epoll后，必须调用close关闭，否则可能导致fd被耗尽。2. int epoll_ctl(int epfd, int op, int fd, struct epoll_event *event);epoll的事件注册函数，它不同与select是在监听事件时告诉内核要监听什么类型的事件，而是在这里先注册要监听的事件类型。第一个参数是epoll_create的返回值，第二个参数表示动作，用三个宏来表示：EPOLL_CTL_ADD：注册新的fd到epfd中；EPOLL_CTL_MOD：修改已经注册的fd的监听事件；EPOLL_CTL_DEL：从epfd中删除一个fd；第三个参数是需要监听的fd，第四个参数是告诉内核需要监听什么事，struct epoll_event结构如下：struct epoll_event { __uint32_t events; /* Epoll events */ epoll_data_t data; /* User data variable */};events可以是以下几个宏的集合：EPOLLIN ：表示对应的文件描述符可以读（包括对端SOCKET正常关闭）； EPOLLIN事件：EPOLLIN事件则只有当对端有数据写入时才会触发，所以触发一次后需要不断读取所有数据直到读完EAGAIN为止。否则剩下的数据只有在下次对端有写入时才能一起取出来了。现在明白为什么说epoll必须要求异步socket了吧？如果同步socket，而且要求读完所有数据，那么最终就会在堵死在阻塞里。 EPOLLOUT：表示对应的文件描述符可以写； EPOLLOUT事件：EPOLLOUT事件只有在连接时触发一次，表示可写，其他时候想要触发，那要先准备好下面条件：1.某次write，写满了发送缓冲区，返回错误码为EAGAIN。2.对端读取了一些数据，又重新可写了，此时会触发EPOLLOUT。简单地说：EPOLLOUT事件只有在不可写到可写的转变时刻，才会触发一次，所以叫边缘触发，这叫法没错的！其实，如果真的想强制触发一次，也是有办法的，直接调用epoll_ctl重新设置一下event就可以了，event跟原来的设置一模一样都行（但必须包含EPOLLOUT），关键是重新设置，就会马上触发一次EPOLLOUT事件。1. 缓冲区由满变空.2.同时注册EPOLLIN | EPOLLOUT事件，也会触发一次EPOLLOUT事件这个两个也会触发EPOLLOUT事件 EPOLLPRI：表示对应的文件描述符有紧急的数据可读（这里应该表示有带外数据到来）；EPOLLERR：表示对应的文件描述符发生错误；EPOLLHUP：表示对应的文件描述符被挂断；EPOLLET： 将EPOLL设为边缘触发(Edge Triggered)模式，这是相对于水平触发(Level Triggered)来说的。EPOLLONESHOT：只监听一次事件，当监听完这次事件之后，如果还需要继续监听这个socket的话，需要再次把这个socket加入到EPOLL队列里3. int epoll_wait(int epfd, struct epoll_event * events, int maxevents, int timeout);等待事件的产生，类似于select调用。参数events用来从内核得到事件的集合，maxevents告之内核这个events有多大，这个maxevents的值不能大于创建epoll_create时的size，参数timeout是超时时间（毫秒，0会立即返回，-1将不确定，也有说法说是永久阻塞）。该函数返回需要处理的事件数目，如返回0表示已超时。-------------------------------------------------------------------------------------------- 从man手册中，得到ET和LT的具体描述如下EPOLL事件有两种模型：Edge Triggered (ET)Level Triggered (LT)假如有这样一个例子：1. 我们已经把一个用来从管道中读取数据的文件句柄(RFD)添加到epoll描述符2. 这个时候从管道的另一端被写入了2KB的数据3. 调用epoll_wait(2)，并且它会返回RFD，说明它已经准备好读取操作4. 然后我们读取了1KB的数据5. 调用epoll_wait(2)......Edge Triggered 工作模式：如果我们在第1步将RFD添加到epoll描述符的时候使用了EPOLLET标志，那么在第5步调用epoll_wait(2)之后将有可能会挂起，因为剩余的数据还存在于文件的输入缓冲区内，而且数据发出端还在等待一个针对已经发出数据的反馈信息。只有在监视的文件句柄上发生了某个事件的时候 ET 工作模式才会汇报事件。因此在第5步的时候，调用者可能会放弃等待仍在存在于文件输入缓冲区内的剩余数据。在上面的例子中，会有一个事件产生在RFD句柄上，因为在第2步执行了一个写操作，然后，事件将会在第3步被销毁。因为第4步的读取操作没有读空文件输入缓冲区内的数据，因此我们在第5步调用 epoll_wait(2)完成后，是否挂起是不确定的。epoll工作在ET模式的时候，必须使用非阻塞套接口，以避免由于一个文件句柄的阻塞读/阻塞写操作把处理多个文件描述符的任务饿死。最好以下面的方式调用ET模式的epoll接口，在后面会介绍避免可能的缺陷。 i 基于非阻塞文件句柄 ii 只有当read(2)或者write(2)返回EAGAIN时才需要挂起，等待。但这并不是说每次read时都需要循环读，直到读到产生一个EAGAIN才认为此次事件处理完成，当read返回的读到的数据长度小于请求的数据长度时，就可以确定此时缓冲中已没有数据了，也就可以认为此事读事件已处理完成。Level Triggered 工作模式相反的，以LT方式调用epoll接口的时候，它就相当于一个速度比较快的poll(2)，并且无论后面的数据是否被使用，因此他们具有同样的职能。因为即使使用ET模式的epoll，在收到多个chunk的数据的时候仍然会产生多个事件。调用者可以设定EPOLLONESHOT标志，在 epoll_wait(2)收到事件后epoll会与事件关联的文件句柄从epoll描述符中禁止掉。因此当EPOLLONESHOT设定后，使用带有 EPOLL_CTL_MOD标志的epoll_ctl(2)处理文件句柄就成为调用者必须作的事情。然后详细解释ET, LT:LT(level triggered)是缺省的工作方式，并且同时支持block和no-block socket.在这种做法中，内核告诉你一个文件描述符是否就绪了，然后你可以对这个就绪的fd进行IO操作。如果你不作任何操作，内核还是会继续通知你的，所以，这种模式编程出错误可能性要小一点。传统的select/poll都是这种模型的代表．ET(edge-triggered)是高速工作方式，只支持no-block socket。在这种模式下，当描述符从未就绪变为就绪时，内核通过epoll告诉你。然后它会假设你知道文件描述符已经就绪，并且不会再为那个文件描述符发送更多的就绪通知，直到你做了某些操作导致那个文件描述符不再为就绪状态了(比如，你在发送，接收或者接收请求，或者发送接收的数据少于一定量时导致了一个EWOULDBLOCK 错误）。但是请注意，如果一直不对这个fd作IO操作(从而导致它再次变成未就绪)，内核不会发送更多的通知(only once),不过在TCP协议中，ET模式的加速效用仍需要更多的benchmark确认（这句话不理解）。在许多测试中我们会看到如果没有大量的idle -connection或者dead-connection，epoll的效率并不会比select/poll高很多，但是当我们遇到大量的idle- connection(例如WAN环境中存在大量的慢速连接)，就会发现epoll的效率大大高于select/poll。（未测试）另外，当使用epoll的ET模型来工作时，当产生了一个EPOLLIN事件后，读数据的时候需要考虑的是当recv返回的大小如果等于请求的大小，那么很有可能是缓冲区还有数据未读完，也意味着该次事件还没有处理完，所以还需要再次读取： 这里只是说明思路（参考《UNIX网络编程》） while(rs) {buflen = recv(activeevents[i].data.fd, buf, sizeof(buf), 0);if(buflen < 0){// 由于是非阻塞的模式,所以当errno为EAGAIN时,表示当前缓冲区已无数据可读// 在这里就当作是该次事件已处理处.if(errno == EAGAIN)break; else return; }else if(buflen == 0) { // 这里表示对端的socket已正常关闭. } if(buflen == sizeof(buf) rs = 1; // 需要再次读取 else rs = 0; } 还有，假如发送端流量大于接收端的流量(意思是epoll所在的程序读比转发的socket要快),由于是非阻塞的socket,那么send函数虽然返回,但实际缓冲区的数据并未真正发给接收端,这样不断的读和发，当缓冲区满后会产生EAGAIN错误(参考man send),同时,不理会这次请求发送的数据.所以,需要封装socket_send的函数用来处理这种情况,该函数会尽量将数据写完再返回，返回-1表示出错。在socket_send内部,当写缓冲已满(send返回-1,且errno为EAGAIN),那么会等待后再重试.这种方式并不很完美,在理论上可能会长时间的阻塞在socket_send内部,但暂没有更好的办法. ssize_t socket_send(int sockfd, const char* buffer, size_t buflen) { ssize_t tmp; size_t total = buflen; const char *p = buffer; while(1) { tmp = send(sockfd, p, total, 0); if(tmp < 0) { // 当send收到信号时,可以继续写,但这里返回-1. if(errno == EINTR) return -1; // 当socket是非阻塞时,如返回此错误,表示写缓冲队列已满, // 在这里做延时后再重试. if(errno == EAGAIN) { usleep(1000); continue; } return -1; } if((size_t)tmp == total) return buflen; total -= tmp; p += tmp; } return tmp; } 二、epoll在LT和ET模式下的读写方式 在一个非阻塞的socket上调用read/write函数, 返回EAGAIN或者EWOULDBLOCK(注: EAGAIN就是EWOULDBLOCK) 从字面上看, 意思是: * EAGAIN: 再试一次 * EWOULDBLOCK: 如果这是一个阻塞socket, 操作将被block * perror输出: Resource temporarily unavailable 总结: 这个错误表示资源暂时不够, 可能read时, 读缓冲区没有数据, 或者, write时，写缓冲区满了 。 遇到这种情况, 如果是阻塞socket, read/write就要阻塞掉。 而如果是非阻塞socket, read/write立即返回-1, 同 时errno设置为EAGAIN. 所以, 对于阻塞socket, read/write返回-1代表网络出错了. 但对于非阻塞socket, read/write返回-1不一定网络真的出错了. 可能是Resource temporarily unavailable. 这时你应该再试, 直到Resource available. 综上, 对于non-blocking的socket, 正确的读写操作为: 读: 忽略掉errno = EAGAIN的错误, 下次继续读 写: 忽略掉errno = EAGAIN的错误, 下次继续写 对于select和epoll的LT模式, 这种读写方式是没有问题的. 但对于epoll的ET模式, 这种方式还有漏洞. epoll的两种模式 LT 和 ET
-
NeurIPS 2022 | 最强斗地主AI！网易互娱AI Lab提出基于完美信息蒸馏的方法-完美信息蒸馏(PTIE) 在斗地主游戏中，非完美信息的引入主要是由于三位玩家均不能看到别人的手牌，对于任意一位玩家而言，仅可知道其余两位玩家当前手牌的并集，而难于精准判断每位玩家当前手牌。完美信息蒸馏的思路是针对这种非完美问题，构建一个第三方角色，该角色可以看到三位玩家的手牌，该角色在不告知每位玩家完美信息的情况下通过信息蒸馏的方式引导玩家打出当前情况下合理的出牌。 以强化学习常用的 Actor-Critic 算法为例，PTIE 在 Actor-Critic 算法的应用中可以利用 Critic 的 Value 输出作为蒸馏手段来提升 Actor 的表现。具体而言即在训练中 Critic 的输入为完美信息(包含所有玩家的手牌信息)，Actor 的输入为非完美信息(仅包含自己手牌信息)，此种情况下 Critic 给予的 Value 值包含了完美信息，可以更好地帮助 Actor 学习到更好的策略。 从更新公式上来看，正常的 Actor-Critic 算法 Actor 更新的方式如下： 在 PTIE 模式下，对于每个非完美信息状态 h，我们可以在 Critic 中构建对应的完美信息状态 D(h)，并用 Critic 的输出来更新 Actor 的策略梯度，从而达到完美信息蒸馏的效果。 PTIE 框架的整体结构如下图所示： 无论是训练还是执行过程中智能体都不会直接使用完美信息，在训练中通过蒸馏将完美信息用于提升策略，从而帮助智能体达到一个更高的强度。 PTIE 的另一种蒸馏方式是将完美信息奖励引入到奖励值函数的训练中，PerfectDou 提出了基于阵营设计的完美信息奖励 node reward，以引导智能体学习到斗地主游戏中的合作策略，其定义如下： 如上所示，完美信息部分 代表 t 时刻地主手牌最少几步可以出完，在斗地主游戏中可以近似理解为是距游戏获胜的距离， 代表 t 时刻地主阵营和农民阵营距游戏获胜的距离之差， 为调节系数。通过此种奖励设计，在训练时既可以一定程度地引入各玩家的手牌信息(出完的步数需要知道具体手牌才能计算)，同时也鼓励农民以阵营的角度做出决策，提升农民的合作性。 特征构建： PerfectDou 针对牌类游戏的特点主要构建了两部分特征：牌局状态特征和动作特征。其中牌局状态特征主要包括当前玩家手牌牌型特征、当前玩家打出的卡牌牌型特征、玩家角色、玩家手牌数目等常用特征，动作特征主要用于刻画当前状态下玩家的所有可能出牌，包括了每种出牌动作的牌型特征、动作的卡牌数目、是否为最大动作等特征。 牌型特征为 12 * 15 的矩阵，如下图所示： 该矩阵前 4 行代表对应每种卡牌的张数，5-12 行代表该种卡牌的种类和对应位置。 网络结构和动作空间设计 针对斗地主游戏出牌组合数较多的问题，PerfectDou 基于 RLCard 的工作上对动作空间进行了简化，对占比最大的两个出牌牌型：飞机带翅膀和四带二进行了动作压缩，将整体动作空间由 27472 种缩减到 621 种。 PerfectDou 策略网络结构如下图所示： 策略网络结构同样分为两部分：状态特征部分和动作特征部分。 在状态特征部分，LSTM 网络用于提取玩家的历史行为特征，当前牌局状态特征和提取后的行为特征会再通过多层的 MLP 网络输出当前的状态信息 embedding。 在动作特征部分，每个可行动作同样会经过多层 MLP 网络进行编码，编码后的动作特征会与其对应的状态信息 embedding 经过一层 MLP 网络计算两者间的相似度，并经由 softmax 函数输出对应的动作概率。 实验结果
-
项目管理中的三个重要概念：检查点、里程碑和基线
-
Android 开发中 nodpi、xhdpi、hdpi、mdpi、ldpi 的概念 - 术语和概念 屏幕尺寸 屏幕的物理尺寸，基于屏幕的对角线长度（如 2.8 英寸、3.5 英寸）。 简而言之，安卓系统将所有屏幕尺寸简化为三大类：大、普通和小。 程序可以为这三种屏幕尺寸提供三种不同的布局选项，然后系统会以合适的方式将布局选项呈现到相应的屏幕上，这个过程不需要程序员用代码进行干预。 屏幕纵横比 屏幕的物理长度与物理宽度之比。程序只需使用系统提供的资源分类器 long（长）和 notlong（不长），就能为具有特定长宽比的屏幕提供配制材料。 分辨率 屏幕的像素总数。请注意，分辨率并不意味着长宽比，尽管在大多数情况下，分辨率表示为 "宽度 x 长度"。在安卓系统中，程序一般不直接处理分辨率。 密度 根据屏幕分辨率，沿屏幕宽度和长度排列的像素数量。 密度较低的屏幕在长度和宽度方向上的像素都相对较少，而密度较高的屏幕通常会在同一区域内排列很多甚至非常非常多的像素。屏幕的密度非常重要；例如，一个界面元素（如按钮）的长度和宽度以像素为单位，在低密度屏幕上会显得很大，但在高密度屏幕上就会显得很小。 独立于密度的像素（DIP）是指程序用来定义界面元素的抽象意义上的像素。它作为一个与实际密度无关的单位，帮助程序员构建布局方案（界面元素的宽度、高度和位置）。 与密度无关的像素在逻辑上与像素密度为 160 DPI 的屏幕上的像素大小相同，而 160 DPI 是安卓平台默认的显示设备。在运行时，平台会以目标屏幕的密度为基准，"透明 "地处理所有所需的 DIP 缩放操作。要将与密度无关的像素转换为屏幕像素，可以使用一个简单的公式：像素 = DIP * (密度 / 160)。例如，在 240 DPI 的屏幕上，1 个 DIP 等于 1.5 个物理像素。强烈建议使用 DIP 来定义程序界面的布局，因为这样可以确保用户界面在所有分辨率的屏幕上都能正常显示。 为了简化程序员在面对各种分辨率时的麻烦，也为了让各种分辨率的平台都能直接运行这些程序，Android 平台将所有屏幕以密度和分辨率作为分类方式，分别分为三类：- 三大尺寸：大、普通、小；- 三种不同密度：高（hdpi）、中（mdpi）和低（ldpi）。DPI 表示 "每英寸点数"，即每英寸的像素数。如果需要，程序可以为不同的屏幕尺寸提供不同的资源（主要是布局），为不同的屏幕密度提供不同的资源（主要是位图）。除此之外，程序无需对屏幕尺寸或密度进行任何额外处理。执行时，平台会根据屏幕本身的尺寸和密度特性自动加载相应的资源，并将其从逻辑像素（DIP，用于定义界面布局）转换为屏幕上的物理像素。
-
Java 类加载器的作用 - 简介：类加载器是 Java™ 中一个非常重要的概念。类加载器负责将 Java 类的字节码加载到 Java 虚拟机中。本文首先详细介绍了 Java 类加载器的基本概念，包括代理模型、加载类的具体过程和线程上下文类加载器等。然后介绍了如何开发自己的类加载器，最后介绍了类加载器在 Web 容器和 OSGi™ 中的应用。 类加载器是 Java 语言的一项创新，也是 Java 语言广受欢迎的重要原因之一。它允许将 Java 类动态加载到 Java 虚拟机中并执行。类加载器从 JDK 1.0 开始出现，最初是为了满足 Java Applets 的需求而开发的，Java Applets 需要从远程位置下载 Java 类文件并在浏览器中执行。现在，类加载器已广泛应用于网络容器和 OSGi。一般来说，Java 应用程序的开发人员不需要直接与类加载器交互；Java 虚拟机的默认行为足以应对大多数情况。但是，如果遇到需要与类加载器交互的情况，而您又不太了解类加载器的机制，就很容易花费大量时间调试异常，如 ClassNotFoundException 和 NoClassDefFoundError。本文将详细介绍 Java 的类加载器，帮助读者深入理解 Java 语言中的这一重要概念。下面先介绍一些基本概念。 类加载器的基本概念 顾名思义，类加载器用于将 Java 类加载到 Java 虚拟机中。一般来说，Java 虚拟机以如下方式使用 Java 类：Java 源程序（.java 文件）经 Java 编译器编译后转换为 Java 字节代码（.class 文件）。类加载器负责读取 Java 字节代码并将其转换为 java.lang 实例。每个实例都用来表示一个 Java 类。通过该实例的 newInstance 方法创建该类的对象。实际情况可能更加复杂，例如，Java 字节代码可能是由工具动态生成或通过网络下载的。 基本上，所有类加载器都是 java.lang.ClassLoader 类的实例。下面将详细介绍这个 Java 类。 java.lang.ClassLoader 类简介 java.lang.ClassLoader 类的基本职责是根据给定类的名称为其查找或生成相应的字节码，然后根据这些字节码定义一个 Java 类，即 java.lang.Class 类的实例。除此之外，ClassLoader 还负责加载 Java 应用程序所需的资源，如图像文件和配置文件。不过，本文只讨论它加载类的功能。为了履行加载类的职责，ClassLoader 提供了许多方法，其中比较重要的方法如表 1 所示。下文将详细介绍这些方法。 表 1.与加载类相关的 ClassLoader 方法
-
标题：混淆概念详细解析：Python中类、对象、方法、函数和属性的区别和理解
-
理解CSS中的行高与垂直间距
-
理解并掌握CSS中的行高属性 - line-height
-
如何在HTML5中设置每行的行高？CSS如何控制行高？
-
理解CSS基线和行高的本质