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

　　绝对定位 - 偏移参考基准

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

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

　　绝对定位 - 未设置偏移量

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

　　脱离了标准文档流

　　绝对定位 - 常见问题

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

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