CSS的Day05（浮动+flex布局+定位）_css浮动能和flex一起用嘛-CSDN博客

本文链接：https://blog.csdn.net/m0_74154295/article/details/135999214

跟着黑马程序员的课，稍稍对CSS的了解

常见的显示模式：行内、块级、行内块

在HTML中，标准流也称为文档流或普通流，是指元素按照其在HTML文档中的出现顺序依次排列的方式。在标准流中，元素会自动占据父容器的空间，并且相邻的元素会紧密排列，直到没有足够的空间为止。

标准流中的元素按照块级元素和内联元素的性质进行排列。块级元素会独占一行，从新行开始，并且会在前后自动换行。而内联元素不会独占一行，它们会在一行上按照从左到右的顺序排列。

通过标准流，HTML文档可以自动适应不同屏幕尺寸和设备，提供更好的可访问性和用户体验。同时，开发者也可以通过CSS对标准流中的元素进行布局和样式的控制，实现自定义的页面设计。

一、浮动

1.1 浮动

作用：让块元素水平排列属性名：float 属性值：左对齐–left
右对齐–right

特点：

顶对齐，加上float浮动后，在一行显示宽高也同样显示，
行内块的显示特点
脱离标准流

为什么第二个盒子里的文字何以看到第一个盒子

/*
在这个例子中，由于第二个盒子没有设置浮动属性，
它会占据标准流中的位置，但由于第一个盒子设置了浮动属性，
它会脱离标准流的控制，导致第二个盒子中的文字可以看到第一个盒子的空间。
这是浮动元素的特性所致。 */
  /* 若只给one加上浮动float，other的right注释后，
  浮动后会脱离标准流的控制
  float: right;  */

在这里插入图片描述

1.2 清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度
（可能导致页面布局错乱）
解决方法:清除浮动(清除浮动带来的影响)

方法一:额外标签法

在父元素内容的最后添加一个块级元素，
设置CSS属性clear: both

方法二：块级/* 单伪元素法 */

.clearfix::after {
content: “”;//伪元素法必备
display: block;
clear: both;
}

/* before 解决外边距塌陷问题 */

方法三：/* 双伪元素法 */

.clearfix::before,
.clearfix::after {
content: “”;
display: table;
}

/* after 清除浮动 */
.clearfix::after {
clear: both;
}

清除浮动-overflow

overflow: hidden;

1.3 浮动属性具有以下特点：

浮动后的元素会顶对齐：浮动元素会以顶部对齐的方式显示，而不是与其他元素的基线对齐。

浮动后的元素具备行内块特点：浮动元素会像行内块元素一样排列在一行上，而不占据整个宽度。

父级容器宽度不够时会换行：如果浮动元素的宽度加上之前的元素宽度超过了父级容器的宽度，浮动元素会被迫换行显示。

浮动后的元素脱离文档流：浮动元素不再占据文档流中的位置，而是被视为一层浮动在其他元素之上。这可能会对布局造成影响。
清除浮动是指解决浮动元素引起的布局问题。当子级元素浮动时，父级容器的高度无法自动撑开，从而导致布局混乱。常见的清除浮动方法有以下几种：

双伪元素法：在父级容器的末尾添加一个空的块级元素（通常是

），为其设置clear:both属性。这样可以强制父级容器闭合，使其包裹住浮动元素。
拓展：浮动的本质作用是实现图文混排效果。通过对元素应用浮动属性，可以使文本环绕在图片周围或与图片并排显示，从而实现更灵活的页面布局效果。

二、 Flex布局 – 弹性布局

非常适合结构化布局(上下排列的，左右排列的)，提供了强大的空间分布和对齐能力。

<!-- Flex布局也叫弹性布局，是浏览器提倡的布局模型，  
  非常适合结构化布局(上下排列的，左右排列的)，提供了强大的空间分布和对齐能力。

Flex模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box{

      display: flex;
      justify-content: space-between;
      /* height: 300px; */
      border: 1px solid #000;


    }

    .box div{
      /* float: left;
      margin: 50px; */

      width: 200px;
      height: 100px;
      background: yellow;
    }
  </style>
  </head>
  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

在这里插入图片描述

2.1 组成

<!-- 给父元素设置分、display:flex，
  子元素自行挤压伸拉

