2021-07-14-css浮动和定位课堂笔记

7月14日课堂笔记

1. 浮动（float）

1.1 css布局的三种机制

网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

1. 普通流（标准流）

   • 块级元素会独占一行，从上向下顺序排列；
     • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
   • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
     • 常用元素：span、a、i、em等

2. 浮动

   • 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

3. 定位

   • 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

总结：html当中有一个相当重要的概念，标准流或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。（浮动之后就变成了脱离标准流）

1.2 什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。浮动的目的：让多个块级元素在一行内显示。

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

1.3 浮动特性

特性：浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

1.浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
2.浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
3.元素添加浮动后，元素会具有行内块元素的特性。（但是行内块元素不脱标，但是浮动的元素脱标,并且display为block）元素的大小完全取决于定义的大小或者默认的内容多少，浮动根据元素书写的位置来显示相应的浮动。

float总结

• 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
• 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。（标准流盒子中的内容不会被浮动元素影响）
• 特别注意，首先，浮动是脱标的，会影响下面的标准流元素，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响， 其次，特别注意浮动可以使元素显示模式体现为行内块特性。

2. 清除浮动

2.1清除浮动本质

准确地说，并不是清除浮动，而是清除浮动后造成的影响

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

2.2 清除浮动的方法

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

2.2.1额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如

，或则其他标签br等。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差.

2.2.2 父级元素加overflow属性方法

可以给父级添加： overflow为hidden|auto|scroll 都可以实现,只要不是visible

优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

2.2.3 使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  
     content: "."; //内容添加点
     display: block; //把添加的内容变为块元素
     height: 0; //添加的元素不能高度
     clear: both; //清除浮动
     visibility: hidden;  //把添加的点隐藏
}   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
优点： 符合闭合浮动思想  结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1。

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

• 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

• 浮动带来的问题：

  • 父元素的高度无法被撑开，影响与父元素同级的元素

  • 与浮动元素同级的非浮动元素（内联元素）会跟随其后

  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

• 清除浮动的方式：

  • 父级div定义height
  • 最后一个浮动元素后加空div标签 并添加样式clear:both。
  • 包含浮动元素的父标签添加样式overflow为hidden或auto。
  • 为父级添加伪元素

3. 定位（position）

3.1 元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1.定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

2.边偏移

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

3.2 静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

3.3 相对定位relative(自恋型)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

注意：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱离标准流）

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

3.4 绝对定位absolute (拼爹型)

[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

脱离标准流。display变为block

3.4.1 父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

3.4.2 父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

3.4.3 子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。

首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

但是，在我们网页布局的时候， 最常说的 子绝父相是怎么来的呢？

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

这就是子绝父相的由来。

3.5 定位的扩展

3.5.1 绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50% top50% 父盒子的一半大小。

2. 然后外边距退回自己宽度及高度的一半值就可以了

3.5.2 固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

温馨提示：

ie6等低版本浏览器不支持固定定位。

3.6.3 叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2;

注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

CSS定位属性主要区别

现在，让我们简要讨论可用定位类型之间的三个核心区别：

• absolute 定位的元素从正常流中完全移除。相邻的兄弟元素占据它的空间。
• relative 或 sticky 定位的元素保留其空间。相邻元素不被重新定位以占据该元素的保留空间。但是，该元素的偏移量不占用空间。它们完全被其他元素忽略，因此可能导致元素彼此重叠。
• fixed 定位的元素（记住固定的定位是绝对定位的子类）总是相对于窗口定位（除了在具有 transform 属性的父级的情况下 – 所有桌面浏览器的最新版本支持该行为）
• sticky 定位的元素相对于具有滚动框的最近父级定位（例如overflow：auto）。如果没有这样的父级，它相对于窗口定位。

绝对定位的元素忽略浮动属性

如果元素向左或向右浮动，并将其定位类型设置为 absolute 或 fixed ，则 float 属性的值将变为 none 。另一方面，如果我们将其定位类型设置为 relative ，则元素保持浮动。

课堂总结

今天学习了浮动（float）和定位（position）。浮动是为了让多个块级元素在一行上显示。浮动可以左浮动和右浮动。但是浮动会有父级元素因为子级浮动引起内部高度为0 的问题，所以就要清除浮动带来的影响。清除浮动有三种方式①额外标签法：是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签；②父级元素加overflow属性方法：可以给父级添加： overflow为hidden|auto|scroll 都可以实现,只要不是visible；③使用after伪元素清除浮动。定位有四种属性值：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。相对定位，相对于自身原来的位置进行定位，没有脱离标准流。而绝对定位，相对于父元素进行定位，如果没有定义父元素就按照浏览器进行定位，脱离标准流。固定定位是相对于浏览器进行定位。还有子绝父相。父亲相对定位，儿子绝对定位。还有一个叠放次序（z-index），只能在定位里使用该属性。