那些容易忘记但是又经常用到的前端技巧

盒子模型(Box Model)

设置页面内容是html 编码格式是utf-8:

超链接各种状态设置：

页面跳转方法：

常用短语元素样式：

abbr：缩略语

br：换行

em：标志着重强调一段文字

i：表示与周边内容兼容不同的一段文字，比如来自另一种语言

span：一个没有自己语意的通用元素，可以用在希望引入一些全局属性却又不想引入额外语义的情况

strong：表示重要内容

wbr：表示可安全换行的地方

blockquote：表示引自他处的大段内容

nav：表示有意集中一起的导航元素

canvas：生成一个动态的图形画布

progress：嵌入目标进展或任

Web安全字体组合：

Serif 字体（有衬线字体）

sans - serif字体（没有衬线的字体）

Monospace 字体（等宽字体）

WEB安全色：

WEB SAFE COLORS

颜色的三种表示方式：

十六进制色 color:#0000ff; //若能简化可简化为#00f

RGB 颜色 color:rgb(255,0,0);

RGBA 颜色 color:rgba(255,0,0,0.5);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）

HSL 颜色 color:hsl(120,65%,75%);//HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度）

HSLA 颜色 color:hsla(120,65%,75%,0.3);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）

预定义/跨浏览器颜色名

检查网页背景是否和文本/链接颜色有较好的对比度

WebAIM Color Contrast Checker

CSS的三种引入方式

一、行内样式：使用style属性引入CSS样式。

示例：

二、内部样式表：在style标签中书写CSS代码。style标签写在head标签中。

示例：

三、外部样式表：CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

语法：

用图片代替列符号

向列表

,添加list-style-image属性：

给大家推荐我的web前端资料分享群：64596,

5538有免费学习资料，还有各种趣味案例，欢迎大家加入！

收藏图标(favorites icon)设置

用于网页标题栏前小图标，例如：

背景设置

相对链接方式

1、直接使用当前目录或当前子文件夹下的文件：

href="index.html"

href="img/c.jpg"

2、使用../返回当前目录上级目录

href="../index.html"

或先返回上级目录，在向下选用文件

href="../img/c.jpg"

做一个对话框

减少代码耦合

一个参数在多个文件中使用，修改一个地方会影响全局。防止耦合可使用传参的方式。

减少重复代码

将重复代码封装成一个函数（模块、插件、类等）。

页面元素推拽

样式规则的权重计算方式

绝对定位层下margin:auto会失效

定位就不能用margin了, 要用left/top/right/bottom等。如设置left:50%，然后margin-left的值为层的宽度的一半，就可在达到margin:auto的效果。