CSS 布局小技巧

calc()   css  的函数，动态计算长度值---  左右都需要留空！！！

BFC --   块级格式上下文

1. 独立区域，与外界互不干扰
2. 内部 margin  垂直方向重叠
3. 内部 float  块计算高度
4. 办法：
   1. position: absolute;  fixed
   2. overflow:  hidden;
   3. display: inline-block;  table-cell;  flex ;  inline-flex; 

div 居中 - -

1. flex 流布局  
2. 外层  table；  内层  display: table-cell; vertical-align: middle; text-align: center;  这个实际上是内容的居中。有点欠缺
3. :after 伪元素   提供一个占位符
   1. 父元素   text-align: center;
   2. :after   content: ''; width: 0; height: 100%; display: inline-block; vertical-align: middle;
   3. 子元素   display: inline-block;  vertical-align: middle;
4. 子元素  postion absolute 的方法。  不过好像  transform:  translate( calc( -50%+0.5px))   兼容性不太OK；

两栏布局 - -

左侧固定，右侧自适应宽度

1. flex  布局。 一个给定固定的 width;  一个给定  flex: 1; 表示占据了剩余的空间
2. table  布局，  利用的也是  table  自动填充内容；   都  display: table-cell;   一个给  width;   另一个自动填充满
3. position   给左侧  position absolute   width  left  top  ;  右侧直接   margin-left: 200px; 自动填充满
4. float   布局；  全部给定   float: left;  一个给 width;   另一个   width:  calc( 100% - 200px)   即可
5. float  布局； 左边给  float: left;   右边给  overflow: hidden;   BFC  块级格式上下文，和外部 float 块互不影响，不重叠

　　

三栏布局 - -

1. 万年不变的  flex
2. table  table-cell  灵活填充  自适应宽度的不用设定宽度
3. position  absolute   谁自适应，谁不用给  position 。但是需要设定   margin-left   margin-right;  左右两侧 absolute 的也需要  top  left bottom 的设定
4. 浮动； 全浮动； 中间的给 width:  calc( 100% - 200px  - 200px ) ;

 

....