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了。
///
///

字体大小,行高,高度相关推荐

  1. 【CSS】字体、行高、文本对齐

    一.字体 字体相关的样式 color font-size font-size相关单位 em相对于当前元素的font-size rem相对于根元素的font-size font-face可以直接将服务器 ...

  2. 字体、图标字体、行高、文本样式(css)

    字体.图标字体.行高.文本样式(css) 字体相关的样式 color 用来设置字体颜色 font-size (字体大小) 相关单位 em 相当于当前元素的一个font-size rem 相当于根元素的 ...

  3. POI导出excel--设置字体,颜色,行高自适应,列宽自适应,锁住单元格,合并单元格

    1. 前言 poi框架可以支持我们在java代码中, 将数据导出成excel , 在上一篇 如何使用POI导出excel表格,以及处理浏览器无法识别下载文件的问题 中已经详细的进行了介绍 , 但是实际 ...

  4. C#如何设置Listview的行高-高度 转载

    原文地址:http://enzit.cn/boke/?action=show&id=145 文章关键字:C#,如何设置,Listview,行高高度,教程代码,c# listview行高 Bac ...

  5. HTML与CSS基础练习~字体大小、高与行高

    HTML与CSS练习一 一.利用html和css作以下界面附上代码 <!DOCTYPE html> <html lang="en"> <head> ...

  6. 【HTML+CSS】字体字号行高

    字号 font-size 消失0px 最小12px 默认16px 注意:一般写偶数,避免奇数字号有锯齿 px像素 em参考当前元素字体大小的倍数 rem参考根元素(html)字体大小的倍数,一般用在移 ...

  7. PyCharm的配置(背景颜色+字体大小+行号+解释器选择等)

    我的第二篇博客,上一篇是PyCharm安装过程,下面讲解PyCharm的配置. 第一:配置PyCharm的背景 打开PyCharm开发环境,使用快捷键Ctrl + "`"(该键位于 ...

  8. 字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06fontbackground

    目录 一.字体族 二.图标字体简介(font awesome的使用) 三.图标字体的其他使用方式 四.iconfont 五.行高 六.字体的简写属性 七.文本的水平和垂直对齐 八.其他的文本样式 九. ...

  9. CSS字体、行高等其他样式

    CSS字体.行高等其他样式 一.长度单位与颜色单位 1. 长度单位 <!DOCTYPE html> <html lang="en"><head> ...

  10. 【基线,内容区, 行高/行间距,行距, 行内框,行框的 区分说明】

    基线,内容区, 行高,行距, 行内框,行框的 区分说明 ⑴ 基线 ⑵ 内容区 ⑶ 行高/行间距 ⑷ 行距 ⑸ 行内框 ⑹ 行框 ♣ 结束语 和 友情链接 ⑴ 基线 基线 沿着 文本最底部的 一行线, ...

最新文章

  1. docker化你的java应用(上)
  2. python语言程序设计编程题_《python语言程序设计》_第一章编程题
  3. java中的五种排序方法_用Java排序的五种有用方法
  4. 3.1)深度学习笔记:机器学习策略(1)
  5. mysql 基础操作一
  6. php7.0 freetype_php7.0.5安装教程
  7. java foxmail 附件_使用java实现与foxmail邮箱的接受,发送,转发等功能!!求精啊...
  8. java 文件上传 大小_java 上传文件大小转换为 GB/MB/KB/B
  9. chackbox的值 php获取_PHP操作Redis数据库常用方法
  10. python title函数意义_Python 字符串首字母大写-Python设置字符串首字母大写-python title()作用-python title函数-嗨客网...
  11. 出租车轨迹数据地图匹配
  12. 【训练计划】--2019-05
  13. 平板电脑怎么使用计算机,平板电脑怎么用
  14. 解决vue项目更新版本后浏览器的缓存问题
  15. 皮卡丘是如何发电的?
  16. 2021mac新卡牌游戏:展翅翱翔wingspan
  17. 七牛云融合CDN到底怎么配置?
  18. SSM在线学习网站的设计与实现毕业设计源码011451
  19. Mysql分割字符串并对分割后的数据进行查询翻译
  20. 通达mysql内存_如何处理OA系统启动mysql服务时提示内存不能为“read”或“write”错误的问题...

热门文章

  1. 创客使用Fusion 360 - 编辑模型
  2. 分享:前端页面样式收集 电影购票选座
  3. 老网站改版,百度网站SEO改版工具,没这样做准后悔
  4. 出现bad interpreter:No such file or directory的原因
  5. 003.[python学习] 简单抓取豆瓣网电影信息程序
  6. matlab计算微积分极限,Matlab微积分
  7. java 上传文件服务_java代码实现上传文件到文档服务器、下载文档服务器文件
  8. 离线浏览器Offline Explorer教程
  9. python 数学冒险_Python LEVEL3(2):概率给我们人生智慧
  10. prolog全排列问题