css居中方法汇总

css居中很多时候是一件不那么凭直觉就能完成的任务,并且方法还千奇百怪,而且适用场景各不相同,所以常常让人头疼。找了一篇汇总的文章,在此总结一下,帮助记忆。

水平居中

inline 或 inline-* 元素(文本和链接)?

1
2
3
.center-childern {
text-align: center;
}

可以在块级父元素下使内敛元素居中

Read More

处理缓存响应头与http-equiv的区别

有时候在html的头部会看到这样的meta标签,这些meta标签信息是用来给浏览器当做当前的html文件(?)应该怎样来缓存的依据。

1
2
3
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" /> <!-- 在新的浏览器实现中,pragma:no-cache会被当作cache-control:no-cache处理 -->

那么它与响应头里设置相应的头字段有什么不同?

其实,单对浏览器来说,这两者的效果应该是相同的。不同之处在这两者对CDN等中间代理的影响不同,html中的meta标签的http-equiv属性只影响浏览器,而响应头中的相关属性除了影响浏览器,也可能会影响到这些中间代理处理缓存的方式。

script标签的async属性与defer属性

async不支持IE9以及IE9以下浏览器

defer虽然支持到IE6,但是无法保证script的执行顺序,所以如果要支持IE,目前意义可能不大

对于一些完全和页面逻辑无关的script脚本推荐用这两个属性,如统计代码

目前最优的处理方式应该是把所有必须要用到的script合并成一个文件,这样就无需考虑不同文件请求快慢的问题。

Block Formatting Context要点

直接看css的w3c规范,发现规范中的内容就如枯燥的法律条文一般,虽然每一条都是非常严谨和有用的,但是文章却没有任何侧重性,读起来相当吃力,犹如啃字典一般。于是对于规范中的block formatting context,我在网上找到一篇讲得很有条理性的文章(引文1),总结一下要点如下。

文档里说了什么

bfc如何flow?

bfc的positioning scheme是normal flow,就是说bfc是属于正常文档流的。

如何触发bfc?

css2.1 Section 9.4.1里规定:

  • floats
  • absolutely positioned elements
  • inline-blocks
  • table-cells
  • table-captions
  • elements styled with “overflow”(any value other than “visible”)
  • elements styled with “display” valued “flex”/“inline-flex”(flex boxes)

Read More

javascript中Object初始化的一些概念厘清

javascript中Object的初始化相关概念可能或多或少都有些了解,但是有时候也会有些混淆,我觉得有必要厘清一下

Object的初始化方法有三种:

  • new Object()
  • Object.create()
  • literal notation

用法示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var o = {};
var o = { a: "foo", b: 42, c: {} };

var a = "foo", b = 42, c = {};
var o = { a: a, b: b, c: c };

// getter/setter (ES5)
var o = {
property: function ([parameters]) {},
get property() {},
set property(value) {},
};

// Shorthand property names (ES6)
var a = "foo", b = 42, c = {};
var o = { a, b, c };

// Shorthand method names (ES6)
var o = {
property([parameters]) {},
get property() {},
set property(value) {},
* generator() {}
};

// Computed property names (ES6)
var prop = "foo";
var o = {
[prop]: "hey",
["b" + "ar"]: "there",
};

Read More

css中的Visual Formatting Model

visual formatting model的东西大家在平时使用css的时候也许就一直在接触,只是不知道这些所谓的规则还有一个这样学术的名称罢了。这次我阅读和记忆了一下css2中这部分的内容,用来应对面试中可能会遇到的变态问题~

9 Visual formatting model

介绍

vfm: 关于visual media如何处理document tree的一些规范

vfm模型规定,document tree中的每个元素都会生成零个或多个box(box model中定义的box)。这些box的布局由以下因素决定:

  • box的类型(type)和尺寸(dimension)
  • 定位方式(positioning scheme)(normal flow, float, absolute positioning)
  • document tree中元素之间的关系
  • 外部因素(例如,viewport的尺寸、图片的固有尺寸等)

containing block:
很多box的位置和尺寸是根据这个长方形的被称为containing block的box算出来的。通常我们说,一个box为它的子元素建立了一个containing block;一个box的containing block指的是容纳这个box的父级box。

每个box会根据它的containing block来定位,但并不一定局限在containing block里,有可能overflow。

Read More

【视频】instagram前端架构

pete hunt的演讲,很让我受启发的一个视频,视频中充满干货,需要花时间细细深究。

一些观点:

不是为了单页面而单页面,而是单页面确实能提升用户体验。

以文件来划分各种代码的的做法似乎有些僵化了,应该用模块化的方式。不单单是js代码模块化,css、图片都可以模块化。

css是个很让人头疼的东西,没有context概念,一条css规则就能“污染”全局,而且,一旦污染,还去不掉。所以目前来说,为了适应模块化的思路,css编写应该严格遵循一些规则,理想的做法是css的atomic化。

browserify, requirejs, grunt, gulp都不行,选择天才之作webpack吧。

Read More

FlexBox

flexbox是一个整体的概念,包含了很多新增的css属性。这些属于一部分是作用在所谓的flex容器(flex container)上,另一部分作用在容器中的条目(flex items)上。

flexbox创造了新方向概念:main axis方向和cross axis方向

注意main axis的方向不一定是水平的,但main axis和cross axis保持垂直。

Read More