SVG图标的Sprite处理

svg正在越来越广泛的应用在前端领域,由于矢量图缩放对图像质量无损,越来越多的图标、图片都开始使用svg。但svg文件一旦多起来,就需要对这些资源进行集中管理。webpack的svg-loader只是简单的将svg文件替换成了文本内容,增加了bundle文件的体积,灵活性也不高,如果能将svg文件处理成类似于jpg/png图片一样,做成sprite就好了。而这正是svg-sprite-loader要做的事情。 viewBox 在svg文件中,可以创建若干个view,view包含一个名为viewBox的属性,viewBox允许我们定义一个矩形区域,通过四个参数 left, top, width和height,可以通过设置id来对view进行标示。 当定义view之后,在引入svg文件时,就可以指定显示某个view,如下所示 <img src="sprite.svg#svgView(viewBox(0, 0, 32, 32))" alt=""> .icon-clock { background: url(sprite.svg#icon-clock-view)…

CSS中的单位

CSS中有很多关于尺寸的单位,包括:px,pt,%,em,cm等,根据其性质可以分为两类:绝对尺寸单位和相对尺寸单位。 绝对尺寸 绝对尺寸就是物理世界的度量单位,CSS中的绝对度量单位见下表 CSS中的绝对尺寸单位 符号名称备注 in英寸1 in = 2.54cm cm厘米 mm毫米 pc派卡印刷行业使用的长度单位。1 pc = 1/6 in = 4.512 mm pt磅1pt = 1/72 in = 0.352 777 mm, 1 in = 72pt 使用绝对尺寸的好处在于我们可以直观的理解尺寸的大小,但是,现在的页面往往要求支持在多终端下浏览,为了保证在手机、平板等设备上显示友好,绝对尺寸显然无法实现这一点,因此,最好通过相对尺寸单位来进行大小设置。 #相对尺寸 相对尺寸并不是一个确切的固定值,而是与当前屏幕的尺寸有关,…

HTML 5中的input list与select

在HTML 5中,新引入了一个datalist元素,它非常类似select,但是不能单独使用,需要配合input,示例如下: <label>Choose a browser from this list: <input list="browsers" name="myBrowser" /></label> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value=…

em和i

em和i这两个元素,在以前常常被混用,或者说混淆,html 5以后,语义的概念被强化,这两个标签的区别也更加明显。 em侧重内容的强调、着重,凸显其重要性,而i则只是表明内容需要加以区别/区分,表示从正常的散文中区分出的文本, 如电影或书籍的名字,一个外来词, 或者当文本指的是一个字的定义,而不是其自身代表的语义。因此,em元素是可以嵌套的,嵌套越深的em元素,说明其越重要,而对于i,虽然嵌套并不会引起错误,但并不存在语义上的必要。 举个栗子, "<em>I <em>am</em></em><i>Ironman</i>!",He said. "I am Ironman",He…

strike、s和del标签

这三个标签都可以实现文本删除线的效果,但有几个注意点: strike标签已经弃用 虽然部分浏览器还保留对strike的支持,但是这个标签随时有可能被取消支持,应当使用del或者s替换这个元素。 选择s还是del 其实看一下两者的官方说明,就可以知道。对于s,官方说明如下 The HTML <s> element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is…