css2

text-shadow: rgb(99, 36, 35) 2px 2px 10px;

overflow 与 BFC

overflow触发BFC auto,scroll,hidden
BFC block formatting context 内部变化不影响外部

如果 overflow-x     overflow-y  相等，则等同于overflow
如果值不同，其中一个是visible ,另外一个是hidden,scroll.auto,则前一个会被重置为auto

#宽度滚动条设定机制
.box{
  width:400px;
  height:100px;
  overflow:auto;
}
.content{
  width:100%;
  height:200px;
  backgroud-color:##f5f5f5;
}

ie7会出现横向滚动条（ie7会把竖直的滚动条宽度也计算了 删除宽度100%就可以解决了），ie8不会


overflow:visible;去除ie7按钮文件越长，两侧空白越大的问题


滚动条来自于html，不是body

去除默认滚动条
html{overflow:hidden;}


滚动高度计算：
var height = document.documentElement.scrollTop || document.body.scrollTop


overflow padding-bottom 会缺失在chrome下


ie9+支持
.container{
  padding-left:calc(100vw-100%);100vw 浏览器宽度
}
ie7 、8 
overflow-y:scroll;

overflow触发BFC auto,scroll,hidden

清除浮动影响 父元素不会高度塌陷（ie6不支持）

.clearfix{overflow:hidden;_zoom:1;} #ie6不支持
---最佳方案
.clearfix{*zoom:1;}
.clearfix:after{content:'';display:table;clear:both;}

避免margin穿透 （内部 margin背景显示） 边框，padding margin bfc化

两栏自适应布局

### BFC两栏自适应布局
1. 左浮动，右普通  （文字环绕）
.left{float:left;width:128px;margin-right:22px;}
.right{min-heght:190px;background-color:#beceeb;}

2.左浮动，右margin-left  padding-left
.right{min-heght:190px;margin-left:150px;background-color:#beceeb;}
在加上clear:both;会因为float的块的破坏性，right会在下一行显示

3. 左浮动，右overflow
.right{min-heght:190px;overflow:hidden;background-color:#beceeb;}

两栏自适应布局
.cell{
  display:table-cell;width:20000px; //ie8+ bfc特性
  *display:inline-block;*width:auto; //ie7-  block标签元素
}


---\
overflow:hidden; 自适应，但溢出不可见
float  包裹性+破坏性 无法自适应，块装浮动布局
position:absolute  脱离文档流
display:inline-block 包裹性 无法自适应  ie67水平不相识（无包裹）
display:table-cell 包裹性，无溢出，绝对宽度也能自适应

overflow与absolute

隐藏（剪裁）失效与滚动失效(固定)

#剪裁失效
overflow：hidden 在图片比较大(absolute)与父容器 中间时，剪裁会失效

#滚动失效
overflow：auto 在图片比较大(absolute)与父容器 中间时，滚动会失效

#原因
absolute不是总是父级overflow属性影响，
特别当overflow在absolute元素及包含块(含块position:relative/absolute/fixed声明的父级元素或body)之间的时候

#避免方法
overflow元素自身为包含块、子元素为包含块、任意合法transform子元素声明

overflow与resize

.content{
  resize:both;
  overflow:hidden;
}

textarea{
  overflow:auto; //天生就有的
}

text-overflow:ellipsis 文字溢出省略号表示


# 按钮文字省略号
white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

overflow 与锚点

# 容器可滚动 定位元素在容器内
.box{
  overflow:hidden;
}