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