• CSS-浮动，定位

    1. 浮动 (float)

            CSS的定位机制有三种：普通流(标准流)，浮动和定位。

            普通流就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的情况下绝对不会出现例外的情况叫普通流布局。

            1.1 什么是浮动？

            元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。  

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         div {
    9.             width: 200px;
    10.             height: 200px;
    11.             /* 
    12.                 定义浮动
    13.                 left ：元素向左浮动
    14.                 right ： 元素向右浮动
    15.                 none ：不浮动 默认
    16.             */
    17.             float: left;
    18.             color: white;
    19.             text-align: center;
    20.             line-height: 200px;
    21.             font-size: 50px;
    22.         }
    23.         .a {
    24.             background-color: blue;
    25.         }
    26.  
    27.         .b {
    28.             background-color: red;
    29.         }
    30.  
    31.         .c {
    32.             background-color: green;
    33.         }
    34.     style>
    35. head>
    36. <body>
    37.     <div class="a">div1div>
    38.     <div class="b">div2div>
    39.     <div class="c">div3div>
    40. body>
    41. html>

            页面显示

         1.2  浮动特性

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

            浮动首先创建包含块的概念。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

            

            浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

           

            1. 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

            2. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

    2. 定位

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

         边偏移：

    边偏移属性

    描述

    top

    顶端偏移量，定义元素相对于其父元素上边线的距离

    bottom

    底部偏移量，定义元素相对于其父元素下边线的距离

    left

    左侧偏移量，定义元素相对于其父元素左边线的距离

    right

    右侧偏移量，定义元素相对于其父元素右边线的距离

          定位模式：

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

            选择器 {position: 属性值;}

                           position的属性常用值：

    值

    描述

    static

    自动定位（默认定位方式）

    relative

    相对定位，相对于其原文档流的位置进行定位

    absolute

    绝对定位，相对于其上一个已经定位的父元素进行定位

    fixed

    固定定位，相对于浏览器窗口进行定位

            2.1 静态定位

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

            2.2 相对定位
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         div {
    9.             width: 300px;
    10.             height: 200px;
    11.         }
    12.  
    13.         .bottom {
    14.             background-color: blue;
    15.         }
    16.  
    17.         .top {
    18.             background-color: red;
    19.             /* 
    20.                 设置相对定位
    21.                 相对定位，不脱标，占有原来的位置
    22.                 相对当前位置进行移动,可以使用偏移属性改变元素位置
    23.             */
    24.             position: relative;
    25.             /* 距左200，向右移动200 */
    26.             left: 200px;
    27.             /* 距上100，向下移动100 */
    28.             top: 100px;
    29.         }
    30.     style>
    31. head>
    32. <body>
    33.     <div class="top">div>
    34.     <div class="bottom">div>
    35. body>
    36. html>

            注意：1.相对定位可以通过偏移移动位置，但是原来所占有的位置，继续占有。

                       2.每次移动位时，是以自己的左上角为基点移动(相对于自己原来的位置)。

            2.3 绝对定位       
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width= , initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         .sup {
    9.             width: 300px;
    10.             height: 300px;
    11.             background-color: aqua;
    12.             position: relative;
    13.         }
    14.  
    15.         .sub {
    16.             width: 50px;
    17.             height: 50px;
    18.             background-color: blue;
    19.             /* 设置绝对定位 */
    20.             position: absolute;
    21.             /* 
    22.                 基于有定位的上级标签进行移动
    23.                 如果上级标签都没有定位，就基于浏览器移动
    24.                 绝对定位，脱标，不占有原来的位置
    25.             */
    26.             left: 20px;
    27.             top: 50px;
    28.         }
    29.     style>
    30. head>
    31. <body>
    32.     <div class="sup">
    33.         <div class="sub">div>
    34.     div>
    35. body>
    36. html>

            子绝父相

            子级是绝对定位的话，父级要用相对定位。因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。父盒子布局时，需要占有位置，因此父亲只能是相对定位。

    2.4 固定定位
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         div {
    9.             width: 100px;
    10.             height: 100px;
    11.             background-color: aqua;
    12.             /* 
    13.                 固定定位
    14.                 基于浏览器页面移动，脱标
    15.             */
    16.             position: fixed;
    17.             top: 50%;
    18.             right: 5px;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <div>div>
    24. body>
    25. html>

              注意：1.固定定位的元素跟父亲没有关系，只认浏览器。

                         2.固定定位完全脱标，不占有位置，不随滚动条滚动。

            2.5 四种定位总结

    定位模式

    是否脱标占有位置

    是否可以使用边偏移

    移动位置基准

    静态static

    不脱标，正常模式

    不可以

    正常模式

    相对定位relative

    不脱标，占有位置

    可以

    相对自身位置移动（自恋型）

    绝对定位absolute

    完全脱标，不占有位置

    可以

    相对于定位父级移动位置（拼爹型）

    固定定位fixed

    完全脱标，不占有位置

    可以

    相对于浏览器移动位置（认死理型）

            2.6 定位模式转换

                    跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块元素，行内块的宽度和高度和内容有关。因此比如行内块元素如果添加了绝对定位和固定定位后，浮动后可以不用转换模式，直接给高度和宽度就可以了。

  • 相关阅读:
    开源 Wiki 软件 wiki.js
    深眸科技自研AI视觉分拣系统，实现物流行业无序分拣场景智慧应用
    Qt学习总结之QSpinBox
    大数据-之LibrA数据库系统告警处理（ALM-12052 TCP临时端口使用率超过阈值）
    Tableau概述
    程序运行过程中消耗的是堆内存还是栈内存还是其他？
    Altium Designer 相同模块的布局布线复用-AD
    代码随想录算法训练营第57天 | 647. 回文子串 516.最长回文子序列 dp总结
    Pytorch实用教程：torch.from_numpy(X_train)和torch.from_numpy(X_train).float()的区别
    vertx学习
  • 原文地址：https://blog.csdn.net/apple_59745077/article/details/136379567