Day6

 一、BFC：

  BFC(Block formatting context)直译为"块级格式化上下?文"。它是?一个独?立的渲染区域，只有Block-level box参
  
  与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
 
BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。

即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器?里?面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

  注：overflow：hidden（可以触发BFC环境）

  1.独立区域

  2.需要触发


  二、IFC：

 IFC(inline formatting context),即行内格式化上下文，与之对应的是BFC(block formating context),块格式化上下文。


 思路：创建一个IFC的环境，让行框的高度是包含块的?高度的100%，让行框内部的元素使用vertical-align：middle，就可以实
现垂直居中。因此，我们可以在行框中插入一个高度100%的inline-block元素，把整个行框撑高直到包含块的100%。

  IFC；行内元素；行内格式化上下文

  1.不需要触发
  2.可以转换成BFC环境，行内元素加<div>

  三、CSS3边框

  属性：

  border-image   设置所有 border-image-* 属性的简写属性。 3 
  border-radius  设置所有四个 border-*-radius 属性的简写属性。 3 
  box-shadow     向方框添加一个或多个阴影 

  四、CSS 2D转换
  
 属性：
 
 translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 
 translateX(n)  定义 2D 转换，沿着 X 轴移动元素。 
 translateY(n)  定义 2D 转换，沿着 Y 轴移动元素。 
  
 3D转换

 属性：

 translate3d(x,y,z)   定义 3D 转化。 
 translateX(x)        定义 3D 转化，仅使用用于 X 轴的值。 
 translateY(y)        定义 3D 转化，仅使用用于 Y 轴的值。 
 translateZ(z)        定义 3D 转化，仅使用用于 Z 轴的值。 

 

转载于:https://www.cnblogs.com/qinhaifeng/p/5879719.html