好程序员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属性
绝对定位-偏移参考基准
无已定位祖先元素，以为偏移参考基准
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参考基准
绝对定位-未设置偏移量
无论是否存在已定位的祖先元素，都保持在元素初始位置
脱离了标准文档流
绝对定位-常见问题
没有设置宽度时，元素的宽度根据内容进行调节
左右布局时，柱子层的高度，一定要大于绝对定位元素的高度