学习笔记（四）前端之CSS基础第二篇

摘要

CSS的浮动以及定位和弹性盒子。css到此为止。我认为那些设置字体、背景、渐变等知识做到了解掌握会用即可并不需要深刻理解。

CSS浮动

浮动的定义：

使元素脱离文档流，按照指定的方向发生移动，遇到父级边界或相邻的浮动元素就会停下来。
文档流：文档指的是html文档，而文档流就是在文档中可显示对象在排列时所占用的位置/空间（各元素在html中的默认位置）
脱离文档流：在页面中不占位置

应用场景：

在很多实际应用场景中设计网页时，都是在很多个div标签嵌套一些文字、图片等。而因为div时块级元素（注：前面的博客有）所以会导致每个同层级的div会自动换行显示。但很多情况我们是希望同层级的div并排显示。

解决方案：

方案一： 之前学习的使用inline-block来让块级元素和内联元素相互转换。但这个方法有一个却缺点就是改变一个盒子的margin（外边距）时会使多个同层级的盒子元素同时改变。所以这种方法很死板。
方案二： 使用CSS浮动。float：left/right
浮动缺点：使用不当可能会出现遮盖未浮动的元素的情况

css浮动个人理解：html文档流即为一种流式布局（如果有学过JavaSE的小伙伴应该很熟悉）。可以将html页面看成一个桌子，桌子上有很多盒子（标签元素），而每个标签元素都会按照html的文档流（即流式布局）的规则来排列，而设置某一盒子浮动本质上就是将该盒子从桌面上拿起来，使其浮动在桌面之上，所以浮动的元素会遮挡住未浮动的元素。此时若设置float：left，该元素就会向父级元素的的左边缘靠。

CSS浮动补充：
1、 当一个元素设置成浮动元素后，可为其设置宽高（可设置宽高的元素都是display：block的元素即块级元素，但浮动元素并不是块级元素，只是可以设置宽高）如<span>等
**2、**当一个元素设置成浮动元素后，其父级元素的宽或高长度不够时，该元素会自动滑到下一行继续执行浮动而不会在上一行（父级盒子所在行）末尾执行浮动，且在该元素滑到下一行后，在其执行浮动的过程中，如果和该元素同层级的元素宽度或高度过大（大于父级元素的宽高）该元素会呗卡住。
3、 虽然浮动会遮挡未浮动的元素，但如果未浮动的元素中是文字，浮动的元素不会遮挡住文字，文字会在浮动的元素周围环绕显示。

CSS定位

CSS定位最常见的应用就是在浏览页面的时候页面上会出固定在页面边缘的小广告，不管如何上下滚动页面那个小广告都会在那个固定的位置。此时使用定位即可：position:fixed;

定位的使用：

position 属性指定了元素的定位类型。
position 属性的五个值：
static： 又叫静态定位，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
注：静态定位的元素不会受到 top, bottom, left, right影响。
relative： 相对定位,元素的定位是相对其正常位置。（移动相对定位元素，但它原本所占的空间不会改变）
fixed： 元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动

absolute： 绝对定位，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于HTML:
sticky： 可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
top, bottom, left, right这四个属性是定位中的属性，对应的是上下左右，意为将元素定位到距离其 参考对象设定的上下左右的距离。

而参考对象就是 如果一个对象设置了绝对定位,那它的定位参考对象就是它的所有祖先中,和它离的最近 的并且 postion属性值不是static 的那个祖先.

浮动与定位的区别

之前有特别提过浮动如果下层是文字的话，并不会遮盖文字，而是会是文字环绕浮动的元素。
那么定位呢， 很明显根据常识，网页上的小广告是会遮挡住页面下的文字的。
还是之前关于浮动的小例子，浮动是将元素浮动在HTML页面的上方，其实原因就是：浮动只将该元素提升了半个层级，而定位是将元素提高了一个层级的。所以定位的元素也是可以遮盖浮动的元素的