字体大小,行高,高度

article/2025/11/4 23:48:23

ie6下,font-size  等于 line-height 时,字体受行高限制,显示不全。

如图:


所以应该将行高设置为大于字体值2px,切记不要这样写font:12px/12px,要12px/14px

///

1,font-size 没有设置值时,各浏览器的默认值基本都为16px。

如果设置font-family:"宋体",那么都为16px,如果不设置font-family,IE下中文为16px 英文为17px。主要受了字体的影响。

2,如果font-size:12px,line-height不设置,height不设置。

则有:line-height = font-size + 2px = 14px
    height = line-height = 14px;

3,如果font-size:12px,line-height:12px,会出现上面所述IE6bug。


4,如果font-size:14px,line-height:12px,height不设置

则有:font-size:14px,line-height:12px;,height:12px。


总结:1,字体大小会影响行高,及行高=字体大小+2px(前提是行高不设置值,如果设置值,则为设置的值)。
    2,但是行高不能影响字体大小。高度也不能影响字体大小(见下面例子,很重要)。
    3,行高会影响高度,行高等于高度(如果高度不设置)。

///



如上代码,类wrapper只设置了高度,却没有设置字体大小,那么默认的字体大小为16px。类test字体大小,行高均为12px。
此时显示wrapper不能包住test。见下图:
实际上是包住的。因为wapper字体为16px,test算wapper的内容,所以test应该在16px范围内。但是wapper的高度为12px显示区域为12px。要问test是否还在盒模型wapper内,我想是的。height只是盒子的一个属性。并不代表整个盒子。此时,如果将wapper的字体设置为10px,或者高度不设置,则默认为16px+2 px。那么就能包住test了。

///
///

http://chatgpt.dhexx.cn/article/GiwI6dKV.shtml

相关文章

与中文对齐的英文等宽字体

与中文对齐的英文等宽字体 原始文档:https://www.yuque.com/lart/blog/wbhfef 前言 等宽字体是编程中常会用到的一些字体, 基本的形式就是所有符号的宽度都是一样的. 但由于大多数等宽字体设计时并未考虑对中文字符的兼容, 所以我们在使用时会面对这样一个问题, …

两个优美的等宽字体(支持中文等)

字体来源:http://bbs.themex.net/showthread.php?t16894635 这位大神除了中文还集成了其他很多东西 (以下字体均开了抗锯齿特效,实际效果略有差别) XHei NSimSun.Yuan XHei NSimSun.ShinYaLan 虽然说VS中中文是不会太丑的&#x…

html显示等宽字体

使用code标签 <code> aaa </code> <br> <code> iii </code> 效果&#xff1a;

字体:等宽字体与比例字体 - Monospaced font Proportional font

区别 比例字体&#xff08;Monospaced Font&#xff09;即每个字母宽度按一定比例自动调整&#xff1b;而等宽字体则是每个字母所占宽度相同。 差别关键在于可读性。显然比例字体使单词的整体可读性增强了。但是&#xff0c;早期的打字机、电脑屏幕由于技术的限制&#xff0c;…

Android等宽字体

Android等宽字体 效果图 在xml中设置 添加属性 android:typeface"monospace" 例如 <TextViewandroid:layout_width"wrap_content"android:layout_height"wrap_content"android:layout_marginTop"10dp"android:text"123456789…

html设置等宽字体效果

<!DOCTYPE html><html><head><meta charset"utf-8"/><title>设置等宽文字 </title></head><body>下面将显示两端相同的英文效果&#xff0c;突出等宽文字与普通文字的效果<br/><!--下面这段英文使用了正常…

CSS font-family 等宽字体

CSS font-family 等宽字体 font-family: "Lucida Console", Consolas, "Courier New", Courier, monospace; font-family: Courier New, Courier, Lucida Console, Consolas, monospace; font-family: Courier, Lucida Console, Consolas, Courier New,…

等宽字体和比例字体

开头 前段时间&#xff0c;我负责维护的某内部平台&#xff0c;运营人员发了一条2020年以来的首篇公告&#xff0c;然后便出现了下图的案发现场&#xff08;其实我一直都没发现_&#xff0c;还是可爱的大佬提醒了一下&#xff09;&#xff0c;事出反常必有妖&#xff01; 吭吭…

等宽字体与非等宽字体_我最喜欢的等宽字体

等宽字体与非等宽字体 If you’ve read a few of my other pieces, you already know that I’m kinda backwards. I enjoy old tech (where applicable) and the nostalgia and focus associated with using it. So, it comes of no surprise, that I have a thing for old ty…

等宽字体 Monospaced Font

