CSS 知识小结

CSS 之前虽然经常会有一些修修补补的工作，但是没有系统的想过。这几天把一些基本的东西整体过了一下，做个记录，方便以后再看。

 

1. 盒模型

盒子本身的大小是这样计算的：
Width: width + padding-left + padding-right + border-left + border-right
Height: height + padding-top + padding-bottom + border-top + border-bottom
通过图中我们得知，Width（物理总宽度）/Height（物理总高度），是由width/height,padding,border三者之和来决定的。

Margin是外边距，有人叫补白，不会显示出来。但是会影响相邻元素的相对位置，比如不考虑叠加，新的元素是在该元素的margin-bottom之外绘制的。

有一点要注意：在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。之所以会有两类不同，估计浏览器文档流都是从上到下，从左到右绘制的吧。

 

2. Block和inline元素

HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素，inline元素即是以”行”表现的元素。二者表现的主要差别在于，在页面文档中block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行，设置inline的高度一般没有效果，它不是一个块。
block元素（块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block，像table这种display:table的元素也是block元素。
inline元素（内联元素）大致有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON
其中有类特殊的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

 

3. BFC

BFC是一个独立的布局环境，BFC中的元素的布局是不受外界的影响，在一个BFC中，块与行都会垂直的沿着其父元素的边框排列(例子)，当一个元素触发一个新的BFC，那它就形成了一个块与行都会垂直的沿着其父元素的边框排列布局的小环境。所谓的文档流，就是一个根BFC。

元素如果有以下css设置会触发新的BFC：

float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）
fieldset元素

 

BFC的特性：
1)块级格式化上下文会阻止外边距叠加。当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。

2)块级格式化上下文不会重叠浮动元素。根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题）。

3)块级格式化上下文通常可以包含浮动。W3C中关于BFC auto height的计算是包括了浮动元素的高度的。(例子) W3C

 

通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC仍然属于文档中的普通流。

 

4. Float

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

高度塌陷非我们乐见，怎么清除浮动呢？

无非有两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性；

当浮动元素之后的元素设置clear以闭合相关方向的浮动时，根据w3c规范规定，闭合浮动的元素会在其margin-top以上产生一定的空隙（clearance），该空隙会阻止元素margin-top的折叠，并作为间距存在于元素的margin-top的上方。

清除浮动后的高度(例子)

其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动。父元素设置overflow（除了visible）之后，因为BFC具有包含浮动元素的特点，子元素被包括在父元素里面。

 

这篇文章讲了BFC和浮动，很好。

 -----------------------------------等待继续补充的分割线----------------

 

5. Position

6. Margin

Margin 重叠

Margin 负值

 

 

7. 各种常用布局

7. css的复用