line-height学习与总结

一.CSS中,line-height被用来控制行与行之间垂直距离,指两行文字基线之间的距离(baseline),借用一张图来说明什么是基线,以及行高的定义:下图两条红线的距离,如下图:

而对于单行文本的行高:慕课网上张鑫旭老师是这样解释的:

(1)行高由于继承性,影响无处不在,即使是单行文本也不例外;

(2)行高是真正的幕后黑手,高度表现不是行高,而是由内容区域与行间距决定,而正好,内容区域+行间距=行高。因此,单行文本行高就是这样定义的。

二,行高的作用

行高决定内联盒子的高度。

(1)内容区域+行间距=行高,内容区域高度(如蓝色区域的高度),由字体及字号决定,与行高无关,行间距(蓝色区域与黑色边框的距离)=(行高-内容区域高度)/2就是上下行间距,如图9:

(2)line-height与行内框盒子模型有关

“内容区域”(content area),是一种围绕文字看不见的盒子,大小与字体大小有关;

“内联盒子”(inline boxes),让内容排成一行的作用,如果有外部含inline水平的标签(span,a,em,strong等),则属于“内联盒子”,如果只是光秃秃的文字,则属于“匿名内联盒子”;

“行框盒子”(lines boxes),每一行就是一个“行框盒子”,它其实就是包裹每行文字。一行文字一个line boxes。

所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

行内框盒子对理解line-height有什么帮助呢?

在行内框盒子(inline box)模型中,这个(行框盒子)line boxes,line boxes什么特性也没有,就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。Line boxes其实是由它里面的内联盒子里的文字啊,图片等等,谁最高就决定,高度值就是谁。

三.line-height的属性值:

1.body{line-height:normal;}

2.body{line-height:inherit;}

3.body{line-height:120%;}

4. body{line-height:25px;}

5.body{line-height:1.2}

四.Line-height的应用:

(1)单行文本垂直居中,不用设置高度,而只需设置line-height 的值。若是有固定高度,则让行高等于高度值,就可以实现单行文本垂直居中。

(2)对于多行文本,没必要使用line-height,使用padding来更方便,让其父容器不固定高度。设置容器的padding上下为相同的固定值,容器的高度随着内容的增加而增加。若高度固定,用一个span标签将所有的文字封装起来,设置文字display属性(inline-block属性),并把line-height的高度与height的高度设置一样,就可以完成垂直居中。实现代码:

父容器高度不固定时:

Css代码:

Html代码:

实现效果图:

若高度固定时:

Css代码;

Html 代码:

实现效果图:

(3)图片的水平垂直居中:

Css代码:

Html代码:

代码实现效果

五,总结

这是自己学习line-height的总结,以及自己在实际中长用到line-height的地方。对与这个还会继续再学习,会继续补充或者修改些许内容。

时间: 2024-10-27 04:03:50

line-height学习与总结的相关文章

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

深入了解css的行高Line Height属性

来源:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html 什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. 不过,行间距与半行间距,还是取决于CSS中的line-height.那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松

JAVA基础学习day25--Socket基础二-多线程

一.上传图片 1.1.示例 /* 上传图片 */ import java.net.*; import java.io.*; import java.util.*; import java.text.*; /* 客户端 1.建立客户端服务 2.读取客户端已经有数据,,将文件名发送给服务端 3.通过Scoket,输出流将数据发送给服务端 4.接收服务端返回信息 5.关流Socket和流资源 */ class UploadClient1 { public static void main(String

[jQuery学习系列六]6-jQuery实际操作小案例

前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> <head> <script type="text/javascript"> function check() { String.prototype.format = function(){ var args = arguments; return this.repla

Nmap 源码学习三 nmap_main主程序分析

主体程序位置在nmap.cc line:1640 学习要点: 程序在1650行,新建一个主机的单例对象, #ifndef NOLUA /* Only NSE scripts can add targets */ NewTargets *new_targets = NULL; /* Pre-Scan and Post-Scan script results datastructure */ ScriptResults *script_scan_results = NULL; #endif 从168

CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <

模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)

接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞了好长时间.也好,那就国庆8天好好的写一下,这里写了一半,先放着.先介绍一下这一半的内容.       还是老规矩,先放个图吧,虽然才一点点了 上线的banner大图和京东头条都是可以滚动的,抄写微信小程序社区官方qq群:390289365里 Nige

C++入门

  C++入门必看,提升必看 Visual C++MFC入门教程 目录 +-- 第一章 VC入门|------ 1.1 如何学好VC|------ 1.2 理解Windows消息机制|------ 1.3 利用Visual C++/MFC开发Windows程序的优势|------ 1.4 利用MFC进行开发的通用方法介绍|------ 1.5 MFC中常用类,宏,函数介绍+-- 第二章 图形输出|------ 2.1 和GUI有关的各种对象|------ 2.2 在窗口中输出文字|------

漫谈可视化Prefuse(五)---一款属于我自己的可视化工具

伴随着前期的基础积累,翻过API,读过一些Demo,总觉得自己已经摸透了Prefuse,小打小闹似乎已经无法满足内心膨胀的自己.还记得儿时看的<武状元苏乞儿>中降龙十八掌最后一张居然是空白页,在千钧一发之际以为自己要嗝屁了,一阵东风让苏乞儿明白了,最后一章要做的原来是——整合.没错,今天我们就来好好谈谈整合! 看懂API不代表你会灵活运用某个类,会用一些类不代表能实现小功能,耍的了小功能不一定会做可视化工具整合,整合之道,奥妙无穷! 前篇回顾:上篇<漫谈可视化Prefuse(四)---被