Web 开发者应该避免的 5 个 CSS 的做法

原文地址:5 CSS Practices To Avoid as a Web Developer 原文作者:Alexey Shepelev 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:霜羽 Hoarfroster 校对者:KimYang、Chorer 有人认为 CSS 很难学习,觉得 CSS 有很多的坑,甚至还有一点儿魔幻,难以理解,很容易会搬起石头砸自己的脚。对此我感到难过,毕竟,我可不这么认为。 在考虑了可以做什么之后,我提出了五个我挺讨厌的 CSS 的做法,希望帮助大家避免这些习惯。 1. 设置内外边距,然后将其重置 我经常看到人们为所有元素设置内外边距,然后为第一个元素或者最后一个元素清除刚刚写的边距。我不知道为什么你非要在一条规则就可以解决问题的情况下写两条规则。一次为所有必需的元素设置边距明显容易得多! 为简化 CSS,你可以选用以下几种选择器:nth-child 或 nth-of-type 选择器,还有 :not() 伪类或相邻元素组合器(即 +)。 不要这么写:

CSS 单位 2

CSS 有几个不同的单位用于表示长度。 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。 长度有一个数字和单位组成如 10px, 2em, 等。 数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。 对于一些 CSS 属性,长度可以是负数。 有两种类型的长度单位:相对和绝对。 浏览器支持 下表中的数字表示支持该长度单位的最低浏览器版本。 长度单位 Chrome IE Firefox Safari Opera em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 9.0* 19.0 6.0 20.0 vmax 26.0 不支持 19.0 不支持 20.0 注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。 相对长度 相对长 […]

CSS cubic-bezier() 函数

实例 从开始到结束的不同速度过渡效果:

定义与用法 cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。 贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态。 从上图我们需要知道的是 cubic-bezier 的取值范围:

我们需要关注的是 P1 和 P2 两点的取值,而其中 X 轴的取值范围是 0 到 1,当取值超出范围时 cubic-bezier 将失效;Y 轴的取值没有规定,当然也毋须过大。 最直接的理解是,将以一条直线放在范围只有 1 的坐标轴中,并从中间拿出两个点来拉扯(X 轴的取值区间是 [0, 1],Y 轴任意),最后形成的曲线就是动画的速度曲线。 cubic-bezier() 可用于 animation-timing-function 和 transition-timing-fun […]

CSS calc() 函数

实例 使用 calc() 函数计算 <div> 元素的宽度:

定义与用法 calc() 函数用于动态计算长度值。 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% – 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则; 支持版本:CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 "webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。 函数 calc() 26.0 19.0 -webkit- 9.0 16.0 4.0 -moz- 7.0 6.0 -webkit- 15.0 CSS 语法

值 描述 […]

Electron

使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。 Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。   比你想象的更简单 如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。 Web 技术 Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。 开源 Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。 跨平台 Electron 兼容 Mac、Windows 和 Linux,可以构建出三个平台的应用程序。

Blockquote

Blockquote 对象 Blockquote 对象代表着一个 HTML 引用(blockquote)块元素。 <blockquote> 标签定义摘自另一个源的块引用。 一个 <blockquote> 元素的内容通常展现为一个左、右两边进行缩进的段落。 在 HTML 文档中的每一个 <blockquote> 标签创建时,都会创建一个 Blockquote 对象。   from:

CSS 奇思妙想边框动画

今天逛博客网站 — shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框。 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样。 border 属性 谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图中便出现了 dashed。 除了最常见的 solid,dashed,CSS border 还支持 none,hidden, dotted, double, groove, ridge, inset, outset 等样式。除去 none,hidden,看看所有原生支持的 border 的样式: 基础的就这些,如果希望实现一个其他样式的边框,或者给边框加上动画,那就需要配合一些其他属性,或是脑洞大开。OK,一起来看看一些额外的有意思的边框。 边框长度变化 先来个比较简单的,实现一个类似这样的边框效果: 这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框,下、右边框,通过 hover 时改变两个伪元素的高宽即可。非常好理解。 [crayon-60ccacce72ea828 […]

移动端:div在手机页面上随意拖动/拖拽

为了兼容PC和移动端,想出了以下办法: 拖动时候用到的三个事件: mousedown 、 mousemove 、 mouseup 在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是: touchstart 、 touchmove 、 touchend 事件。还有一点要注意的是在PC端获取当前鼠标的坐标是: event.clientX 和 event.clientY ,在移动端获取坐标位置则是: event.touches[0].clientX 和 event.touches[0].clientY 。下面就来说说怎么实现这个效果吧,先看一下效果: PC端 : 移动端 : 先来分析一个拖动的流程,以PC端为例,首先是鼠标按下( mousedown 事件),然后移动( mousemove 事件),最后释放鼠标( mouseup 事件),首先要设置一个变量记录鼠标是否按下,在鼠标按下的时候,我们做一个标记,然后需要记录一下鼠标当前的坐标,还有这个div当前的偏移量,当鼠标开始移动的时候,记录 […]

webview调用ios或者安卓的方法(内嵌h5页面调用app原生方法)

1.配合使用调用app原生的方法(h5页面不需要回调和数据) 实例1

  实例2

  2.配合使用调用app原生的方法(h5页面需要回调和数据) // 从App获取UUID(手机唯一标识)

标红字段为调用的app端定义的方法名,需要app端定义方法配合   from:https://www.cnblogs.com/wendyAndJken/p/9318501.html

精选!18个 VS Code 高效插件,献给需要的前端程序猿/媛

先写前面 俗话说 欲先善其事必先利器,作为一个21新世纪的打工人,怎么可以没有一个趁手的编辑器工具呢。今天的主角就是 VS Code ,一个炒鸡强大的编辑器,我们先来介绍一下这个编辑器。 VS Code 全称 Visual Studio Code 是由微软开发的一款免费、跨平台的轻量级代码编辑器。以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐,对 JavaScript 和 NodeJS 的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全等。 再强大的IDE那也不可能面面俱到什么功能都塞进去,那样只会导致IDE本身太臃肿。功能嘛,按需索取,所以,vscode的很多强大功能都是基于插件实现的,IDE只提供一个最基本的框子和最基本功能,由插件来丰富和扩展它的功能。 美化插件 一个美美的编辑器,在我们的开发过程中是非常友好的,所以我们先来介绍一下用于美化的插件 1. Material Theme 插件 Material Theme 插件是一款用于美化主题的图标的插件,该插件包含两个子插件,分别是 Community Material Theme 该插件用于美化主题,还有 […]

移动端touchstart,touchmove,touchend

touchstart:手指触摸到一个 DOM 元素时触发。 touchmove:手指在一个 DOM 元素上滑动时触发。 touchend:手指从一个 DOM 元素上移开时触发。 touchcancel:当系统停止跟踪触发触发   event.touches  当前触摸屏幕的触摸点数组 event.changedTouches   移动的触摸点信息数组 event.targetTouches  只包含放在元素上的触摸信息数组   touch对象代表一个触点,通过event.touches[0]获取

  from:https://www.cnblogs.com/fanbulaile/p/10880232.html

使用CSS实现表格细边框的三种方式

说到表格,虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。 由于操作表格的时候不可避免使用到细边框效果,所以我就整理了一下常用的三种实现细边框表格的方式,分享给大家,代码如下:

  from:https://www.cnblogs.com/kutimes/p/5054357.html