CSS浮动定位

Skyme2023/7/4大约 7 分钟

浮动

一行多列

设置浮动：每一项设置float: left;。
设置宽度：通常采用百分比设置。比如：一行五列，设置宽度为20%。
设置为怪异盒子：为了方便布局，每一项设置属性box-sizing: border-box;
空出间隙：使用内边距空出项与项之间的间隙。

使用浮动-提升元素类别

使用浮动之后，可以让元素“提升半个”元素级别：块级元素和行内元素，都将“块级化”，但实际上是拥有行内块的特性。
使用了浮动之后，块级元素不会独占一行，行内元素可以设置宽和高。
使用float属性设置元素的浮动：
- float: left;：左浮动。
- float: right;：右浮动。
- float: none;：不浮动。

元素塌陷

如果一个容器内的元素，都设置了浮动，父元素将会塌陷。因为设置了浮动的元素，会脱离标准文档流导致父元素没有办法准确获取子元素的高度。
overflow常见用法:
1. 制作等高效果: 利用overflow:hidden;截取显示的特性，再设置容器的固定高度。就可以制作出等高效果。
  常用与文字区域的截取，例如商品介绍，文字的不同可能需要不同的行数完全展示。于是就需要对内容显示区域进行截取
2. 省略多余文字: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;这几个属性搭配使用，可以做出文字省略的效果。有时我们还可能需要根据情况设置固定宽度。
  使用了文字省略效果之后，为了增加浏览体验，可以使用title来展示完全文本。

            top: 50%;
            left: 50%;
            transform: translate( -50%, -50%);

定位

position属性

css中对html元素的管理是基于分层的管理，整个页面看起来是一个平面，实际是由浏览器解析每一层的元素布局和多层元素间的定位关系后汇总渲染成一个平面图片后展示出来的。
布局和定位是css中两个重要的知识点，二者是针对完全不同的方面。
布局：是管理同一层元素间的布局方式。
定位：是管理元素所在层级的定位方式。
position属性用于设置元素的定位，它有一下几个值：
- position: static;：默认值，元素按照标准文档流进行定位。
- position: relative;：相对定位。
- position: absolute;：绝对定位。
- position: fixed;：固定定位。

static静态定位/非定位

默认定位方式,无须设置
该类元素存在于文档流中，并遵循文档流布局方式。此时偏移属性（ top , right , bottom , left ）和 z-index 属性无效。

relative 相对定位

定义：

根据自己原本的（静态）位置进行定位。
不脱离标准文本流。
偏移属性（left、top、right、bottom）有效。
设置偏移属性，会让元素从正常位置进行偏移，但是后面的盒子接在原本没有偏移的位置进行布局。
父相子绝。祖先设置相对定位，用于给后代设置了绝对定位的元素作为定位参照。

注意：虽然相对定位是基于正常位置进行偏移，但各个偏移属性的参照对象各不相同，如设置top是参照边为上边，设置bottom参照边则为正常位置的下边界。


    01相对定位

      div {
        width: 200px;
        height: 200px;
      }

      .normal-div {
        background-color: #ff0000;
      }

      .rel-div {
        /* 相对定位 */
        position: relative;
        background-color: #00ff00;
        top: 10px;
        left: 10px;
      }

      普通盒子（static）

      相对定位盒子
      top: 10px; left: 10px
      上偏移10像素，左偏移10像素

      普通盒子（static）
      我跟在上面相对定位盒子原有位置后面布局

偏移属性百分比：
相对定位有一个奇怪的现象，虽然相对定位的数值型偏移属性是相对于自身原有位置。但其百分比却是通过父级进行计算的。top 和 bottom 百分比相对于包含块的高度（内容高度）；left 和right 百分比相对于包含块的宽度（内容宽度）。
应用：
父相子绝（子绝父相）。相对定位虽然可以进行偏移，但一般情况下不使用。
相对定位的作用是给设置了绝对定位的子元素（后代元素）作为定位参考。

absolute 绝对定位

定义：
- 根据设置了定位的祖先元素定位。
- 如果祖先元素都没设置定位，根据body进行定位。
- 脱离标准文档流。
- 偏移属性（left、top、right、bottom）有效。
- z-index属性有效。
- 父相子绝。绝对定位开发中经常需要参考设置了相对定位的祖先元素进行定位参照。
特性
absolute和float都可以触发元素的BFC属性，且都具有包裹性和破坏性，所以对于一些应用场景，这两个属性可以进行替换。
- 包裹性：元素绝对定位后，会为其后代元素建立一个包含块。且若元素不设置宽度，宽度由内容撑开。
- 破坏性：元素绝对定位后，会脱离文档流，若父级不设置高度，则父级高度塌陷。
- 去浮动：元素绝对定位后，元素原来的浮动效果将失效。
- 块级化：元素绝对定位后，会提升元素层级，变为块级元素，然后原本的行内元素也可以设置宽和高。
偏移特性：
如果使用top、right、bottom、left这4个偏移特性来描述元素4个边的放置位置，那么元素的高度和宽度将由这些偏移隐含确定，元素将会拉伸。使用偏移属性拉伸的绝对定位元素，其内部元素支持百分比width|height值。通常情况下，元素高度百分比要想起作用，需要父级窗口的高度值不是auto；但是如果容器由绝对定位拉伸形成，百分比高度值也是支持的。
静态位置：
当元素绝对定位后，若该元素没有设置偏移属性，则该元素处于静态位置。
如果只设置了left或者right属性，那么垂直方向的静态位置不发生变化。
如果只设置了top或者bottom属性，那么水平方向的静态位置不发生变化。


    Document

        .normal-div {
            height: 300px;
            background-color: #FEDC00;
        }

        .rel-div {
            position: relative;

        }

        .abs-div {
            position: absolute;
            /* left: 10px;            top: 20px; */
        }

        我用来占位置

    我没有设置left/top值，尝试设置left/top试一下。

overflow：
当overflow在绝对定位元素和其包含块之间时，绝对定位元素不会被父级overflow属性剪裁。给父级设置 position:relative 可以解决问题。

fixed 固定定位

定义：
- 脱离文档流。
- 独立于所有其它元素，参考整个窗体的位置进行固定。
- 偏移属性（left、top、right、bottom）有效，表示固定在窗口的哪个位置。
- z-index属性有效。
特性：
固定定位与绝对定位的很多特征、特性都类似：包裹性、破坏性、去浮动、偏移特征、静态位置等特征。