整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者:极客小俊
一个把逻辑思维转变为代码的技术博主
你不用拼过聪明人，你只需要拼过那些懒人 你就一定会超越大部分人!
概念: 行高指的是文本行的基线之间的距离, 更简单来说行高是指文本行基线间的垂直距离, 行高也是文字大小与行距的和, 行高越大则行间距越大!
注意：line-height属性不允许使用负值。
但是很多人就只是知道 line-height属性用于设置行高, 而行高到底是一个什么东西并不是很清楚!
那么在了解行高之前,我们就必须要先掌握这几个概念: 顶线、中线、基线、底线、x-height、ex、内联盒模型、行距等..
知道这些概念之后才能真正的去理解line-height属性的意义!
那现在我们废话不多说,就先来看一张文字在网页中的结构图:
从上到下四条线分别是顶线(绿色)、中线(蓝色)、基线(红色)、底线(紫色)
图中黄颜色的线位置表示: 行间距 其实是分为上一行文字的下半行距 和 下一行文字的上半行距, 这里要是听不懂 没关系 我们接下来会慢慢说半行距的意义!
小提示: 之后我们要讲到的vertical-align css属性中有top、middle、baseline、bottom，就是和这四条线相关!
要了解基线 那么还要知道 在我们英文的26个字幕当中 有一个小写的x字母是在CSS中相当特殊的! 那么基线是什么呢？
解答: 基线就是小写x字母的下边缘(线) 就是我们常说的 基线 而不是那些有尾巴的英文字母, 例如: s 、j、g、k、f、y
所以一定要注意: 基线（baseline）不是汉字文字的下底部，而是英文小写字母“x”的下底部!
内联元素默认是按照基线对齐的 而基线就是小写字母x的底部! 不懂的话举个例子 如下:
北京市
<span>深圳市</span>
<strong>计算机</strong>
<img src="images/1.gif">效果图: 红色箭头指向位置从图中可以发现, 只要是内联元素基线都是对齐的! 也就是说内联元素中的文字都是放在基线上的!
例如下图一样:
line-height属性设置的行高也就是定义的两行文字基线之间的距离! 原因是因为中间夹杂了更多的行距 关于行距的概念我们接下来会说到!
如果把line-height设置为0px 那么这个基线就会重叠! 文字也重叠了!
那么也由此可见 设置line-height会影响基线之间的距离! 基线变大了 每一行的文字也就隔开了!
顶线就是在中文汉字的顶部位置就是顶线的位置!
如下图:
底线就是在中文汉字的底部位置 就是底线的位置!
故名意思: css中有一个概念叫x-height,意思也就是小写字母x的高度!
那么在css当中小写x字母不仅有确定了基线(baseline)的位置,还有描述了中线(等分线)(middle)的作用!
中线又是什么?
在css中，有些属性值的定义就和这个x-height有关, 最经典最有代表性的就是vertical-align的属性值middle 这里的middle就是中间的意思 指的其实就是基线 往上1/2的位置 也就是小写x字母的中间交叉点那个位置！也就是middle的位置!
这里就是我们所说的中线：横过小写英文字母x的中间的线!
如下图: 蓝色线位置
案例:
<style>
#cont{
width:800px;
background-color:rgb(255,255,30);
}
#cont>span{
display: inline-block;
border: 1px solid red;
line-height: 60px;
font-size: 36px;
}
/*一行文本 有且只有 一个基线 多行文本每一行都有一个基线*/
#img{
vertical-align: middle;
}
</style>
<div id="cont">
<span>
<img src="images/test.gif" id="img">
北京市 iphone x
</span>
</div>
效果图如下:
但是大家从结果上肯定也能够看出来, vertical-align: middle 并不是绝对的垂直居中于文字对齐!
middle也只是一种近似接近于居中的效果! 因为不同的字体在行元素中的中线的位置是不一样的 !
例如:
<style type="text/css" >
#test{
background: yellow;
font-size: 38px;
font-family: serif;
}
#test2{
background: yellow;
font-size: 38px;
font-family: 庞门正道标题体;
}
span>img{
vertical-align: middle;
}
</style>
<span id="test"><img src="images/test.gif"> 北京市 iphone x</span>
<br>
<span id="test2"><img src="images/test.gif"> 北京市 iphone x</span>效果图: 从下图效果中可以看出 x的交叉点的高矮是不一样的位置!
所以 在CSS中, 内联元素(行元素) 垂直居中(也就是给内联元素设置vertical-align:middle)是对文字垂直居中, 而与外部容器无关!
关于vertical-align元素后面会单独提及到
上面也说过了, vertical-align: middle 并不是绝对的垂直居中于文字对齐! middle也只是一种近似接近于居中的效果!
就是因为不同的字体在行元素中的位置是不一样的!中线位置也不一样，所以说对齐方式也不一样。
同时如果font-size字体大小有变化的情况下, x字母的高度也会随之变化, 然后内联元素依旧会以小写字母x的中线为基准对齐
举个例子:
如果用一个小图标来对齐一行文字,那么在文字大小和字体样式有变化之后,给小图标设置vertical-align: middle 后,它依旧会按照x中线对齐, 但这个小图标的从大小上感觉没有对齐,也从外部元素的高度上来看，所以小图标感觉也没有垂直居中对齐的样子!
如下图所示:
所以要让一个小图标来对齐一行文字,还有一个更加简便的做法 那么就是使用ex单位来解决!
ex 在css中的定义是一个尺寸单位, 官方的解释是: 一个 ex 是一个字体的 x-height。(其实就是你设定的字体中产生的x的大小)
我的解释 : ex 就是css中的一个相对单位, 相对的是字体大小和字体样式而改变的一个单位! 指的就是小写字母x的高度 其实就是x-height
也就是说把内联元素的高度尺寸单位设置为ex 那么就不会受到 字体样式和字号的影响! 从该内联元素相对字体样式和字号进行变化!
1ex 就是一个x的高度这句话如何理解: 就是在不同字体和字号情况下x的高度!
那么也就是说把小图标的高度设置为1ex 那么不管你把字体大小 和 字体样式如何修改， 这个小图标都会随着他们而变化!
案例:
<style type="text/css" >
#test{
background: yellow;
font-size: 78px;
font-family: serif;
}
#test2{
background: yellow;
font-size: 78px;
font-family: 庞门正道标题体;
}
#test3{
background: yellow;
font-size: 78px;
font-family: 微软雅黑;
}
span>img{
/* vertical-align: middle;*/
height: 1ex;
}
</style>
<span id="test"><img src="images/test.gif"> 北京市 iphone x</span>
<br>
<span id="test2"><img src="images/test.gif"> 北京市 iphone x</span>
<br>
<span id="test3"><img src="images/test.gif"> <em>北京市 iphone x</em></span>效果如下:
不管如何修改字体大小和字号 小图标都会更好的去垂直居中, vertical-align: middle;也没必要使用了! 借助ex这个相对单位我们直接利用默认的baseline基线对齐就可以实现小图标内联元素和文字进行居中的效果了! 注意:经过审查元素看到每一行小图标和文字中的字母x高度始终是一样的!
小结: ex相对单位不会受字体和字号的影响! 虽然ex单位跟line-height没有直接关系，但也有间接关系!
内联元素从定义上看: 该元素默认的display属性值为inline、inline-block、inline-table的元素就是内联元素。
内联元素从表现上看: 典型的特征就是内联元素可以和文字在一行进行显示, 这里注意: 文字本身也是一个内联元素(是匿名内联元素 马上会接下来会说到), 所以我们常见的内联元素从表面上看有文字、 图片、按钮、输入框、下拉框、等原生表单控件都是内联元素!
在我们学习line-height这个属性的时候, 我们还必须要了解CSS中一个重要的概念 就是内联盒模型 那么我们先来看一段代码案例, 这一段文字代码看似简单 但其中包含很多术语和概念，通俗的说这一段代码中包含很多种类的盒子!
如下:
<p>
这是一行普通的文字, 这里有一个 <em>我是斜体</em> 标签
</p>从以上代码中 我们来分析它里面到底有哪些盒子!
(1) 内容区域 content area
内容区域是一种我们肉眼看不见的盒子，它围绕着文字 我们平常是看不见这个盒子的!
通俗理解: 其实可以通过选中文本然后查看背景颜色区域作为内容区域来理解!
小提示:但是要注意的是 如果是图片,其内容不是文字,不存在内容区域之说 因此对于图片这类元素可以把内容区域看作是元素自身!
也就是说如果是图片的话,那么内容区域的大小是随着图片的大小来决定的!
这样理解内容区域可以帮助我们理解各种相关内联元素的行为都是可以的!
如下图:
内容区域小结
总的来说内容区域：就是底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。
如下图:
(2) 内联盒子(行内框) inline box
说到内联盒子 那么大家一定就不会陌生了 就是我们平常使用的内联元素(行内元素)!
内联盒子也称之为: 行内框 这要特别注意 这是针对行元素而言的, 每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念 无法肉眼观测!
它让内容成为一行排列 所以内联盒子就是指的内联元素, 简单的说就是文字用的什么内联元素来包含!
例如: span、em、a、这些都属于 内联盒子(行内框)!
注意:行内框=内容区域
内联盒子的分类
但是内联盒子则又会细分为 内联盒子 和 匿名内联盒子
所以 常见的内联盒子 如文字外部包含的是 span、a、em、strong、等这些标签 那么则属于 内联盒子
如果 是光秃秃的文字 则属于 匿名内联盒子 所以要注意 光秃秃的文字其实也是一种内联盒子!只是没有标签名字而已!
如下图:
特别案例
我们在设定line-height行高时,行内框(也就是内联盒子)的高度是不会有任何变化的，不知道大家有没有注意到这个情况!
如下案例:
<div>
<span style="">重庆市</span>
<em>北京市</em>
<strong style="line-height: 30px;">深圳市</strong>
</div>如图: 我给strong设定了line-height为30px 但strong的高度依旧是19.8 其他两个内联盒子也是一样的高度 并没有影响，
影响的是strong上下周围的区域 也就是分别增加/减少到内容区域的上下两边灰色的部分! 并且上下的灰色部分的高度是一致的!
这也就是我们待会要讲解到的行框与行间距(行距)、(半行距)的概念
(3) 行框盒子 line box
每一行就是一个行框盒子，那什么又叫做每一行呢 ？由多个内联盒子组合而成的一行 就会形成一个行框盒子
所以反推每一个行框盒子又是由一个个内联盒子组成而来的!
注意: 是每一行都会形成，如果文字有五行，就会形成5个行框。
如下图:
绿色框部分就是由一个一个的内联盒子组成的 最终这一个整体就叫做一个 行框 或者叫 行框盒子
小提示: 如果有换行符 把字符和元素换到下一行那么 下一行就是一个新的行框! 就相当于有多行内容时，每行都会有自己的行框
注意: 并且 行框高度等于本行框内部,所有行内框(内联盒子)中,最大的那个行内框(内联盒子)的值! 重点: 是以带有行高值最大的行内框(内联元素)为基准来最终计算行框的高度，其他行内框(内联元素)采用自己的对齐方式向基准对齐!
简单的说 就是 行间距 + 字体大小=Line-height的高度 就是这个高度撑开了行框! (行间距包含在行框内部的!) 为了方便理解请看下图:
从上图可以看出来 所有的内联元素都是以基线对齐的上面已经说过了，但重要的是 第二个内联元素具有行高, 产生了行间距 所以就以第二个内联元素为基准来计算行框最终的高度!
备注: 设置line-height属性会影响行框的布局? 这句话的意义何在？
答案就是: line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个内联元素的顶部和底部 而且计算出来的差值分别加到内容区域的顶部和底部的就是行距 所以实质上撑开 行框 的是line-height行高其中的行距!
(4) 包含盒子 containing box
这段代码中的p标签就是一个包含盒子! 包含盒子的内部就是由一行一行的行框盒子组成!
一个行框盒子 说明只有一行, 多个行框盒子说明是多行! 当然也有人称呼它为 包含块(containing block)
如下图:
粉红色部分的就是包含块部分! 包含块最终把这一行整合为一个整体!
(5) 幽灵空白节点
这个概念听起来就很玄乎! 很奇特 但其实也是在内联盒模型中一个很重要的概念!
概念理解: 在浏览器对内联元素的解析和渲染中 每一个行框 前面都有一个 空白节点 但很奇特的是这个空白节点永远是看不见透明的 并且也不占据任何宽度 也就是说 宽度为0, 是的 肉眼看不见 也无法通过脚本去获取到 就好比幽灵一般! 但有的的确确是存在的! 就跟文本节点一样 所以 大家都称为它是 幽灵空白节点
注意: 有一个前提条件 它主要是在HTML5的文档声明中才有这个情况，其他老一点的文档声明则不存在 幽灵空白节点!
我们来看一个案例 就会马上了解 如下:
<style type="text/css" >
div{
background: #cd0000;
}
span{
display: inline-block;
}
</style>
<div><span></span></div>注意: 这里我们并没有设置任何高度! 而结果却是如下图所示:
此时你看见结果后一定会很惊讶 为什么div的高度不是0呢？ 我们并没有给div设置任何高度呀 对吧 并且内部span的高度我们也没有设置呀 高度也应该是0 那么div的高度20px是如何来的呢? 这就是我们刚刚说的 幽灵空白节点 的缘故
其实原因就是 : 浏览器对内联元素的解析和渲染中 每一个行框 前面都有一个 空白节点 那么这里就是在span元素的前面还有一个宽度为0的空白字符!
并且其实它也是一个盒子 不过是一个抽象的盒子 官方定义名称为: strut (支柱) 重点来了, 并且这个空白字符strut(支柱) 是一个存在于每个行框盒子 内部的最前面 它的宽度只有0px,看不到的, 同时这个 strut (支柱)的行高和字体大小都与该元素相同! 简单的先知道这个概念就可以了 至于高度从何而来我们后面再细说!
图解如下:
CSS官方对strut (支柱) 的介绍: [了解]
Each line box starts with a zero-width inline box with the element's font an d line-height properties. We call that imaginary box a "strut"!
我们来看一个跟幽灵空白节点有关的案例:
<style>
.box{
line-height: 256px;
background: yellow;
}
</style>
<div class="box">
<img src="images/test.gif">
</div>效果:
此时 div的高会成为256px, 有人会认为这是把图片的高度改变了，其实不是 而是line-height把 幽灵空白节点上下的行距增大从而改变了 因为图片是内联元素 会形成一个 行框盒子 在HTML5文档模式下, 每一个行框盒子前面都有一个宽度为0的 幽灵空白节点 前面也提到过了 这个幽灵空白节点的特性和普通字符一模一样也就是它是一个隐藏的内联元素 所以其实是这个幽灵空白节点被设置了上下行距为122像素的缘故 撑开了行框 ，而行框最后撑开了外面的div元素!
了解幽灵空白节点为后续更好的认识内联元素打好坚实的基础!
先提出一个问题: 不管是内联元素 还是 块元素 在他们没有设置高度并且里面也有文字内容的情况下 元素的高度从何而来?
很多人认为是由文字撑开! 实际上却不是， 而是line-height的高度决定的!
案例1:
通过测试我们可以看出 .test1 元素虽然设置了font-size为36px 但line-height设置为0后 .test1元素显示成了一根线! 并没有像有些人所说的文字会撑开! 而.test2虽然font-size设为了0 文字看不见了，但line-height设为了36px 它却把 .test2元素撑开了! 原理跟上面所讲到的 幽灵空白节点 一致! (个人理解)
案例2
<style>
span,em{
background-color: red;
line-height: 100px;
/*font-size: 100px;*/
border: 1px solid blue;
}
</style>
<div>
<span>北京市</span>
<span>北京市</span>
<span>北京市</span>
<span>北京市</span>
</div>
<div>
<em>北京市</em>
<em>北京市</em>
<em>北京市</em>
<em>北京市</em>
</div>效果如下:
从上图看 通过给内联元素span、em设置line-height , 他们的可视高度没有变，但他们的彼此撑开了外部包含的div 那么是什么撑开的呢?
答案是: line-height撑开了行框盒子 然后这个行框盒子从我们肉眼上看是看不见的, 但它又可以撑开外部的div 所以就看到现在两行文字彼此之间有距离了!
所以从图中看, 内联元素设置line-height但内联元素本身高度是没有变化,但每一行的行框的高度改变了, 从人的视觉上是看不出来的! 而撑开的这个高其实就叫 行距
行距又称为 行间距
行距 从意义上来说 作用是让我们阅读文章的时候，好确定阅读的方向!
行距 从css的角度来说, 代表的不是一个地方, 而是要分为两个部分! 分别是一个文本行内容的顶部和底部!
也就是说 底线下面粉红色标注区域 和 顶线上面粉红色标注区域, 就是行间距
如下图:
中间黄颜色部分 等于 上半行距 + 下半行距 之和 就是行间距, 也就是行高与字体尺寸的差称为行间距
但即使是只有一行文字,其实上方也是有行距的 只不过这个行距的高度仅仅是完整行距高度的一半! 俗称 半行距
行距小结: 指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离。
当然，有些人的理解是: （上文本行行高-内容区高度）/2+（下文本行行高-内容区高度）/2
为什么我们要算行距呢？ 是因为上面提到了 半行距 那么这个半行距是如何求得呢 ？ 我们就要了解一下这个行距的计算公式了!
行间距=line-height的值(行高) - font-size字体大小 (行间距=行高 - 字体大小)
然后 算出来的这个行间距 / 2 所得到的值分别给粉红色的两部, 分别加到一个行内框(内联盒子)的顶部和底部即可!
也就是俗称的 半行间距【（行高-字体size）/2 】分别增加 或者 减少到内容区域的上下两边:
例如: 设置行高为40px; 字体大小设为16px , 那么根据上面的公式我们得到行间距的值是24px, 这个24像素要除以2 划分为两个部分!
也就是行内容的顶部 和 底部 这两个地方分别为: 12px像素!
案例代码:
<style>
#cont{
width:600px;
background-color:rgb(255,255,30);
line-height: 40px;
font-size: 16px;
}
</style>
<div id="cont">
在过去的52周，腾讯的最低股价为324.29港元，最高为633港元。按照最高股价计算，腾讯的总市值在过去一年创造了历史新高——突破6万亿港元。
在2018年的“930改革”后，经历2019年的波动，腾讯终于在2020年重新回到增长轨道。
一方面，随着游戏版权开放，加上全球新冠肺炎疫情蔓延，腾讯的“现金牛”业务游戏收获颇丰；另外一方面，腾讯坚决落地产业互联网战略，并初见成效，摆脱了增长依赖于游戏业务的局面。
在高速增长下，2020年腾讯也存在一些隐忧，随着监管部门加强对于互联网平台经济的监管和反垄断的深入进行，腾讯需要在适应环境变化的情况下保持增长
</div>所以上下文本之间的行间距也就是上面文本底部的12像素+下面文本顶部的12像素!
我们知道了内容区域与字体字号大小的关系、也知道了什么是行间距以后, 其实我们就可以反推出 行高是什么了!
公式: 内容区域content area(或字体大小) + 行间距=行高
注意 :
line-height行高小结
行高（line-height）：就是包括内容区域(content area)与以内容区为基础对称拓展的空白区域(也就是上下半行距)，我们称之为行高。
一般情况下，也可以认为是相邻文本行基线间的距离。
如下图:
line-height的取值可以是一个像素值!
特别注意:
line-height的取值可以是一个百分比%
指定一个百分数, 意思就是会相对于font-size字体大小去计算行高! 没有明白吗？那我们看下面的案例吧!
案例1
font-size大小为30px,而line-height的大小为80%，也就是说line-height的大小占 font-size大小的80%，又因为80%相当于 80/100就等于0.8，所以最终line-height的大小也就是行高为30px*0.8=24px,根据上面的公式，那么行间距就为24px-30px=-6px，上面文本底部与下面文本顶部都为-3px。
代码如下：
<style>
#cont{
width:600px;
background-color:rgb(255,255,30);
line-height: 80%;
font-size: 30px;
}
</style>注意: 但是如果使用百分比,那么这个百分比通常不会小于100%,因为小于100%所计算出来的行距值是一个负数! 其实跟上面的line-height的值小于当前元素的font-size的值是一个道理! 都是没有意义的!
如下图：
案例2
font-size大小为30px,而line-height的大小为200%，也就是说line-height的大小就是 font-size大小的两倍，又因为200%相当于 200/100就等于2，所以最终line-height的大小也就是行高为30px*2=60px,根据上面的公式，那么行间距就为60px-30px=30px，上面文本底部与下面文本顶部都为15px。这样用百分比来表示行高才有意义。代码如下：
<style>
#cont{
width:600px;
background-color:rgb(255,255,30);
line-height: 200%;
font-size: 30px;
}
</style>如下图：
小提示: line-height的百分比取值并不是很常用! 通常都是像素值!
line-height的取值可以是一个整数数字!
如果设置line-height的值为一个整数数值，那么则行高的值其实就是font-size字体大小相应的倍数!
简单的说就是如果设置数值 此数字会与当前的font-size字体大小相乘来设置行间距!
案例如下: 这里line-height设置为2 也就相当于上面的 line-height设置为:200%是一个道理!那么行高的实际大小为：30px*2=60px,也就是说line-height:60px，则半行距=(60px-30px)/2=15px。代码如下：
<style>
#cont{
width:600px;
background-color:rgb(255,255,30);
line-height: 2;
font-size: 30px;
}
</style>1、line-height让单行文本垂直居中详解
相信大家都知道一种说法，想要让一个单行文本垂直居中，那么只要设置line-height 的大小和 height高度一样就可以了
例如:
一个块元素中只有一行文字 或者 超级链接文字的情况下，也就是说对于单行文本可以将line-height行高设置为当前元素 或者 父元素的高度一样就可以了!
这样就可以让这个单行文本在当前元素中 或者 说父元素中 垂直居中!
案例
<style>
#cont{
width:600px;
height: 100px;
background-color:rgb(255,255,30);
font-size: 30px;
line-height: 100px;
}
</style>
<div id="cont">
hello world!
</div>但从我查阅资料并实际操作后，证明让line-height的值设置为和height值一样来实现单行文本的垂直居中这种说法并不是很正确!
原因有如下:
要让单行文本垂直居中。其实只需要设置line-height这一个属性就可以了，根本不需要再设置一个height属性, 所以有很多教程也误导了大多数人一定要去设置一个height属性才可以垂直居中，其实不然! 如下:
<style>
#cont{
width:600px;
background-color:rgb(255,255,30);
font-size: 30px;
line-height: 100px;
}
</style>2、line-height只能让文本近似于垂直居中
这里的垂直居中只仅仅是无限接近于垂直居中! 为什么要说成是接近于垂直居中呢?
原因1: 行高的实现在于CSS中的行间距是 一行文字的上下等分机制! 也就是说一行文本的上面和下面所存在的行间距是相等的! 所以如果行间距只存在于一边的话 那么文字是无法垂直居中的, 其实这也证明了文字垂直居中靠的重要因素就是上下行间距!
原因2: 刚刚说了 接近于垂直居中，因为文字的中线位置普遍要比 行框盒子的中间线位置要低一些! 如果你不理解 请看下图: 黄颜色的线 为行框盒子的中间线表示位置, 蓝色的线为文字的中线位置! 是不是文字中线比行框盒子低呢! 对吧! 但有些字体因为看起来可能比较有下沉的感觉，所以可能在行间距垂直居中的作用下会有1px像素的小差异 所以我们称之为：接近于垂直居中!
所以我们说的接近于垂直居中 而不能完全是垂直居中的原因是 vertical-align造成的, 和line-height是没有关系的， 关于vertical-align属性 在后面会详细说到这里就不多说了!
3、line-height让多行文本垂直居中
使用line-height来控制文本垂直居中,不仅仅用于单行文本， 就连多行文本其实也是可以进行垂直居中的!
多行文本的垂直居中和 单行文本中就不一样了! 需要使用到vertical-align属性!
案例代码:
<style>
#cont{
width:600px;
background-color:rgb(255,255,30);
line-height: 200px;
}
#cont>p{
line-height: normal;
display: inline-block;
vertical-align: middle;
}
</style>
<div id="cont">
<p>
测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...
测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...
测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...
测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...
</p>
</div>
效果图如下:
原理实现如下
使用font属性也可以设置行高，可以在字体大小后添加 /行高大小 来表示行高，这个值是可选的，不指定的时候会采用默认值也就是没得。
例如:
font: 30px/行高值px '字体样式';但是当line-height属性设置在 font 属性之前，并且 font 属性中没有设置行高的时候，line-height属性会被font 属性中的行高默认值覆盖，也就是说在这个时候line-height属性是无效的。所以如果想要设置行高，可以把line-height属性设置在 font 属性之后，也可以直接在 font 属性里面设置行高。
案例:
<style>
/*line-height会被font的默认行高而覆盖*/
#cont{
width:600px;
background-color:rgb(255,255,30);
line-height: 50px;
font: 30px '微软雅黑';
}
/*line-height写在font下面会被正常解析*/
#cont{
width:600px;
background-color:rgb(255,255,30);
font: 30px '微软雅黑';
line-height: 50px;
}
/*直接通过font来调整line-height行高*/
#cont{
width:600px;
background-color:rgb(255,255,30);
font: 30px/50px '微软雅黑';
}
</style>小结: 所以使用font属性的时候要注意一些其他文本属性的顺序，例如line-height, font-style,font-weight,font-family 这些属性要是写在font前面都可能被后面的font默认值所覆盖! 注意使用顺序即可!
我们先来看一个案例吧:
<style>
div{
width:500px;
background: yellow;
}
</style>
<div>
<img src="images/1.gif">
</div>结果图:
从上图中可以看出，图片在div元素中的下部会有一点点间隙! 这正因为前面提到的 匿名空白文本节点的存在，才会造成图中的情形!
为什么给父元素设置text-align: center; 会让内部的img元素居中?
案例:
<div>
<img src="images/1.gif">
</div>
<style>
div{
width:300px;
background: yellow;
text-align: center;
}
</style>如图:
原因: 这其实是居中的 幽灵空白节点, 而不是图片! 因为幽灵空白节点也是一个文本节点,设置text-align: center; 理所当然会居中，而且后面的图片和前面的幽灵空白节点同样都是 内联元素，幽灵空白节点居中的时候就把图片顶过来了! 而且幽灵空白节点是0宽度看不出来的，所以我们看到的就仅仅是图片居中了! (个人理解仅供参考)
解决图片因幽灵空白节点而产生的底部空隙
行高（line-height）：就是包括内容区与以内容区为基础对称拓展的空白区域(也就是上下半行距) 加起来的总和，我们称之为行高
给行元素(内联元素)设置line-height后, 行内框(内联元素盒子) 撑开了行框 , 而行框又撑开了内容区域、而内容区域撑开了包含元素也就是最外层的包含块!
撑开的部分平均分布在上下两侧就是行距 !
而行高 就是 内容区域+ 两侧行间距 就是=行高
原创技术文章
如果喜欢话请 "点赞 评论 收藏" 一键三连
大家的支持就是我坚持下去的动力!
Html和CSS的关系
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1， HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。
一个HTML文件是有自己固定的结构的。
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
1. <html></html>称为根标签，所有的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
1，下面这些标签可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
2，代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
语法：
<!--注释文字 -->
3，CSS注释代码
就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->)
1，语义化：说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如，网页上的文章的标题就得用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。
2，语义化的作用
1）. 更容易被搜索引擎收录。
2）. 更容易让屏幕阅读器读出网页内容。
二，认识标签（第一部分）
如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。
语法：
<p>段落文本</p>
<hx>标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法：
<hx>标题文本</hx> (x为1-6)
文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们
有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调
<em>、<strong>、<span>的区别：
1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。
2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的，把一段话圈起来，然后用css设置样式。
q标签，短文本引用
比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。
语法：
<q>引用文本</q>
1，注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
2，注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话
blockquote标签，长文本引用
<blockquote>的作用也是引用别人的文本。但它是对长文本的引用
<q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签。
语法:
<blockquote>引用文本</blockquote>
浏览器对<blockquote>标签的解析是缩进样式
换行标签<br/>
<br/>标签作用相当于word文档中的回车。
分割线标签<hr/>
<hr/>标签和<br/>标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
<hr/>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
html特殊字符
空格： (;分号必不可少)
address标签，为网页加入地址信息
语法：
<address>地址信息</address>
如：
<address>北京市西城区德外大街10号</address>
在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用css样式来修改它<address>标签的默认样式
在介绍语言技术的网站中，必免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：
<code>var i=i+300;</code>
语法：
<code>代码语言</code>
注意：在文章中一般如果要插入多行代码时不能使用<code>标签，如果是多行代码，可以使用<pre>标签。
<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如果用以前的方法，回车需要输入<br>签，空格需要输入 。
注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
三，认识标签（第二部分）
1，无序列表
ul-li是没有前后顺序的信息列表。
语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
举例：
<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点
2,有序列表
语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
举例：
下面是一个热点课程下载排行榜：
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开
<div>容器标签
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
语法：
<div>…</div>
确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器
注释：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
创建表格的五个元素：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。（这个标签基本上不怎么用了）
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...<td/>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。
表格还是需要添加一些标签进行优化，可以添加标题和摘要
<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
<caption>2012年到2013年库存记录</caption>
1，使用<a>标签，链接到别一个页面
使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
语法：
<a href=”目标网址”>链接显示的文本</a>
例如：
<a href="http://www.imooc.com">click here!</a>
上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。
认识<img>标签，为网页插入图片
在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。
语法：
<img src="图片地址" alt="下载失败时的替换文本" title="提示文本">
举例：
<img src="myimage.gif" alt="My Image" title="My Image" />
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
四，表单标签（与用户进行交互）
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
<form method="传送方式" action="服务器文件">
讲解：
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）。
<input>输入框
文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
语法：
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
文本域，支持多行文本输入
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
<textarea rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
单选框，复选框
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当type="radio"时，控件为单选框
当type="checkbox"时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序ASP、PHP使用
4、checked：当设置checked="checked"时，该选项被默认选中
注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
下拉列表框，节省空间
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
语法：<option value="提交值">选项</option>
提交值是向服务器提交的值，选项是显示的值。
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
使用下拉列表框进行多选
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，
就可以实现多选功能，进行多选时按下Ctrl键同时进行单击，可以选择多个选项。
如下代码：
<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
在表单中有两种按钮可以使用，分别为：提交按钮、重置。
1，提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
2，重置按钮，重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法：
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
五，css样式
认识css样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
如下列代码：
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
CSS代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成
选择符{属性:值}
p{color:red;}
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
从CSS 样式代码插入的形式来看基本可以分为以下3种：
内联式、嵌入式和外部式三种
1,内联式css样式
就是把css代码直接写在现有的HTML标签中，如下面代码：
<p style="color:red">这里文字是红色。</p>
css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
<p style="color:red;font-size:12px">这里文字是红色。</p>
2,嵌入式css样式，
就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
3,外部式css样式
写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
六，CSS选择器
每一条css样式定义由两部分组成，形式如下：
选择器{
样式;
}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。
语法：
.类选器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
下面代码是正确的：
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>
而下面代码是错误的：
<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
下面的代码是正确的(完整代码见右侧代码编辑器)
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px
下面的代码是不正确的(完整代码见右侧代码编辑器)
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>
上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的子元素。如下面的代码：
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}
请注意这个选择器与子选择器的区别
1，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代
2，后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中任意标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
这行代码会使被<a></a>标签包裹的文字内容中的“胆小如鼠”字体颜色在鼠标滑过时变为红色。
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
七，CSS的继承、层叠和特殊性。
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
但注意有一些css样式是不具有继承性的。如border:1px solid red;
根据权值来判断使用哪个css样式
浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低
我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
如下面代码:
p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
所以前面的css样式优先级就不难理解了：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
重要性
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
如下代码：
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面
八，CSS格式化排版
文字排版
1，文字排版--字体
我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。
body{font-family:"宋体";}
这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
2，文字排版--字号、颜色
可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：
body{font-size:12px;color:#666}
3，文字排版--粗体
我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。
p span{font-weight:bold;}
4，文字排版--斜体
以下代码可以实现文字以斜体样式在浏览器中显示：
p a{font-style:italic;}
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
5，文字排版--下划线
有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：
p a{text-decoration:underline;}
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
删除线，在电商网站上经常见。
p a{text-decoration:line-through;}
段落排版
1，段落排版--缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
p{text-indent:2em;}
注意：2em的意思就是文字的2倍大小。
2，段落排版--行间距
这一小节我们来学习一下另一个在段落排版中起重要作用的行间距属性（line-height），如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;}
3，段落排版--字间距、字母间距
文字间隔、字母间隔设置：
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现，如下面代码：
h1{
letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置：
如果我想设置英文单词之间的间距呢？可以使用word-spacing来实现。如下代码：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
九，CSS盒模型
元素分类
在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
元素分类--块级元素
什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素，从页使用a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
元素分类--行内元素
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。
行内元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
元素分类--内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒模型--边框（一）
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
上面是border代码的缩写形式，可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
盒模型--边框（二）
现在有一个问题，如果有想为p标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边上、右、左边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
盒模型--边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上下左右的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
盒模型--填充
元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。如下代码：
div{padding:20px 10px15px 30px;}
顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}
盒模型代码简写
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法:
1、如果top、right、bottom、left的值相同，如下面代码：
margin:10px 10px 10px 10px;
可缩写为：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：
margin:10px 20px 10px 20px;
可缩写为：
margin:10px 20px;
3、如果left和right的值相同，如下面代码：
margin:10px 20px 30px 20px;
可缩写为：
margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
颜色值缩写
关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
例子1：
p{color:#000000;}
可以缩写为：
p{color: #000;}
例子2：
p{color: #336699;}
可以缩写为：
p{color: #369;}
十，CSS布局模型
css布局模型
清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
流动模型（一）
流动（Flow）：自上而下。
先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
注意：设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。
什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
1，层模型--绝对定位（相对于父类）
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
2，层模型--相对定位（相对于以前）
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
3，层模型--固定定位（相对于网页窗口）
固定住某一坐标。
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
小伙伴们学习了12-6小节的相对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
编程小石头，为分享干货而生！据说，每个年轻上进，颜值又高的互联网人都关注了编程小石头。
三部分 附录（因为暂时不支持插入超链接所以部分内容无法显示）
附录一 DIV命名规范
附录二 CSS精灵
a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定义状态*/
text-indent:-2015px; /*隐藏文字*/
background-image:url(button.png); /*定义背景图片*/
background-position:0 0;
/*定义链接的普通状态，此时图像显示的是顶上的部分*/
}
a:hover {
background-position:0 -66px;
/*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active {
background-position:0 -132px;
/*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}
附录三 一些tips解决方案
页面优化实践
写DIV+CSS 的一些常识
常用代码片段
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin:0; padding:0;
}
body {
background:#fff;
color:#555;
font-size:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size:14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-size:100%;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
a {
color:#555;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:none;
}
ol,ul,li {
list-style:none;
}
input,
textarea,
select,
button {
font:14px Verdana,Helvetica,Arial,sans-serif;
}
table {
border-collapse:collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
table-layout: fixed; word-break: break-all;;border-collapse: collapse
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”> <span style=”background:#f00; display:table-cell; vertical-align:middle;”> <input type=”button” value=”item1″ /> </span> </div>
filter:alpha(opacity=50); /*1-100*/ -moz-opacity:0.5; /*0-1.0*/ -khtml-opacity:0.5; /*0-1.0*/ opacity:0.5; /*0-1.0*/
white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
.fix{zoom:1;}
.fix:after{
display:block;
content:'clear';
clear:both;
line-height:0;
visibility:hidden;
}
一些总结
一些概念
学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！
*请认真填写需求信息，我们会在24小时内与您取得联系。