组成部分：
弹性容器
弹性盒子
主轴：默认在水平方向
侧轴 / 交叉轴：默认在垂直方向 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-组成</title>
    <style>
    /* 弹性容器flex */
    .box {
      /* 主轴：默认在水平方向 */
      display: flex;
      height: 300px;
      border: 1px solid #000;
    }

    /* 弹性盒子（弹性容器flex的子级）：沿着主轴方向排列 */
    .box div {
      /* 挤压。、，弹性布局 */
      width: 200px;
      /* 注释高，会拉伸，是自动的也可以手动控制 */
      /* height: 100px; */
      background-color: pink;
    }
  </style>
  </head>
  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

在这里插入图片描述

2.2 flex布局-主轴对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-主轴对齐方式</title>
  <style>
    .box {
      display: flex;
      /* justify-content: flex-start; */

      /* justify-content: flex-end; */

      /* 居中 */
      /* justify-content: center; */

      /* 父级剩余的尺寸分配成间距 */

      /* 弹性盒子之间的间距相等 */
      /* justify-content: space-between; */

      /* 间距出现在弹性盒子两侧 */
      /* 视觉效果：弹性盒子之间的间距是两端间距的2倍 */
      /* justify-content: space-around; */

      /* 各个间距都相等 */
      justify-content: space-evenly;

      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

在这里插入图片描述

2.3 flex布局-侧轴对齐方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-侧轴对齐方式</title>
    <style>
    .box {
      display: flex;
      /* 弹性盒子在侧轴方向没有尺寸才能拉伸 */
      align-items: stretch;

      /* align-items: center; */

      /* align-items: flex-start; */

      /* align-items: flex-end; */

      height: 300px;
      border: 1px solid #000;
    }

    /* 第二个div，侧轴居中对齐 */
    .box div:nth-child(2) {
      align-self: center;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
  </head>
  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

在这里插入图片描述

2.4 flex布局-修改主轴方向

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-修改主轴方向</title>
    <style>
    .box {
      display: flex;

      /* 修改主轴方向 垂直方向；侧轴自动变换到水平方向 */
      flex-direction: column;

      /* 主轴在垂直，视觉效果：垂直居中 */
      justify-content: center;

      /* 侧轴在水平，视觉效果：水平居中 */
      align-items: center;

      width: 150px;
      height: 120px;
      background-color: pink;
    }

    img {
      width: 32px;
      height: 32px;
    }
  </style>
  </head>
  <body>
    <div class="box">
      <img src="../Day01/img/1.jpg" alt>
      <span>媒体</span>
    </div>
  </body>
</html>

在这里插入图片描述

2.5 flex布局-弹性伸缩比

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-弹性伸缩比</title>
    <style>
    /* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
    .box {
      display: flex;
      flex-direction: column;

      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      /* height: 100px; */
      background-color: pink;
    }

    .box div:nth-child(1) {
      width: 200px;
    }

    .box div:nth-child(2) {
      flex: 1;
    }

    .box div:nth-child(3) {
      flex: 2;
    }
  </style>
  </head>
  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

在这里插入图片描述

2.6 flex布局-弹性换行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-弹性换行</title>
    <style>
    .box {
      display: flex;
      flex-wrap: wrap;

      /* 不换行 */  
      /* flex-wrap: nowrap; */

      justify-content: space-between;

      height: 300px;
      border: 1px solid #000;
    }

    .box div {
    
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
  </head>
  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>

在这里插入图片描述

2.7 flex布局-行对齐方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-行对齐方式</title>
    <style>
          /* 因为父级DIV没有设置宽度，
      所以宽度就是浏览器宽度，
      改变窗口大小就会有影响 */
    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      /* 调整 行对齐方式：对单行弹性盒子不生效 */
      /* align-content: flex-start; */
      /* align-content: flex-end; */

      /* align-content: center; */

      /* align-content: space-between; */
      /* align-content: space-around; */

      /* 没有代码提示 */
      align-content: space-evenly;


      height: 400px;
      border: 1px solid #000;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
  </head>
  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

在这里插入图片描述

三、定位（控制HTML元素在网页中的位置）

position：这是CSS定位的主要属性。它可以设置元素的定位方式，包括static、relative、absolute、fixed和sticky。
top、right、bottom、left：这些属性可以设置元素的位置。它们的值可以是一个长度单位（如px、em等）、一个百分比（相对于元素的包含块）或者auto（浏览器自动计算位置）。
z-index：这个属性可以设置元素的堆叠顺序。它的值越大，元素就越靠前。

/* 设置元素的定位方式为相对定位 */
.element {
    position: relative;
    top: 10px;
    left: 20px;
    z-index: 1;
}

我们为一个元素设置了相对定位，然后将它的位置向下移动了10px，向右移动了20px，并将它的堆叠顺序设置为1。

3.1 了解

CSS定位作用：灵活的改变盒子在网页中的位置

CSS定位是Web开发中一个非常重要的概念，它允许开发者控制HTML元素在页面上的精确位置。
通过使用CSS定位，可以非常灵活地改变盒子（元素）在网页中的位置，实现各种布局效果。

相对定位（Relative Positioning）

相对定位允许你相对于元素在正常文档流中的默认位置进行位置的调整。它不会从文档流中移除元素，因此，即使元素被移动，它原本所占的空间仍然保留。

div {
  position: relative;
  top: 10px; /* 向下移动10px */
  left: 20px; /* 向右移动20px */
}

绝对定位（Absolute Positioning）

使用场景:子级绝对定位,父级相对定位(子绝父相)

绝对定位使元素的位置相对于最近的已定位的祖先元素（非static）进行定位。如果没有这样的元素，则相对于文档的根元素（HTML元素）。

绝对定位的元素会从正常的文档流中被移除，因此，它们不会影响其他元素的布局。

“使用场景:子级绝对定位,父级相对定位(子绝父相)”：这是CSS中一种常见的布局方式，子元素使用绝对定位，而父元素使用相对定位。这种布局方式通常用于创建复杂的布局，例如导航菜单或者模态框。

“依然需要边偏移”：这是指在使用子绝父相布局时，子元素可能需要通过设置边距（margin）或者内边距（padding）来调整其位置。

脱标，不占位

2.参照物:先找最近的已经定位的祖先元素;
如果所有祖先元素都没有定位,参照浏览器可视区改位置

3.显示模式特点改变:宽高生效(具有行内快的特点)"：这部分内容解释了CSS中绝对定位的一些特性。例如，绝对定位的元素不会占据文档流中的位置，而是会脱离文档流。此外，绝对定位的元素的位置是相对于其最近的已定位的祖先元素，如果没有已定位的祖先元素，那么其位置会相对于浏览器的可视区域。最后，绝对定位的元素的宽度和高度是根据其内容来确定的，而不是根据其父元素的宽度和高度。

   <style>
        img {
            width: 400px;
        }

        .news {
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 350px;
            background-color: #f8f8f8;
        }

        .news span {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            width: 92px;
            height: 32px;
            background-color: rgba(0, 0, 0, 0.6);
            text-align: center;
            line-height: 32px;
            color: #fff;
        }
    </style>

<div class="news">
    <img src="../Day01/img/1.jpg" alt="c">
    <span>展会活动</span>
    <h4>2222世界</h4>
</div>

居中效果

  <style>
        img {
            position: absolute;
            left: 50%;
            top: 50%;
            /*!*<!--盒子的中间出现在参照物的中间-->*!*/
            /*margin-left: -100px;*/
            /*margin-top: -100px;*/
            transform: translate(-50%, -50%);

        }

    </style>

<img src="./img/1.jpg" alt="" srcset="">

1.绝对定位"：这是指图片元素使用了CSS的绝对定位。
“2. 水平、垂直边偏移为 50%”：这是指图片元素的左边和上边的位置都是相对于其包含块的50%。
“3. 子级向左、上移动自身尺寸的一半”：这是指图片元素使用了transform属性的translate(-50%, -50%)来实现在页面中居中显示。
“左、上的外边距为-尺寸的一半”：这是指图片元素的左边和上边的外边距都是其自身尺寸的一半。

“transform: translate(-50%, -50%)”：这是CSS的transform属性，它可以用来移动元素的位置。在这里，translate(-50%, -50%)表示将元素向左和向上移动其自身尺寸的一半，从而实现在页面中居中显示。

固定定位（Fixed Positioning）

固定定位是一种特殊类型的绝对定位，但它是相对于浏览器窗口进行定位的。即使页面滚动，使用固定定位的元素也会保持在指定的位置。

1. 脱标，不占位
2. 参照物：浏览器窗口/
3.显示模式特点具备行内块特点/

<style>
        * {
            margin: 0;
            padding: 0;
        }

        /*1. 脱标，不占位*/
        /*2. 参照物：浏览器窗口*/
        /*3.显示模式特点具备行内块特点*/

        div {
            position: fixed;
            top: 0;
            right: 0;
            /*行内快特点*/
            width: 500px;
        }
    </style>