分类 Css 下的文章

与图像一样,CSS和JavaScript是导致代码膨胀和页面加载缓慢的两个最常见原因。有时(虽然不经常)这是不可避免的,页面的功能和设计需要大量的代码,但是几乎总是有改进的空间。用户不喜欢等待页面加载,搜索引擎知道这一点。你应该尽力提高页面速度。

尤其令人沮丧的是,在某些页面中,一个页面所调用的大部分脚本是冗余的,并且实际上没有被用于任何用途。出现这种情况的原因有很多,其中包括以下几点:

  • 在模板的开头部分页面需要调用脚本,但实际情况,站点上的每个页面都需要调用脚本(这并不是必须的)。
  • 仅在与页面的特定部分进行交互时使用的脚本和样式,例如选项卡,手风琴,多面导航 。
  • Cruft是随着时间的推移而构建的,其中随着时间的推移会添加额外的功能或样式,而不需要检查现有的代码以查看是否可以修改它以适应新的需求( Dawn Anderson recently talked about the concept of generational cruft )
  • CMS安装插件/扩展,其中只有一小部分功能是真正需要的。
  • 糟糕的代码。

Read more...


不管是在JS文件还是在HTML文件中,右键点击,都有“格式化文件”的菜单,帮助我们排版。可是在CSS文件中,却没有这样的选项,这时候我们就要通过插件帮我们完成这项工作了。先看下格式化后的效果图:
88500-vgidwmndw4.png

一、安装插件

​ 在Visual Studio Code的扩展工具栏中,在搜索栏中输入“csscomb”,就可以找到该插件并安装了。

Read more...


文本字体大小

下表列出了在网页字体默认值为 16px 时, px 和 em 及网页字体百分比的换算数据。
pxem百分比
5px0.3125em31.25%
6px0.3750em37.50%
7px0.4375em43.75%
8px0.5000em50.00%
9px0.5625em56.25%
10px0.6250em62.50%
11px0.6875em68.75%
12px0.7500em75.00%
13px0.8125em81.25%
14px0.8750em87.50%
15px0.9375em93.75%
16px1.0000em100.00%
17px1.0625em106.25%
18px1.1250em112.50%
19px1.1875em118.75%
20px1.2500em125.00%
21px1.3125em131.25%
22px1.3750em137.50%
23px1.4375em143.75%
24px1.5000em150.00%
25px1.5625em156.25%

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。

居中布局

水平居中

1)使用inline-block+text-align
(1)原理、用法

  • 原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。
  • 用法:对子框设置display:inline-block,对父框设置text-align:center。

Read more...


JavaScript’s Strict Mode and Why You Should Use It

从ECMAScript5开始,我们就可以在程序开发中使用一个更加受限制的解析模式: 严格模式。严格模式通过强制要求更好的编程习惯并排除一些不安全以及不推荐的语言特性。使用严格模式必须在代码中使用下面的指令:

"use strict";

"use strict";可以有两种使用方法。第一种是文件层面的引用严格模式。通过在文件的开始引入该指令(该指令前面只能是空格或者注释),该模式在全局上下文都有用。这意味着你所有的代码都必须是在严格模式下被检查。但是要注意的是对严格模式的文件和非严格模式的文件的合并操作。如果将严格模式的文件放到前面,非严格模式的文件也将使用严格模式进行检查。将非严格模式的文件放到前面将会导致相反的结果,因为上面提到的该指令必须放在文件的开始,所以这就意味着该指令在合并之后的文件中不生效。

Read more...