资讯专栏INFORMATION COLUMN

啦咯ill图

cfanr / 2772人阅读

摘要:根据继承一说,我们在的内容容器中没有显式的设置字体大小,这样整个将继承了其父元素的字体。很容易得到他们的值为

根据CSS继承一说,我们在“div#wrap”的内容容器中没有显式的设置字体大小,这样整个“div#wrap”将继承了其父元素“body”的字体——“16px”。
1、给段落设置样式:——“12px”的字体,“18px”的行高以及margin值
从CSS继承中,我们可以得知我们所有段落继承了其父元素“div#wrap”的“font-size:16px”。同时我们通过前面的介绍得知1px = 1 ÷ 16 = 0.0625em,这样一来我们就很轻松的知道“12px”等于多少个“em”
0.0625em × 12 = 0.750em
这样我们就可以给段落p设置样式:

        p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}
    

要计算出段落所需的行高和“margin”为“18px”,来满足Richard Rutter说的basic leading,那我们就需要像下面的方法和来计算:
18 ÷ 12 = 1.5em
使用所需的行高值“18px”直接除以“字体大小12px”,这样就得到了段落“p”的“line-height”值。在本例中行高就等于字体的“1.5”倍,接着我们把“line-height”和“margin”样式加到段落“p”中

        p{
            font-size: 0.75em;/*0.625em × 12 = 0.750em */
            line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */
            margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */
        }
    

2、给标题设置一个18px的字号
标题“h1”和段落“p”一样的原理,他也是继承他父元素“div#wrap”的“16px”的“font-size”,所以我们也是按同样的方法可以计处出他的“em”
0.0625em × 18 = 1.125em
我们可以把得出的值写到CSS样式表中

        h1 {
            font-size: 1.125em;/*0.625em × 18 = 1.125em*/
        }
    

同样为了保留Richard Rutter所说的vertical rhythm,我们同样将标题“h1”的“line-height”和“margin”都设置为“18px”,使用方法前面介绍的方法。很容易得到他们的“em”值为“1em”:

        h1 {
            font-size: 1.125em; /*0.625em × 18 = 1.125em*/
            line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */
            margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */
        }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114988.html

相关文章

  • 通俗的方式理解动态类型,静态类型;强类型,弱类型

    摘要:不允许隐式转换的是强类型,允许隐式转换的是弱类型。拿一段代码举例在使用调用函数的时候会先生成一个类模板运行时生成,执行的时候会生成类模板,执行的时候会生成类模板。 0 x 01 引言 今天和一个朋友讨论 C++ 是强类型还是弱类型的时候,他告诉我 C++ 是强类型的,他和我说因为 C++ 在写的时候需要 int,float 等等关键字去定义变量,因此 C++ 是强类型的,我告诉他 C+...

    周国辉 评论0 收藏0
  • TP-GAN 让像生成再获突破,根据单一侧脸生成正面逼真人脸

    摘要:中科院自动化所,中科院大学和南昌大学的一项合作研究,提出了双路径,通过单一侧面照片合成正面人脸图像,取得了当前较好的结果。研究人员指出,这些合成的图像有可能用于人脸分析的任务。恢复的图像的质量严重依赖于训练过程中的先验或约束条件。 中科院自动化所(CASIA),中科院大学和南昌大学的一项合作研究,提出了双路径 GAN(TP-GAN),通过单一侧面照片合成正面人脸图像,取得了当前较好的结果。研...

    gougoujiang 评论0 收藏0
  • 代码整洁之道 - 有意义的命名

    摘要:我们这里再介绍一下,朱重八家族的名字,都很有特点。取这样的名字不是因为朱家是搞数学的,而是因为在元朝,老百姓如果不能上学和当官就没有名字,只能以父母年龄相加或者出生的日期命名。所以说命名不仅仅是一种科学,更是一种艺术。 在小朱元璋出生一个月后,父母为他取了一个名字(元时惯例):朱重八,这个名字也可以叫做朱八八。我们这里再介绍一下,朱重八家族的名字,都很有特点。朱重八高祖名字:朱百六;朱...

    mengbo 评论0 收藏0
  • 代码整洁之道 - 有意义的命名

    摘要:我们这里再介绍一下,朱重八家族的名字,都很有特点。取这样的名字不是因为朱家是搞数学的,而是因为在元朝,老百姓如果不能上学和当官就没有名字,只能以父母年龄相加或者出生的日期命名。所以说命名不仅仅是一种科学,更是一种艺术。 在小朱元璋出生一个月后,父母为他取了一个名字(元时惯例):朱重八,这个名字也可以叫做朱八八。我们这里再介绍一下,朱重八家族的名字,都很有特点。朱重八高祖名字:朱百六;朱...

    Cobub 评论0 收藏0
  • attention is all you need 的预测过程

    摘要:一预测流程及输入内容我们的的是输入测试集编码也就是和训练阶段输入一样,但的是向量维度和训练时的输入相同。在预测时,的会传递到这边的个作为其,随机向量在第一步的时候作为传入。 showImg(https://segmentfault.com/img/bVbnJoa?w=568&h=295); 好,闲话少说。关于self-attention的训练阶段http://jalammar.gith...

    zhouzhou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<