传统布局的那些事

传统布局

💡首先我们来链接一下css的三种定位机制分别是普通流，浮动，定位

普通流

根据html的相对的编写顺序决定了元素的顺序，也就是元素与元素之间按照顺序来排列。也可也理解为文档流

浮动

浮动最典型的应用就是将多个块级元素横向排列。

而之前将的行内块的设置会使元素之间有空隙。

1. 设置浮动 设置了浮动的元素会脱离普通流的控制，且不占用以前的位置 而浮动即是创建一个浮动框，将其移动到一边，直到一边出现另一个浮动框，大家利用理解为平行世界，或者平面内的上下两个层级。

div{
  float:left;
  float:right;
}
复制代码

如果当父级元素装不下这些浮动盒子时多出的盒子会另起一行进行对齐 2. 清除浮动 那么我们为什么要清除浮动呢？ 因为有时候浮动元素不占用原文档的位置，会对后面的元素排版产生影响

.clearfix::after{
  clear: both;
}
复制代码

注意👀:加了浮动的元素会具有浮动特性:

1. 浮动元素会脱离普通流脱离普通流的控制，移动到指定位置，且浮动的盒子不再保留原来的位置，后面的普通流元素会顶上其位置。
   
2. 浮动的元素会一行内显示并且元素顶部对齐
   
3. 浮动的元素具有行内块的特性
   

定位

定位的应用范围很广，当我们想让元素自由地在盒子内移动位置或者固定在屏幕的某个位置上，那么我们就可以使用定位来实现，简单理解就是你想让盒子在哪用定位就可以让他定在哪里。

定位=定位模式+偏移量

下面我们来一一介绍😁

定位模式

1. 静态定位
   默认定位，随着普通流来摆放位置

div{
  position:static;
}
复制代码

2. 相对定位

div{
  position:relative;
   /*元素以自我为基准进行定位，通过偏移移动至原来的位置上，也就是以自身为参照点*/
  /* 元素框偏移某个距离，元素仍保持未定位前的形状，它原本所占的空间仍保留 */
}
复制代码

3. 绝对定位

• 其在偏移的时候是按照父元素及祖先元素来定位的，如果他没有父级元素，那么他就根据浏览器来进行偏移也就是document。
• 当祖先元素有定位的时候，那么就会以最近一级的有定位上级元素为参考来进行偏移
• 当元素设置了绝对定位的时候会从普通流中消失。

div{
  position:absolute;
  left:100px;
  top:100px;11
}
复制代码

4. 固定定位

• 以浏览器可以看见的窗口看进行定位
• 当然他也是脱离普通流的。

div{
  position:fixed;
  /* 不随滚动条移动，完全不占位置 */
}
复制代码

ヾ(≧▽≦*)o记住子绝父相就可以啦~

边偏移

偏移量也就是我们在为盒子定位完之后要给其偏移到正确的位置

1. top

top:100px;
}
复制代码

2. bottom

div{
   bottom:100px;
}
复制代码

3. left/right

div{
   left:100px;
   right:100px;
}