在CSS并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接的设置行间距，行高越大行间距越大。
使用line-height来设置行高 。
行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示。
行间距 = 行高 - 字体大小。

通过设置line-height可以间接的设置行高，可以接收的值：
1.直接就收一个大小；
2.可以指定一个百分数，则会相对于字体去计算行高；
3.可以直接传一个数值，则行高会设置字体大小相应的倍数。

对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中。

在font中也可以指定行高在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值。

示例demo:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /**

             * line-height如果是证书,值越大,间距越大

             */

            .p1 {

                font-size: 35px;

                line-height: 2;

            }

            .box {

                width: 200px;

                height: 200px;

                background-color: #bfa;

                /*

                 * 设置“我是一个超链”接居中对齐

                 */

                line-height: 200px;

            }

            .p2 {

                /*font: 30px "微软雅黑";

                line-height: 50px;*/

                font:30px/50px "微软雅黑";

            }

        </style>

    </head>

    <body>

        <p class="p2">

            人生若只如初见，何事秋风悲画扇。 等闲变却故人心，却道故人心易变。(一作：却道故心人易变) 骊山语罢清宵半，泪雨霖铃终不怨。(一作：泪雨零 / 夜雨霖) 何如薄幸锦衣郎，比翼连枝当日愿。

        </p>

        <div class="box">

            <a href="#">我是一个超链接</a>

        </div>

        <p class="p1">

            人生若只如初见，何事秋风悲画扇。 等闲变却故人心，却道故人心易变。(一作：却道故心人易变) 骊山语罢清宵半，泪雨霖铃终不怨。(一作：泪雨零 / 夜雨霖) 何如薄幸锦衣郎，比翼连枝当日愿。

        </p>

    </body>

</html>

结果：

前端学习 -- Css -- 行间距的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. 前端学习---css基本知识

    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. 前端学习——css实用技术

    一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...

  4. 前端学习——css基础知识，选择器与html模板、值得收藏的html标签

    一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...

  5. Web前端学习——CSS

    一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...

  6. 前端学习 -- Css -- 高度坍塌问题的产生以及解决

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...

  7. 前端学习 -- Css -- 浮动

    块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素 ...

  8. 前端学习 -- Css -- overflow

    子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小.如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容.父元 ...

  9. 前端学习 -- Css -- display和Visibility

    display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...

随机推荐

  1. 20155207 EXP7 网络欺诈技术防范

    20155207 EXP7 网络欺诈技术防范 实验内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 具体有 (1)简单应用SET工具建立冒名网站 (2)etterca ...

  2. 20155313 杨瀚 《网络对抗技术》实验八 Web基础

    20155313 杨瀚 <网络对抗技术>实验八 Web基础 一.实验目的 1.Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含 ...

  3. Vue.js动态组件

    动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...

  4. NetBeans的(默认)快捷键

    NetBeans的(默认)快捷键 1.完成代码:ctrl+\ //任何地方按下此组合键,均会提示相应的参考字段:  2.错误提示:alt + enter //顾名思义,当系统报错时,按下此组合可以查看 ...

  5. C语言中指针占据内存空间问题

    以前一直有个疑问,指向不同类型的指针到底占用的内存空间是多大呢? 这个问题我多次问过老师,老师的答案是"指向不同类型的指针占据的内存空间大小不同",我一直很之一这个答案,今天我就做 ...

  6. python数据图形化—— matplotlib 基础应用

    matplotlib是python中常用的数据图形化工具,用法跟matlab有点相似.调用简单,功能强大.在Windows下可以通过命令行 pip install matplotlib 来进行安装. ...

  7. 【转载】SSD断电保护原理

    异常掉电的隐患 若没有合理的掉电保护机制,而异常掉电的发生又不可避免,当发生异常掉电,会引发很多问题. (1)丢盘 异常掉电,会使得映射表来不及保存,丢失逻辑地址到物理地址的映射,待重新上电后,SSD ...

  8. http-cache浏览器缓存

    摘至知乎 首先得明确 http 缓存的好处 减少了冗余的数据传输,减少网费 减少服务器端的压力 Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间 加快客户端加载网页的速度 常见 ht ...

  9. Hexo初体验

    title: Hexo初体验 date: 2018-05-10 tags: Hexo categories: Hexo --- Hexo本地安装 Node.js安装 Hexo npm安装如下 npm ...

  10. ES6实用新特性

    兼容性 http://kangax.github.io/compat-table/es5/ http://kangax.github.io/compat-table/es6/ ES6(ES2015)兼 ...