前端html跟css快速复习（好程序员web前端培训之CSS基础知识之position）

　好程序员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属性

绝对定位-偏移参考基准

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

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

绝对定位-未设置偏移量

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

脱离了标准文档流

绝对定位-常见问题

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

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

,