CSS

没人告诉你关于z-index的一些事

关于z-index的问题是很多程序员都不知道它是如何起作用的。说起来不难,但是大部分人并没有花时间去看规范,这往往会照成严重的后果。你不信?那就一起来看看下面的问题。

CSS分层

随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理。在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免。在这篇文章里,我将着重于讨论使用一种方法或者一个命名规则所带来的好处。这里有很多可供使用的前端方法和命名规则,每个都有自己的优缺点。在几乎所有的案例中CSS被分割成更易于管理的代码“块”。CSS的这种分割方式定义了每一种方法。

更好利用text-decoration属性

Marie Mosley和他的朋友刚刚在Almanac改动了text-decoration的属性。你可能了解这个属性。例如,很多浏览器在链接处默认text-decoration: underline即添加下划线,当然,你也可以设置 text-decoration: none删除下划线。但你有可能不知道这个属性还可以做很多事情,并且使用各种子属性可以实现更多细致的样式。

视窗单位 vs 百分比单位

在我的关于CSS字体大小的文章中,我写了关于(相对的)新的视窗单位。这些单位vw,vh,vmin,和vmax都是基于浏览器视窗(Viewport)的大小的。因为它们的实际大小是根据视窗(Viewport)大小改变的,对于响应式设计中这使它们成为很好的单位。虽然在我以前的文章中我反对使用这些单位定义字体大小,但是用它们定义布局元素是非常有用的。

七个你可能不了解的CSS单位

我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位。随着Web继续的发展,对新的解决方案的需求也会继续增大。因此,作为网页设计师和前端开发人员,我们别无选择,只有去了解我们的工具集并且熟悉它。这意味着我们还要了解一些特殊的工具-那些不经常使用的,但是当需要它们的时候,它们恰恰是最正确的工具。今天,我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位,就像像素或者相对单位,但是很可能你从来没听说过它们!让我们一探究竟吧。

CSS的font-size属性

有几种不同的方法可以在CSS中声明字体大小。总的来说,这些单位分为两类——相对和绝对。**绝对单位**(大多)是固定的,并且涉及到一些物理的测量。他们一旦被声明,将不能通过改变其他元素的字体大小来改变他的大小。**相对单位**没有一个客观的测量。相反,它们的实际大小是通过父元素的尺寸来确定的。这意味着他们的大小可以通过改变相关元素的大小来改变。

浏览器输入事件:我们可以做的比点击更好么?

响应用户输入可以说是我们界面开发的核心。为了构建响应式Web产品,理解触摸,鼠标,指针,键盘如何和浏览器一起工作是关键。你很有可能已经在移动浏览器上经历了300毫秒的延迟或者在纠结于触摸滚动导致页面卡顿。在这篇文章中,我们将介绍事件级联并且利用这些知识来实现一个支持多种输入法的点击事件而不违反像Opera Mini这些代理浏览器事件规则。

Rem VS Px

在网络中充满了资源告诉你用相对长度emrem来代替像素,因为它们会使你的设计更容易。几乎我所知道的所有的前端工程师(包括我自己)多年来都盲目的追随这些指示,这在行业中也变成了一个约定俗成的标准。最近我做了一些调查研究,完全改变了我对这两个相对单位的看法。从现在开始我将不会再使用rem并且只会在非常特殊的用例中才会使用em。在这篇文章中我将分享我的观察结果,希望可以说服你结束我们挚爱的rem单位,最终没有回退的使它进入我们的工具(鉴于IE8死的慢),但是变得毫无用处支持更受欢迎的CSS参考像素。

line-height的妙用

CSS中的line-hight属性是用来控制文本行之间的空隙的。它一般情况下没有单位的设定(如:line-height:1.4;)所以这是一个按字体尺寸的比例来计算。这对印刷版来说是一个很重要的属性。线条过低就会挤在一起,线条过高就会相距甚远,这两种情况都会降低可读性。不过你可能已经知道了这一点。

CSS中的background-position

为元素应用背景图片大概是CSS中最常使用的特性之一,并且有很多背景属性来让我们控制元素背景的各方面表现。元素可以有多个背景图片。如果想要应用多个背景图片,你可以为元素提供一个逗号分隔的列表值作为background-image属性,而background-position属性用于指定图片的位置。这个属性很多不同的可能值,各有不同的效果,而且一些值可能对于CSS初学者来说很陌生,值得深入研究。

页面

返回顶部