本文深入探讨CSS定位机制，包括普通流、浮动和定位模型。介绍了浮动如何让元素在一行内展示，以及清除浮动的方法。接着详细讲解了相对定位、绝对定位、固定定位和磁贴定位的原理和应用场景，帮助理解CSS布局的本质。
写在前面
- CSS定位机制
- 普通流（标准流）
- 浮动
- 定位模型
一、CSS定位机制
1、普通流（标准流）
普通流（标准流）：默认，元素自动从上往下，从左往右的排列。
2 、浮动
（1）浮动：实现块级元素在一行内展示。
（2）浮动规则
- 元素向左 / 右移动
- 浮动元素脱离标准流
- 浮动元素碰到包含框或另一个浮动框，浮动停止
- 浮动元素之后的元素将围绕它，之前的不受影响
（3）浮动的基本语法：position:left（靠左）、position:right（靠右）、position：center（无）
（4）浮动溢出：元素使用浮动后会脱离普通流，出现“浮动溢出“
（5）清除浮动（闭合浮动）：
- 语法：
clear:none（默认) | left | right | both - 常用方法：
- 使用空元素。例如
<div class = "clear"></div> - 给浮动元素的父元素添加
overflow:hidden - 使用after伪元素
- 使用空元素。例如
3、定位模型
（1）static：静态定位（默认）
- 元素位于普通流中，元素自动从上往下，从左往右的排列。
（2）relative：相对定位
- 相对的是它自己原来的位置进行偏移，不会离开普通流
- 使元素成为可定位的祖先元素，绝对定位的后代可以相对于该元素进行绝对定位
- z-index：控制元素层叠顺序
（3）absolute：绝对定位
- 使元素脱离普通流
- 根据最近定位祖先元素来定位，如果没有，则为
<body> - z-index：控制元素层叠顺序
（4）fixed：固定定位模型
- 与绝对定位absolute类似
- 固定定位元素不会随着视口滚动而滚动
（5）sticky：磁贴定位
- 结合相对定位relative和固定定位fixed的特点
- 不脱离常规流
- 如果最近祖先元素有滚动，则它相对最近祖先元素进行偏移，否则相对于视口进行偏移
扫一扫
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
