CSS面试必问（二）定位，浮动，盒模型

定位基本概念

定位就意味着脱离文档流
static定位，正常文档流，不定位
fix定位，相对于浏览器窗口（视图本身），不随上下滑动内容而改变其位置
relative定位，相对于static进行上下左右调整，是正常文档流中的偏移位置
absolute定位，其位置相对于最近的具有定位的父类元素的相对位置

消除浮动的方法

浮动的定义

浮动是不脱离文档流的，但脱离左右相邻元素

消除浮动的原因是：发生在父子元素时，子元素浮动了，导致父元素高度为0了，因为父元素是没有任何内容的，仅仅承载子元素。

推荐方法：父元素添加伪元素清除浮动，缺点较少

.father:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

盒模型

组成部分：content，padding，border，margin

标准盒模型和怪异盒模型

标准盒模型（默认值）width/height=content，设置：box-sizing:content-box
IE盒模型width/height=content+padding+border设置：box-sizing:border-box

注意：盒子大小永远是content+padding+border，但宽高不是

设置margin值的顺序

1四周
2（上下）（左右）
3上（左右）下
4上右下左

溢出处理

我一般常用的是overflow:hidden和overflow:scroll，前者是隐藏不显示，后者是出现滚动条