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

 

　　绝对定位 - 偏移参考基准

 

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

 

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

 

　　绝对定位 - 未设置偏移量

 

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

 

　　脱离了标准文档流

 

　　绝对定位 - 常见问题

 

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

 

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