CSS

如何理解CSS的display属性

在布局中,display属性是最重要的CSS属性之一。其最常见的属性值有block,inline,none,table以及inline-block。最近的新宠为flex,因为它是专门为布局创建的display属性。新出现的grid(最近仍比较活跃)是另外一个指定的布局属性,其很快就会广泛被使用。这篇文章比我预期的要长很多,你可以选择性进行阅读,但是我更希望你可以静下心来阅读整篇文章。

关于BEM中常见的十个问题以及如何避免

不管你是刚刚才接触BEM还是已经是一名老手,对于它的思想你是不是都十分的赞美?如果你还没有接触过BEM,在阅读这篇文章之前我建议你先到BEM官方网站进行了解,因为我将对其进行分类表述我对这种CSS理念的观点。

基于视窗单位的排版

我之前有写过基于remem响应式排版,并且也有写过两篇有关模块化组件的博客。在这些文章中,有关视窗单位的评论不可避免的形成了一个话题。

媒体查询--PX,EM or REM?

你是否思考过对于媒体查询你应该使用px,em还是rem?我也产生过同样的问题,并且目前为止,我还是没有明确的答案。一年之前,我第一次创建 mappy-breakpoint 仓库时,我一直使用rem单位。之后一次和Sam Richard谈话之后,我开始转向使用em,因为我并没有发现两者之间的区别。关于媒体查询,除了emrem,常用单位还有像素。自从现在所有浏览器存在像素缩放问题,我想知道像素是否还可以用于媒体查询。这周,我打算弄明白两者之间的区别。

CSS属性:background-size

background-size属性用于指定背景图像的大小。背景图像可以被设置为覆盖该元素的整个背景区域,或者被设置为由CSS作者所定义的明确的尺寸大小。可以使用 cover 关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用contain关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例,那么该图像的高度和宽度的固有比率将被保留。

未来CSS文件加载方式

Chrome打算改变<link rel="stylesheet">的加载方式,当link出现在<body>中时,就变得非常明显了。在blink-dev的文章中,它的影响和性能尚不明确,所以我想在这里深入讲讲。

Meta 标签与搜索引擎优化

当谈及到<meta>标签对搜索引擎排名的影响,很多人都存在误解。在过去,许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用,哪些没有呢?

z-index的工作原理

可能并不是那么显而易见,但是HTML文档中的元素却是存在于三个维度之中。除了大家熟知的平面画布中的x轴和y轴,还有控制第三维度的z轴。

什么鬼,又不知道怎么命名class了

相信写css的人都会遇到下面的问题:糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点...;而改别人css代码的时候则会一直有个疑问:这个class到底是只在这个地方用了,还是其他地方都用了?

css设计中的不变与可变

“人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》。如果重构分里子与面子的话,那么html应该是负责里子的,而css就是负责面子了。在上篇html结构的拆与合说了html之后,我们继续来说下css,这次我们从可变与不变的角度分析。

 

页面

返回顶部