最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了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(不浮动)
- 元素会左移、或右移、直到碰到容器为止
- 虽然脱离了标准文档流,但情况有些特殊,详情见CSS基础知识之float
清除浮动的常用方法
- clear属性,常用clear:both;(当父包含块缩成一条时无效)
- 同时设置width:100%(或固定宽度)+overflow:hidden;
相对定位
- 相对于自身原有位置进行偏移
- 仍处于标准文档流中
- 随即拥有偏移属性和z-index属性
绝对定位
- 建立了以包含块为基准的定位
- 完全脱离了标准文档流
- 随即拥有偏移属性和z-index属性
绝对定位-偏移参考基准
- 未设置偏移量时,无论是否存在已定位的祖先元素,都保持在元素初始位置
- 已设置偏移量时,无已定位祖先元素,以<html>为偏移参考基准
- 已设置偏移量时,有已定位祖先元素,以距其最近的已定位祖先元素为偏移参考基准
绝对定位-常见问题
- 没有设置宽度时,元素的宽度根据内容进行调节
- 左右布局时,柱子层的高度,一定要大于绝对定位元素的高度
固定定位(也属于绝对定位)
- 位置固定,不会随滚动条变化
- 被他遮盖的元素,可以从其下层穿过
固定定位-偏移参考基准
- 未设置偏移量时,无已定位祖先元素,以浏览器窗口为基准定位
- 未设置偏移量时,有已定位祖先元素,以祖先元素为基准定位
- 已设置偏移量时,无论是否存在已定位的祖先元素,均以浏览器窗口为基准定位