啦咯ill图

2019-07-14 admin

根据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://segmentfault.com/a/1190000019754196

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69683.html

文章标题:啦咯ill图

相关文章
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
ionic2 tabs 图标自定义实例
一、准备资源 tabs icon 的svg格式的矢量图片 二、生成字体样式文件 打开icoMoon网站去制作字体文件。 三、使用字体文件 解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下。并...
2017-03-13
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta cha...
2017-03-21
js实现炫酷的左右轮播图
本文实例为大家分享了js左右轮播图的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta...
2017-03-02
javascript控制图片播放的实现代码
一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了,兼容ie、firefox和google浏览器。 分享代码如下: <!DOCTYPE ...
2017-03-29
js+html5实现可在手机上玩的拼图游戏
本文实例讲述了js+html5实现可在手机上玩的拼图游戏。分享给大家供大家参考。具体如下: 手机版的拼图。pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ functi...
2017-03-27
Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图。该效果是在Canvas画布上制作的。将图片制作成粒子效果相对而言是比较简单的。重点了解两个知识点即可 1:图片是通过image对象形式绘制在画布上的,然后使用...
2017-03-20
JavaScript打开摄像头并截图上传示例
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用drawImage方法将video的内容绘至c...
2017-03-17
js+html5绘制图片到canvas的方法
本文实例讲述了js+html5绘制图片到canvas的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="m...
2017-03-24
javascript实现百度地图鼠标滑动事件显示、隐藏
其实现思路是给label设置样式,我们来看下具体做法吧 var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)}); label.setS...
2017-03-22
回到顶部