CSS

[ChesterBu]

CSS

1.引入

  1.内联式
  2.style标签
  3.link标签
  4.import    // 在css文件中@import url('文件名')

2.权重

    元素, 伪元素:  (0,0,0,1) 
    类, 伪类, 属性:  (0,0,1,0) 
    ID: (0,1,0,0) 
    内联样式:  (1,0,0,0)
    //注：继承的权值最低，可算作0.1
           ！import 最高。大于内联但一般不用；

3.BFC

一、什么是BFC(block formatting context)：

• 简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。** 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
  在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）

二、 形成 BFC 的条件：

1. 浮动元素，float 除 none 以外的值；
2. 绝对定位元素，position（absolute，fixed）；
3. display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
4. overflow 除了 visible 以外的值（hidden，auto，scroll）；

三、BFC布局规则

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

四、BFC常见作用

1. 包含浮动元素 问题案例：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。 

2. 不被浮动元素覆盖 问题案例： div浮动兄弟遮盖问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden，触发bfc来解决遮挡问题。 

3. BFC 会阻止外边距折叠** 问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。 

详见
http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html