line-height的定义
2024-08-29 12:10:29
line-height
定义:
即行高,两行文字基线之间的距离
三问:
什么是基线?
形象可理解为字母x的下边缘
为什么是基线?
在css中基线乃各种线的基础
需要两行吗?
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.head{line-height:300px;background:gray;text-align: center;}
/* 此时默认的font-size为浏览器的默认值,因为这个数值偏小,似乎是居中,
当拉大这个数值时,就会显示出问题,只有font-size为0时,才是真正的居中 */
.img{height: 200px;vertical-align: middle}
</style>
</head> <body>
<div class="head">
<img src="123.jpg" class="img">
</div>
</body>
</html>
所有内联元素的样式表现都与行内框盒子模型有关!
行内盒子模型:
1.内容区域:内容区域的大小与font-size大小有关(表现形式为选中文字区域)
2.内联盒子:指不会让内容成块显示,而是排成一行。如果外部含inline水平的标签(span,a,em等),属于"内联盒子"
如果是光秃秃的文字,外面没有包裹标签,属于"匿名内联盒子"
3.行框盒子:每一行就是一个"行框盒子",每个"行框盒子"又由一个一个"内联盒子"组成
4.包含盒子:此盒子由一行一行的"行框盒子"组成
内容区域高度+行间距=行高
1.内容区域高度只与字号以及字体有关,与line-height没有任何关系
2.在simsun字体下,内容区域高度等于文字大小值
最新文章
- Spark源码学习1.6——Executor.scala
- tomcat 7.0 之文件配置
- mysql中文坑爹的东西
- Android之项目推荐使用的第三方库,有助于快速开发,欢迎各位网友补充
- 烦烦烦SharePoint2013 以其他用户登录和修改AD域用户密码
- Pycharm
- Ueditor中增加迅雷下载支持
- hadoop filesystem 删除文件 复制文件 重命名文件
- Ext.Net 布局
- springboot +spring security4 +thymeleaf 后台管理系统
- jQuery制作淘宝商城商品列表多条件查询功能
- Netty中如何序列化数据
- 华为MAC Flapping , MAC的漂移
- 关于$.ajax同步和异步的问题和提交后台的一些问题。
- uboot——git代码仓
- 重定向android log
- ppt转成图片等其它对象
- 并发 ---- 6. IO 多路复用
- PHP面向对象——类
- effective c++ 笔记 (18-22)
热门文章
- docker-compose.yml 示例
- Java如何获取JSON数据中的值
- rapidjson对于json的序列化与反序列化
- 解决webpack打包报错: Cannot find module &#39;@webassemblyjs/wasm-parser&#39;
- Linux系统(四)LVS集群负载均衡NAT模式
- CentOS配置apache多站点设置
- 团队项目第一篇——NABCD
- XML文件的读取
- CentOS 7 Sersync+Rsync 实现数据文件实时同步
- 重装@angular/cli reason: write EPROTO 139955972261696:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:252: