浮动和定位

一、浮动

http://vrg123.com/

文档流：网页中元素排列顺序。
标准文档流（默认）：从上到下，从左到右
浮动流：
左浮动：从左到右，从上到下；右浮动：从右到左，从上到下

浮动原理：
1、浮动元素将脱离标准文档流，浮动元素后面的标准元素会依次向上填充
2、浮动元素不会遮挡行内元素
3、浮动元素变成行内块级元素，内容有多宽它就有多宽
4、不允许浮动元素覆盖文字

浮动带来的问题：父盒子塌陷

如何解决父盒子塌陷（扩展盒子高度/清除浮动的影响）：
1、设置父盒子高度
2、使用overflow：visible | hidden | scroll属性来清除浮动（绝对定位不生效）；值为默认值visible时，是没有清除浮动的作用的。
3、clear：left | right | both
4、让父元素与子元素一起浮动（不推荐）
5、使用after伪类（clear属性）

overflow与clear在清除浮动时的区别：

• overflow属性添加在父级上，绝对定位时不能实现清除浮动
• clear属性：应用在浮动元素后面，clear添加一个新的标签

省略号：
 div{
            border: 1px solid red;
            height: 24px;
            width: 150px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        /*    妙用：扩展盒子的高度， visible: 不生效*/
        }

伪类选择器：
伪类：相当于一个类
伪元素：相当于一个元素

a标签的四个伪类：
link：未点击
visited：已点击
hover：悬停
active：激活状态
注：hover，active：是所有元素都有的伪类。

盒子的计算方式：

• 盒子总尺寸 = 内容+内边距+外边距

• 标准模式：设置的宽高+padding+border+margin

• 怪异模式：设置的宽高+margin

  http://bugshouji.com/bbs-read-run?tid=86

 指定计算方式：
	 box-sizing: border-box;
设置这个属性可以解决给盒子设置border、padding后盒子变大问题。

二、定位

position:
	static:没有定位（默认）
	relative:相对定位
	absolute:绝对定位
	fixed:固定定位

相对定位原理：
不论是标准元素还是浮动元素，相对于它没有定位前的位置进行偏移。

绝对定位原理：
会脱离标准文档流，变成行内块级元素。如果有已经定位的祖先元素，以最近的祖先元素为准；没有定位的祖先元素，以页面可视内容为准进行设置。

固定定位原理：
会脱离标准文档流，变成行内块级元素。相对于浏览器窗口进行设置

z-index:值;
作用：指定层叠顺序，值越大，优先级越高。
值：-1~999
默认值：auto（如果父元素有z-index，就和父元素一样，不然就为零）
注：z-index要和position一起使用。否则无效

透明度：

opacity:0-1，越小越透明
过滤器：
filter:alpha(opacity=x):0-100；
值越小越透明

word-break:默认单词不换行
display:
none:隐藏
inline:行内
block:块级
inline-block:行内块级