实现顶部100px的盒子高度自适应布满浏览器页面

今天小哆啦带大家学一手布局以及复习一下常用flex布局

这个小哆啦想了想好像不是特别难哈哈相信大多数各位都应该会这个题

1.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>Flexbox Layout</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    .header {
      height: 100px;
      background-color: #eaeaea;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .content {
      flex: 1;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Header Content</h1>
  </div>
  <div class="content">
    <p>Main Content Goes Here</p>
  </div>
</body>
</html>

忽然小哆啦就有问题就来了

flex :1到底是哪几个的缩写？

解析：flex-grow:1、flex-shrink:1、flex-basis这三个的缩写

grow：这个单词就是扩大的意思，所以就是根据需要扩展占据剩余空间

shrink：这个单词的意思就是收缩的意思，所以就是根据需要收缩，防止溢出

basis：这个单词的意思就是基础的意思，表示在没有内容的时候也可以占据空间

怎么样是不是奇奇怪怪的知识又增加了。顺便还可以背几个英文单词，哈哈。

flex 布局如何设置水平垂直居中

解析：

justify-content: center; 将子元素在主轴上水平居中。

align-items: center; 将子元素在交叉轴上垂直居中
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 或者可以使用 align-content: center; （当容器有多行时） */
}

flex布局那些属性是加在容器中的那些是加在子元素的？

加在容器中的

flex-direction: direction 的汉语是方向，所以就是排列方向。有四个方向

row: 默认值，水平方向从左到右排列。

row-reverse：在扩展一个单词reverse是颠倒意思

column: 垂直方向从上到下排列。

column-reverse: 垂直方向从下到上排列。

flex-warp：warp的汉语意思是扭曲那也就是换行

nowrap：不换行

warp：换行，第一行在上方

warp-reverse：换行，但是第一行在下方

flex-flow

是flex-direction，flex-warp的简写形式

例如：flex-flow: row wrap;

justify-content（主轴对齐方式）:

flex-start: 主轴的起点对齐。

flex-end: 主轴的终点对齐。

center: 主轴的中点对齐。

space-between: 在主轴上均匀分布项目，首尾两个项目分别在起点和终点。

space-around: 在主轴上均匀分布项目，项目两侧的间隔相等。

align-items（交叉轴对齐方式）:

flex-start: 交叉轴的起点对齐。

flex-end: 交叉轴的终点对齐。

center: 交叉轴的中点对齐。

stretch: 默认值，如果项目未设置高度或设为auto，将占满整个交叉轴。

baseline: 项目的第一行文字的基线对齐。

align-content（多根轴线的对齐方式）:

flex-start: 多根轴线在交叉轴起点对齐。

flex-end: 多根轴线在交叉轴终点对齐。

center: 多根轴线在交叉轴中点对齐。

space-between: 在交叉轴上均匀分布轴线，首尾两根轴线分别在起点和终点。

space-around: 在交叉轴上均匀分布轴线，轴线两侧的间隔相等。

stretch: 默认值，轴线占满整个交叉轴。

加在子元素的

order（项目排列顺序）:

默认值为0，可以为负值。

flex-grow（放大比例）:

决定项目在容器内分配多余空间时的放大比例。

flex-shrink（缩小比例）:

决定项目在容器内空间不足时的缩小比例。

flex-basis（基准大小）:

在分配多余空间之前，项目占据的主轴空间。

flex（简写形式，包含 flex-grow, flex-shrink, flex-basis）:

例如：flex: 1 1 auto;（默认值）

align-self（单个项目的对齐方式）:

auto: 继承父元素的 align-items 属性。

flex-start, flex-end, center, stretch, baseline 等值。

2.`calc()`函数

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 100px;
            width: 100%;
            background: red;
        }
        .con{
            height: calc(100vh - 100px);
            width: 100%;
            background: yellow;
        }

    </style>
</head>
<body>
<div class="top">

</div>
<div class="con">

</div>
</body>
</html>

calc() 函数是CSS中用于执行数学运算的函数，它允许在CSS属性中进行动态计算。这样可以方便地根据需要调整布局、尺寸或其他样式属性，而无需硬编码数值。

今天就分享到这里啦，还有其他实现方式的可以评论区见:cake:

实现顶部100px的盒子高度自适应布满浏览器页面

实现顶部100px的盒子高度自适应布满浏览器页面

1.flex 布局

2.calc()函数

2.`calc()`函数