大家好,全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅!
行高:行之间的高度(line--height)指的是文字占有的实际高度。
此时div的高度就是文字的行高,
就是边框里面的高度就是行高,如果设置了line-height:200px
:
行高除了可以设置大小(px,em,rem。。)还可以是一个整数,行高将会是字体的倍数。
比如line-height:2
此时字体大小是50px,行高就是100px
就是字体框,字体存在的格子,设置font-size
实际上就是设置字体框的高度
行高会在字体框的上下平均分配,比如行高100,字体框是50,那么就会在字体的上面分配25,下面分配25,让字体的中间。
所以行高可以用来使文字垂直居中:
此时将line-height
设置与元素高度一样,可以使单行文字在一个元素中垂直居中:
div{ font-size:50px; height:200px; border:1px red solid; line-height:200px }
还经常用来设置文字的行间距。行间距=行高-字体大小
此时行高200px,字体大小50px,那么行间距就是200-50=150。
font
可以设置字体相关的所有属性,(可以一起设置font-size
,font-family
)
代码等价。
先写字体大小,在写字体族
也可以指定行高font:20px/2 'Times New Roman', Times, serif
加一个/号接着是行高(line-height)的值,不写也可以。如果不写,就使用默认值,即使上面样式设置了行高
此时设置了line-heigh:2
,但是font
没有指定行高,就使用默认值了,而不是2.如果想line-height:2
生效,可以使他放在font
的下面或者直接font :50px/2 'Time New Roman', Times, serif;
(原因是font的简写属性的行高默认值覆盖了在他上面的行高默认值)
font-weight:bold
字体加粗。
可选值:
normal
:默认值,不加粗
bold
:字体加粗
100-900
九个级别(没什么用)
可选值:
normal
:默认值
italic
斜体
综上,可以使用font
统一设置:
font:italic bold 50px/2 'Time New Roman', Times, serif;
同理和统一设置行高也是一样,如果不写italic bold
,不写就用默认值,即使上面也设置了这个属性。
默认是左侧对齐:
text-align
可选值:
left
:默认值,左侧对齐
right
:右对齐
center
:居中对齐
justify
:两端对齐(两边都帖死,不留空白)
vertical-align
可选值
baseline
,默认值,子元素基线对齐(文字底边中线)
top
:顶部对齐,子元素和父元素的基线对齐
bottom
:底部对齐,子元素和父元素基线对齐
middle
:居中对齐,子元素的中线和父元素的中线对齐
指定一个px,正数往上走,负数往下走。
之前说过,图片是一个替换元素,相当于文字,所以也有文字的基线,可以设置vertical-align:top/middle/bottom
来全部压着边线
之前我们说过通过text-decoration:none
可以去除a标签的下划线,其它的可选值如下:
none
:默认值,没有线
underline
:下划线
line-through
:删除线
overline
:上划线
还可以指定颜色和样式text-decoration:overline red dotted
京东:
文字太多出现省略号的做法:
.box2{ /*white-space设置网页如何处理空白 可选值: 1. normal:正常 2. nowrap:不换行(字太多会出现滚动条) 3. pre:保留空白(你写的是怎么样就显示怎么样,多个空格也正常显示) */ /*限制宽度,不换行,溢出内容裁剪 在加上 ellipsis就可以显示省略号*/ width:200px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }