CSS

深入了解CSS字体度量,行高和vertical-align

line-heightvertical-align在CSS中是两个简单的属性。如此简单,大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们。但事实上并不如此。他们其实很复杂,也是CSS中难点之一,而且也是CSS中特性之一:内联格式化上下文(inline formatting context)。比如可以设置line-height带有长度单位的值或一个无单位的值,但其默认值是normal。那么在CSS中normal是什么呢?我们常常认为它是(或者应该是)1或者1.2,甚至也可以说,CSS规范都不清楚是哪一个。我们也知道,没有单位的line-height是相对于font-size的,但问题是,font-size: 100px;在使用不同的字体(font-family)表现的行为是不一样的,所以line-height总是相同或不同的吗?真的是1还是1.2吗?另外vertical-alignline-height的影响又是什么呢?要深入研究CSS的机制可以说没有这么简单......

【转载】CSS书写模式

由于你可能没有那么多的时间,所以我将从结论开篇。你可以使用一个不常见,但是非常重要的CSS属性来使文字垂直显示。除了让文字垂直显示之外,你也可以让图标和入口按钮以这样的方式呈现。我写的CSS让浏览器重新布局文字的方向,使元素的布局在正常流的基础上旋转90度。

【转载】理解 CSS 属性值语法

万维网联盟(W3C) 使用了一套特别的语法来定义 CSS 的属性值,能让所有的 CSS 属性都用。如果你曾看过 CSS 规范,你可能已经见过这套语法了。如果你不知道这些符号以及它们如何工作的话,这套语法可能非常难理解。然而,这值得花时间来学。如果你理解 W3C 是如何定义这些属性值的,你就可以理解 W3C CSS 规范 中任意一个了。

【转载】CSS Grid!

Grid布局来了,Grid布局来了。千真万确,各大浏览器将发布对Grid布局的支持。唔哈哈哈哈~2017年3月,Chrome和Firefox将开始默认支持Grid布局。其中,Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid,所以,谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持,那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。

CSS变量和预处理器变量的差异

变量是CSS预处理器存在的主要原因之一。为某样东西设置变量的能力,比如颜色,在CSS中让变量保持一致,可DRY,并且易于改变是很有用的。出于相同原因,也可以使用原生CSS变量(“CSS自定义属性”)。但有一些重要的差异应该清楚。

CSS条件变量

我将从这里说起: 在W3C标准规范中,使用CSS变量并没有任何条件。我认为这是规范文档中的一个很大的缺陷,CSS变量已经实现了很多我们之前无法实现的功能,并且我们未来可能大量使用,缺失文档描述着实让人沮丧。但是如果现在我们需要这些对CSS变量的描述怎么办?好,借助其他的CSS知识,我们可以在一些实例中略窥一二。

你真的了解background-position

background属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-clipbackground-originbackground-size。你可能会说,这些属性再简单不过了,没有可讲的。这篇文章接下来要介绍的不是所有有关于background里面的属性,而是说说background-position属性。在详细介绍background-position之前,先要问大家,你真的了解这个属性吗?言外之意,接下来介绍是你所不了解的background-position相关细节。

【转载】CSS技巧-rgba函数的妙用

新出现的 CSS 颜色配置函数是一项非常有意思的功能,它给予我们在浏览器中直接操纵颜色的能力。例如,当鼠标悬停在按钮上时,可以使用color: color(black darkness(50%))改变颜色,而不需要使用 Sass 这类 CSS 预处理器。

如何在限宽的容器中实现全屏效果

在Web布局中,特别是在PC端中,常常可以看到这样的设计风格:内容居中,然后Banner区全屏。这也就是标题所说的效果,限宽的容器中实现全屏效果。那么问题来了,在实际中如何实现在限宽的容器中实现全屏效果。那么实际开发中以什么方式来做更为方便灵活呢?这就是这篇文章需要介绍的内容。

CSS新特性

前段时间有个关于CSS的话题“既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢”?其实这样的话题一直都存在。不过这里我要说的不是能不能写好CSS,我想和大家一起分享几个CSS的新特性。这个也是上周在天津在线回声公司分享的一个话题。整理一下有关于PPT中的内容,希望对大家有所帮助。

页面

返回顶部