接续

我回翻了一下之前的几篇文章,发现在 margin系列之布局篇 中还有些问题没说完,所以准备补全一下。

不过这2篇文章的时间的跨度有点,在阅读本文之前,大家可以先翻读一下3年前的那篇文章。

没填完的坑

margin系列之布局篇 一文结尾时,我们谈到了圣杯布局,说这个布局的实现本身存在了一些问题:“在IE6/7下报废,不过不用慌,因为它可被修复”。

我一直以为写完了,然而今天看了下发现还有坑没填。所以本文会讲讲这些问题是什么以及如何修复。

阅读全文 »

前言

上次和大家聊过 background系列之你不知道的background-position,向大家展示了里面的一些小细节和未被发掘出来的特征。应该说 background 是一个很有意思的东西,不仅实际使用的频度超高,而且处处充满着好玩的妙趣。

老需求

这里并不打算和大家聊所谓的最佳实践,更多的是希望可以通过一些示例激起大家更深层次的思考和探索欲。

阅读全文 »

这是一个有趣的话题

其实我并不确切的平时大家是怎么去应用或者玩转一个属性,一个值。我能肯定的是这些东西都有不少的可玩性。

我今天要聊的 background-position 应该已经被大家玩得色彩斑斓了。尤其是 CSS Sprites 流行的这些年,background-position 基本上是被应用最多的属性之一。

重拾旧趣

我们知道 background-position 是用来指定背景图像的偏移值的,能让一张图从特定的位置开始展现。而 CSS Sprites 就是通过将多个小图拼接成一张大图,然后利用 background-position 来指定需要显示的区域,以此达到合并HTTP请求的预期。

阅读全文 »

前言

移动前端第一弹:viewport详解中,我们讲了viewport,那是一个关于meta的故事。这次我们会就将meta这个故事讲得更广阔、更有意思一些。

写过HTML的童鞋,应该都对这个不陌生,或用它来定义页面编码,或用它来定义搜索引擎抓取方式,或用它定义页面关键字,描述等等。

meta列表

好的meta使用,能更好地提高页面的可用性及被检索的几率。

这里并不会列出所有的meta使用方式,只挑选一些常用及实际意义比较大的讲讲,当然也包括一些厂商私有定制的。

阅读全文 »

前言

这次想聊聊移动开发相关的事。是的,你没有看错,一句话就可以开始你的移动前端开发。

你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界。

但其实它一点也不新奇,不复杂。

viewport简介

没错,就是viewport特性,一个移动专属的Meta值,用于定义视口的各种行为。

该特性最先由Apple引入,用于解决移动端的页面展示问题,后续被越来越多的厂商跟进。

举个简单的例子来讲为什么会需要它:

我们知道用户大规模使用手机等移动设备来进行网页浏览器,其实得益于智能手持设备的兴起,也就是近几年的事。(还记得不久前的几年,满大街都还是诺基亚的天下么?)

这时有一个很现实的问题摆在了厂商面前,用户并不能很好地通过手机等设备访问网页,因为屏幕太小。

阅读全文 »

什么是BFC

首先,你可能需要简单的了解一下什么是 BFC

W3C在视觉格式化模型中描述了一个 Block formatting contexts 的概念,大致的说法如下:

浮动和绝对定位元素,非块盒的块容器(诸如:inline-blocks, table-cells 和 table-captions),以及 overflow 值不为 visiable(除非该值已经延伸到视口上) 的块盒,都会为他们的内容创建新的块格式化上下文。

在一个块格式化上下文里,盒子从包含块顶部开始一个接一个的纵向排列。两个相邻兄弟盒子之间的垂直的间隙取决于 margin 定义。块级盒纵向相邻(水平书写格式下)的 margins 会在同一个块格式化上下文中折叠合并(取最大值)。

在一个块格式化上下文里,每个盒子的左外边界会触碰到包含块的左边界(如果是从右到左的书写格式,则为右边界),即使同时存在浮动元素也是如此(虽然盒子的行框集可能会由于浮动的存在而缩小),除非这个盒子创建了一个新的块格式化上下文(在这种情况下,盒子本身由于浮动可能会变得更窄)。

