前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理

大家好,全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅!

字体简写属性

行高line-height

行高:行之间的高度(line--height)指的是文字占有的实际高度。

此时div的高度就是文字的行高,

前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理_第1张图片

就是边框里面的高度就是行高,如果设置了line-height:200px

前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理_第2张图片

行高除了可以设置大小(px,em,rem。。)还可以是一个整数,行高将会是字体的倍数。

比如line-height:2此时字体大小是50px,行高就是100px

行宽

就是字体框,字体存在的格子,设置font-size实际上就是设置字体框的高度

行高会在字体框的上下平均分配,比如行高100,字体框是50,那么就会在字体的上面分配25,下面分配25,让字体的中间。

所以行高可以用来使文字垂直居中:

前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理_第3张图片

此时将line-height设置与元素高度一样,可以使单行文字在一个元素中垂直居中:

        div{
            font-size:50px;
            height:200px;
            border:1px red solid;
            line-height:200px
        }

还经常用来设置文字的行间距。行间距=行高-字体大小

前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理_第4张图片

此时行高200px,字体大小50px,那么行间距就是200-50=150。

 

前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理_第5张图片

字体的简写属性

font可以设置字体相关的所有属性,(可以一起设置font-sizefont-family

前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理_第6张图片

代码等价。

先写字体大小,在写字体族

也可以指定行高font:20px/2 'Times New Roman', Times, serif加一个/号接着是行高(line-height)的值,不写也可以。如果不写,就使用默认值,即使上面样式设置了行高

前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理_第7张图片

此时设置了line-heigh:2,但是font没有指定行高,就使用默认值了,而不是2.如果想line-height:2生效,可以使他放在font的下面或者直接font :50px/2 'Time New Roman', Times, serif;(原因是font的简写属性的行高默认值覆盖了在他上面的行高默认值)

字重font-weight

font-weight:bold字体加粗。

可选值:

  1. normal:默认值,不加粗

  2. bold:字体加粗

  3. 100-900九个级别(没什么用)

font-style字体风格

可选值:

  1. normal:默认值

  2. italic斜体

综上,可以使用font统一设置:

font:italic bold 50px/2 'Time New Roman', Times, serif;

同理和统一设置行高也是一样,如果不写italic bold,不写就用默认值,即使上面也设置了这个属性。

文本样式

文本水平对齐text-align

默认是左侧对齐:

前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理_第8张图片

text-align可选值:

  1. left:默认值,左侧对齐

  2. right:右对齐

  3. center:居中对齐

  4. justify:两端对齐(两边都帖死,不留空白)

文本垂直对齐vertical-align

vertical-align可选值

  1. baseline,默认值,子元素基线对齐(文字底边中线)

  2. top:顶部对齐,子元素和父元素的基线对齐

  3. bottom:底部对齐,子元素和父元素基线对齐

  4. middle:居中对齐,子元素的中线和父元素的中线对齐

  5. 指定一个px,正数往上走,负数往下走。

之前说过,图片是一个替换元素,相当于文字,所以也有文字的基线,可以设置vertical-align:top/middle/bottom来全部压着边线

文字省略号处理

之前我们说过通过text-decoration:none可以去除a标签的下划线,其它的可选值如下:

  1. none:默认值,没有线

  2. underline:下划线

  3. line-through:删除线

  4. overline:上划线

还可以指定颜色和样式text-decoration:overline red dotted

京东:

前端工程师实战16:详解字体垂直对齐、字体居中对齐、字体行间距(行高)、文字省略号处理_第9张图片

文字太多出现省略号的做法:

.box2{
    /*white-space设置网页如何处理空白
    可选值:
        1. normal:正常
        2. nowrap:不换行(字太多会出现滚动条)
        3. pre:保留空白(你写的是怎么样就显示怎么样,多个空格也正常显示)
    */
    /*限制宽度,不换行,溢出内容裁剪 在加上 ellipsis就可以显示省略号*/
    width:200px;
    white-space: nowrap;
    overflow:hidden;
    
    text-overflow:ellipsis;
}
 

你可能感兴趣的:(HTML与CSS入门与进阶,css,html,css3,前端,html5)