CSS定位总结
CSS常用布局方式
1、标准流（普通流）
即按照块级元素和行级元素及其他自己的布局方式上下布局，左右布局，在文档中都占有自己的位置，不脱标。
2、浮动
语法：
选择器 { float: 属性值; }
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
浮动特性：
1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置）。
2、浮动的元素会一行内显示并且元素顶部对齐。
注意：
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3、浮动的元素会具有行内块元素的特性：
浮动元素的大小根据内容来决定
浮动的盒子中间是没有缝隙的
3、定位
3.1、定位组成
定位 = 定位模式 + 边偏移
定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
3.2、边偏移
边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。
3.3、定位模式 (position)
选择器 {
position: 属性值;
}
定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：
3.3.1、静态定位(static)
- **静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。
- 语法：
选择器 {
position: static;
}
-
静态定位 按照标准流特性摆放位置，它没有边偏移。
-
静态定位在布局时我们几乎不用的
3.3.2、相对定位(relative)
相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的。
- 语法：
选择器 {
position: relative;
}
-
相对定位的特点：（务必记住）
-
1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
-
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。
-
3.3.3、绝对定位(absolute)
- 绝对定位是元素在移动位置的时候，是相对于它父亲/祖先元素来说的
-
- 语法：
选择器 {
position: absolute;
}
绝对定位特性：
-
完全脱标 —— 完全不占位置；
-
父元素没有定位，则以浏览器为准定位。
-
父元素要有定位，元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
3.3.4、固定定位(fixed)
- 固定定位是元素固定于浏览器可视区的位置。 同绝对定位一样也脱标， 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。
-
- 语法：
选择器 {
position: fixed;
}
-
固定定位的特点：（务必记住）：
1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位不在占有原先的位置，即脱标。
固定定位小技巧：固定板心右侧位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.fu{
width: 400px;
height: 800px;
margin: 20px auto;
background-color: pink;
}
.fix{
width: 40px;
height: 80px;
position: fixed;
left: 50%;
margin-left: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fix"></div>
<div class="fu"></div>
</body>
</html>
提示：IE 6 等低版本浏览器不支持固定定位。
3.3.5、粘性定位(sticky)
- 粘性定位可以被认为是相对定位和固定定位的混合。
-
-
- 语法：
-
选择器 {
position: sticky;
top:100px;//即页面下拉100px后该元素固定，不在下拉
}
- 粘性定位的特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。 兼容性较差，IE 不支持。
定位总结
-
一定记住 相对定位、固定定位、绝对定位 两个大的特点：
-
- 是否占有位置（脱标否）
-
- 以谁为基准点移动位置。
-
注意：
- 边偏移需要和定位模式联合使用，单独使用无效；
top和bottom不要同时使用；left和right不要同时使用。
扫一扫
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