这其实就是对于 BFC 的描述,也即大家常说的块格式化上下文,所以 BFC 没什么神秘的,只是 Block formatting contexts 的首字母缩写。

题外话:一个简单的概念,被各种 名词再造,不知道在什么时候突然成为了一个高大上的东西。以下省略2个字:讨厌。

为了方便理解,也为了符合大家的认知习惯,这个概念在下面都以 BFC 来代替。

阅读全文 »

先进一个题外话

在面试一个 重构(各大公司的叫法可能不太一样)时,我喜欢从一个点开始问,然后一直延展下去成为一条线,甚至是一个面,直到问到不会的地方,然后又换另外一个点。

例如:我可能会说,能简单聊聊 行内级元素块级元素 的区别吗。

一般这时,候选人都会说到 行内级元素 不会换新行,而 块级元素 会格式化为块状,即换行。但也有些遗憾的方面(如:混淆了块元素和块级元素,行内元素和行内级元素),当然这看起来似乎不是特别重要。

这时我会继续问,行内元素 能够定义宽度和高度吗?

不少候选人会说:不能

我会继续问,说几个你熟悉的 行内元素

于是 span, strong, em, ins… 答案我还是比较满意的。

我仍然会继续,img 是行内元素么?

候选人这时通常会迟疑一下,可能意识到我接下来想问啥了,但还是会回答:

阅读全文 »

在聊这个话题之前,我们可能得先简单说说 视觉格式化模型 这个概念。

视觉格式化模型 的全称是 Visual formatting model,它被用来描述用户代理(比如浏览器)在图形媒体下如何处理文档树。

视觉格式化模型 中,每个文档树的元素会根据框模型产生零到多个框(boxes)。这些框的布局取决于框的尺寸,类型,定位方式(正常流,浮动和绝对定位),元素之间的关系和外部信息(例如:视口 ① 大小,置换元素的固有尺寸等等)。

举个最简单的例子来讲,假设一个页面上有2个div,那么第2个div的位置会取决第1个div的高度定义;假设更复杂一点,第1个div是浮动的,那么第2个div的位置还要取决于第1个div的宽度。

不同类型的框

CSS 中,可能会产生不同类型的框,框的类型取决于 display 属性的设定。某种程度上,框的类型会影响其在视觉格式化模型中的表现。接下来会详细的聊聊这些不同类型的框以及它们在视觉可视化模型中的表现。

在说这个之前,我们先回忆一下,大家常说的一些名词:

阅读全文 »

z-index的重要性

在我看来,z-index 给了我们日常工作中以极大的帮助,我们用它来定义元素的层叠级别(stack level)。受益于它,你能做Popup, DropDown, Tips, 图文替换等等。

在开始本篇之前,或许我们要先了解一下关于z-index的基本信息。

W3C这样描述

每个元素都具有三维空间位置,除了水平和垂直位置外,还能在 “Z轴” 上层层相叠、排列。元素在 “Z轴” 方向上的呈现顺序,由层叠上下文和层叠级别决定。

在文档中,每个元素仅属于一个层叠上下文。元素的层叠级别为整型,它描述了在相同层叠上下文中元素在 “Z轴” 上的呈现顺序。

同一层叠上下文中,层叠级别大的显示在上,层叠级别小的显示在下,相同层叠级别时,遵循后来居上的原则,即其在HTML文档中的顺序。

不同层叠上下文中,元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序,与自身的层叠级别无关。

阅读全文 »

前端工程师对CSS的基本诉求

布局能力或许是Web前端工程师对CSS的最基本的诉求,当开始进入到这个岗位,就避免不了要和CSS打交道,而和CSS交往,布局当然是不可或缺的。

很遗憾的是,CSS2.1之前都没有出现真正意义上的布局属性,直至现如今的CSS3,才开始出现了一些,如:flex, grid 等,不过其兼容性及国内浏览器的使用情况,真令人捉急。

不过,有需求就会有变通,对于达成布局目的,已衍生出各式各样的方法,如:float, inline-block, table, absolute 等等。

阅读全文 »