前端学习 -- Css -- 行间距
在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 -- 行间距的更多相关文章
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 前端学习---css基本知识
css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 前端学习——css实用技术
一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...
- 前端学习——css基础知识，选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- Web前端学习——CSS
一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...
- 前端学习 -- Css -- 高度坍塌问题的产生以及解决
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...
- 前端学习 -- Css -- 浮动
块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素 ...
- 前端学习 -- Css -- overflow
子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小.如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容.父元 ...
- 前端学习 -- Css -- display和Visibility
display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...
随机推荐
- 20155213免考项目——简易的HIDAttack
20155213免考项目--简易的HIDAttack 听5214说他做不出来自己的免考项目,于是就转向bof进阶,并且成功做出了64位的ROP攻击...... 既然如此,那我就再做一个吧,但都已经期末 ...
- 2017-2018-2 20155224 『网络对抗技术』Exp9：Web安全基础
实验完成情况 共完成11题 准备工作 在浏览器输入localhost:8080/WebGoat打开webgoat,左侧选择题目 右键选择Inspect Element开始调试 Injection Fl ...
- 20155237 《JAVA程序设计》实验二（JAVA面向对象程序设计）实验报告
20155237 <JAVA程序设计>实验二(JAVA面向对象程序设计)实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S ...
- POJ 1988&&2236
并查集,如果只是朴素的路径压缩,那么也就是一句话的事情. 但是,一般都没有这种仁慈的裸题(假的,多了去了) 1988:带权并查集,贼鸡儿像Luogu的那道杨威利的并查集(好像是叫银河英雄传说) 开两个 ...
- EZ 2017 12 17初二初三第一次膜你赛
以后平时练习还是写一写吧. (题目搞来搞去太烦了,直接PDF存起来) T1 水题(???),主要是数据水,正解是设一个阙值,然而根本没人打.(暴力出奇迹) CODE #include<cstdi ...
- python 穷举法 算24点（史上最简短代码）
本来想用回溯法实现 算24点.题目都拟好了,就是<python 回溯法 子集树模板 系列 -- 7.24点>.无奈想了一天,没有头绪.只好改用暴力穷举法. 思路说明 根据四个数,三个运算符 ...
- 【2017年9月10日更新】ABP配套代码生成器(ABP Code Generator)帮助文档，实现快速开发
ABP代码生成器介绍 ABP Code Generator 针对abp这个框架做了一个代码生成器,功能强大.分为两大功能点,一个是数据层,一个是视图层. 数据服务层:通过它,可以实现表设计.领域层初始 ...
- docker之compose 编排项目
一.docker-compose 的介绍 docker-compose是一种容器编排工具,可以将多个docker容器关联部署.通过yaml文件,可以描述应用的架构,如使用什么镜像.数据卷.网络.绑定服 ...
- Azure 基础：Queue Storage
Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table. 笔者在前文中介绍了 File Storage 的基本用 ...
- Daily Scrumming* 2015.12.17（Day 9）
一.团队scrum meeting照片 二.成员工作总结 姓名 任务ID 迁入记录 江昊 任务1077 https://github.com/buaaclubs-team/temp-front/com ...