普歌-知希团队-CSS布局浮动和定位的知识点

一.浮动的样子

1.什么是浮动？

float属性用于创造浮动框，将其移动到一边，知道左边缘或者右边缘触包含块或另一个浮动框的边缘。
语法： 选择器{ float ：属性值；}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

2.浮动的特性

• 浮动的盒子不在保留原先的位置
• 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
• 浮动元素具有 行内块元素的特征（如果浮动非替换元素，则## 标题要指定一个明确的宽度；否则，它们会尽可能地窄）

例如：

二.定位的样子

1.为什么需要定位？

1. .浮动可以让多个块级元素一行没有缝隙显示，经常用于横向排列盒子。
2. 定位则可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。

2.定位组成

定位：将盒子定在某个位置，所以定位也是摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移

（1）定位模式

定位模式决定元素定位方式，它通过CSS的position属性来设置吗，其值可以分为四种：

值	语义
static	静态定位
relative	相对定位
absolut	绝对定位
fixed	固定定位

（2）边偏移

边偏移就是定位的盒子移动到最终位置。

边偏移属性	示例	描述
top	top：80px	顶端偏移量，定义元素相对其父元素上边线的距离
bottom	bottom：80px	底端偏移量，定义元素相对其父元素下边线的距离
left	left：80px	左侧偏移量，定义元素相对其父元素左边线的距离
right	right：80px	右侧偏移量，定义元素相对其父元素右边线的距离

3.相对定位（relative）

相对定位是元素在移动位置的时候，是相对它原来的位置来说的（自恋型）。
语法：选择器{ position ：relative；}

特点：

1. 移动位置的时候参照自己原来的位置
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待。相对定位并没有脱标。它最典型的应用给绝对定位当爹。

4.绝对定位（absolute）

绝对定位是元素在移动位置的时候，是相对它祖先元素来说的（拼爹型）。
语法： 选择器{ position ：absolute；}

特点：

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的定位祖先元素为参考移动位置。
• 绝对定位不在具有原先的位置。（脱标）

5. 子绝父相的由来

这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常见的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

应用场景：

6.固定定位（fixed）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法： 选择器{position: fixed; }

应用场景：

喜欢我就点个赞，点关注不迷路！( ^▽ ^ )
作者：平凡的人。
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。