好程序员web前端培训之CSS基础知识之position

　　CSS定位机制

　　标准文档流(Normal flow)

　　浮动定位(Floats)

　　绝对定位(Absolute positioning)

　　标准文档流

　　从上到下，从左到右，输出文档内容

　　由块级元素和行级元素组成

　　块级元素

　　从左到右撑满页面，独占一行

　　触碰到页面边缘时，会自动换行

　　常见的标签有：div、ul、li、di、dt、p

　　行级元素

　　能在同一行内显示

　　不会改变HTML文档结构

　　常见的标签有：input、span、label、strong、img

　　盒子模型

　　边框(border)

　　外边距(margin)

　　内边距(padding)

　　盒子中的内容(content)

　　盒子模型尺寸=边框+外边距+内边距+盒子中内容的尺寸

　　盒子3D模型

　　第一层：border

　　第二层：content + padding

　　第三层：background-image

　　第四层：background-color

　　第五层：margin

　　浮动定位

　　三个属性：left(左浮动)、right(右浮动)、none(不浮动)

　　元素会左移、或右移、直到碰到容器为止

　　仍处于标准文档流中

　　清除浮动的常用方法

　　clear属性，常用clear:both;(当父包含块缩成一条时无效)

　　同时设置width:100%(或固定宽度)+overflow:hidden;

　　相对定位

　　相对于自身原有位置进行偏移

　　仍处于标准文档流中

　　随即拥有偏移属性和z-index属性

　　绝对定位

　　建立了以包含快为基准的定位

　　完全脱离了标准文档流

　　随即拥有偏移属性和z-index属性

　　绝对定位-偏移参考基准

　　无已定位祖先元素，以为偏移参考基准

　　有已定位祖先元素，以距其最近的已定位祖先元素为偏移参考基准

　　绝对定位-未设置偏移量

　　无论是否存在已定位的祖先元素，都保持在元素初始位置

　　脱离了标准文档流

　　绝对定位-常见问题

　　没有设置宽度时，元素的宽度根据内容进行调节

　　左右布局时，柱子层的高度，一定要大于绝对定位元素的高度