美文网首页
css行高和字号

css行高和字号

作者: 锦雯书 | 来源:发表于2017-05-02 20:07 被阅读0次

1. 行高

CSS中,所有的行都有行高。盒模型的padding并不是直接作用在文字上,而是作用在“行”上。

行高格式:

line-height:40px;

文字是在自己的行里居中的。比如,文字字号14px,行高24px。那么为了严格保证字在行里面居中,那么行高、字号一般都是偶数。这样,它们的差就是偶数,就是够被2整除。

2. 单行文本垂直居中

文本在行里面居中

公式:

行高:盒子高;

图1

行高=盒子高。只适用于单行文本垂直居中!!不适用于多行,如果想让多行文本垂直居中,需要设置盒子的padding:

图2

3、font属性

·使用font属性,能够将字号、行高、字体,能够一起设置。

font:14px/24px "宋体";

等价于三行语句:

font-size:14px;

line-height:24px;’

font-family:“宋体”;

font-family就是“字体”。

注意:网页中不是所有的字体都能用,能不能用取决于用户的电脑里有没有装该字体。如果没有该字体,就默认变成“宋体”。

页面中,中文只使用:微软雅黑、宋体、黑体。如果页面中需要其他的字体,那么需要切图。

英语:Arial、Times New Roman

备选字体可以有无数个,用逗号隔开。

格式:font-family:“微软雅黑”,“宋体”

如果有英文字体,就要将英文字体放在最前面,这样所有的中文,就不能匹配英语字体,就自动的变为后面的中文字体:

格式:font-famliy:"Times New Roman","微软雅黑","宋体";

所有的中文字体,都有英文别名:

微软雅黑:Microsoft YaHei

宋体:SimSum

·行高可以用百分比,表示字号的百分之多少。一般行高都大于100%。

font:12px/200% “宋体”

等价于

font:12px/24px“宋体”

相关文章

  • css行高和字号

    1. 行高 CSS中,所有的行都有行高。盒模型的padding并不是直接作用在文字上,而是作用在“行”上。 行高格...

  • css行高和字号

    1、什么是行高?在css中所有的行都有自己的行高 注意点行高和盒子的高不是同一个概念 规律1.1文字在行高中默认是...

  • CSS基础知识四

    知识点导航: 行高和字号

    行高

    在 CSS 中,所有的行都有行高。盒模型的 padding 不是作用在...

  • CSS总结笔记(三)

    一、行高和字号 1.1 行高 CSS中,所有的行,都有行高。盒模型的padding,绝对不是直接作用在文字上的,而...

  • CSS基础之行高和字号,超链接美化,backgroud系列属性

    1.行高和字号 1.1行高 CSS中,所有的行,都有行高。盒模型的padding,绝对不是直接作用在文字上的,而是...

  • 行高和字体、超链接以及background(七)

    行高和字号 行高CSS中,所有的行,都有行高,盒模型的padding,绝对不是直接作用在文字上的,而是作用在行上的...

  • 行高和字号

    1 行高 1 行高就是盒子的高,对吗2 如何让元素中的一行内容在元素中垂直居中3 如何让元素中的多行内容在元素中垂...

  • 行高和字号

    行高:指的是每一行的高度 盒子高:指的是元素的高度 1.文字默认在行高中默认是居中显示的2.如果盒子中只有一行内容...

  • 2018.10.18行间距,边框,浏览器的默认样式

    行高 line-height:40px; 字号默认16px;行间距等于行高减去字号可以直接px 也可以% ...

  • 字号与行高

    1. 什么是字号与行高 什么是字号大小?字号大小就是字体的高度,例如设置字号为50px,那么它的高度如下图所示: ...

网友评论

      本文标题:css行高和字号

      本文链接:https://www.haomeiwen.com/subject/pwactxtx.html