等宽字体&#xff08;monospaced font&#xff09;是指字符宽度相同的电脑字体。东亚语言中&#xff0c;方块字基本上都作为等宽字体处理&#xff0c;如各个地区的汉字、日语假名的全形字符、韩语谚文音节等字符都是等宽的。在传统西文印刷中&#xff0c;比例字体可以提高单词的…

树莓派入门之—树莓派3B+不支持ExFAT格式而启动不了的解决方案

软件硬件 硬件 》 mac pro 树莓气派3B软件 》NOOBS_v3_2_0.zip SDCardFormatterv5_Mac.zip流程 》按官网的指引 raspberry-pi-setting-up 来安装系统与启动 问题现像 插入SD卡启动电源后&#xff0c;树莓派的状态LED仅有电源灯亮&#xff08;红色的&#xff09;&#xff0…

树莓派3B+插入电源后状态灯只有红灯常亮,无法接入屏幕

这种情况一般是树莓派系统并没有正常启动&#xff0c;特别是对于首次安装树莓派系统的新人来说&#xff0c;会一直以为自己装的系统的原因&#xff0c;一直尝试重新安装系统&#xff0c;首先给大家说一下确定问题的方法&#xff1a; 1、确认内存卡插入正确&#xff1b;树莓派没…

树莓派4B爽上流安装python3的OpenCV(人脸检测识别—门禁“环境搭建篇”)

树莓派4B安装OpenCV3.4.0人脸检测识别—门禁“环境搭建篇” 前言一、准备工作PC端软件 二、搭建树莓派环境拓展TF内存卡Tips&#xff1a;换源&#xff08;python软件源&#xff09; 修改树莓默认Python版本扩展交互空间 “进击”的工具包们OpenCV编译工具OpenCV图像包OpenCV视频…

【方法】树莓派开机使用教程(看这个就够了)

文章目录 Ⅰ、安装树莓派系统Ⅱ、连接树莓派一、接外设直接当作电脑来用二、远程连接1、有网线1)ssh远程连接2)使用xrdp远程桌面3)使用VNC远程连接树莓派桌面 2、无网线 Ⅲ、一些常用指令 Ⅰ、安装树莓派系统 【更新】现在官方提供了直接的镜像写入方案&#xff0c;就可以不需…

树莓派开箱+上手python小游戏

树莓派开箱&上手python小游戏 树莓派开箱&上手python小游戏安装所需设备烧录系统使用NOOBS方式烧录失败下载官方系统镜像文件烧录成功 配置WiFi和SSH一、WiFi配置二、使用PuTTY登录到树莓派 上手Python小游戏乌龟赛跑小游戏 树莓派开箱&上手python小游戏 记录第一…

【树莓派】系统刷机教程

简介 树莓派&#xff08;Raspberry Pi&#xff09;是一款小型的专门为学习而设计的ARM开发板&#xff0c;支持Raspbian&#xff0c;Ubuntu Mate&#xff0c; Ubuntu Server等多种Linux操作系统。接下来就简单的讲解下如何烧录树莓派系统。 准备环境 准备一张8G以上存储大小的…

codeforse比赛:Noobs Round #2 (Div. 4) by Rudro25

菜鸡也就只配打打这种难度的比赛o(╥﹏╥)o 点这—>题目传送门 A题&#xff1a;Directional Move&#xff08;模拟&#xff09; 题目大意&#xff1a;一个人初始是面向东边&#xff0c;现在给你一个二进制字符串&#xff0c;如果当前字符串是‘0’&#xff0c;则他向右转9…

树莓派之老的方式重刷Raspbian系统-2015

##简述 Raspbian之前没使用过&#xff0c;设置了一些网络的东西&#xff0c;后面发现有设置总是不能完成啊&#xff0c;严重影响了想实现的功能&#xff0c;找了许多办法没解决&#xff0c;不得已&#xff0c;觉得自己之前修改的配置太多&#xff0c;应当是哪里该出问题咯&…

nocos学习

springCloud Alibaba-来源&#xff1a;哔哩哔哩-黑马程序员 服务注册项目中添加依赖主类添加开启nacos的注解application.yml 配置服务地址和名称nacos客户端中查看获取注册中心信息查看服务提供者的具体地址 nocos官方文档 nocos-github下载地址 spring.io-springcloudalibab…

树莓派安装NOOBS失败

今天装树莓派按照官网装NOOBS偷了懒&#xff0c;直接用电脑自带的格式化工具进行SD卡格式化了&#xff0c;我选的是“快速格式化”&#xff0c;导致之后树莓派启动是出现故障。 看错误提示说格式化SD卡时出现了问题&#xff0c;之后看到原来在格式化时要选择 Overwrite fo…