box-shadow

box-shadow：
- 第一个值：阴影水平偏移
- 第二个值：阴影垂直偏移
- 第三个值：阴影的模糊度(模糊的距离)
- 第四个值：阴影的大小
- 第五个值：颜色
- 第六个值：默认是outset inset 内阴影
/ x偏移量 | y偏移量 | 阴影颜色 /
box-shadow: 60px -16px teal;
/ x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 /
box-shadow: 10px 5px 5px black;
/ x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 /
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/ 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 /
box-shadow: inset 5em 1em gold; ```javascript <!DOCTYPE html>

<a name="bPxcT"></a>
# flex（弹性盒）布局
flex布局是什么？<br />Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。<br />任何一个盒子都可以指定为Flex布局
```javascript
div{
  display:flex;
}

display有两个值

flex ：块级弹性盒
inline-flex：行内弹性盒

设为 Flex 布局以后，子元素的float和vertical-align属性将失效。

2、基本概念

在我们使用弹性盒布局前我们要知道两个概念：

flex容器：
flex项目：所有子元素自动成为容器成员，称为 “Flex 项目”（flex item），注意，是子代，不是后代
容器中默认存在两根轴：
- 水平的主轴
- 垂直的侧轴

3、属性设置

1、容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items

①、flex-direction

这个属性决定主轴的方向（也就是项目排列的方向）
flex-direction：

<!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>
    .wrap {
      width: 500px;
      border: 10px solid red;
      display: flex;
    }

    .wrap>div {
      font-size: 50px;
      text-align: center;
      line-height: 100px;
    }

    .wrap>div:nth-child(1) {
      width: 100px;
      height: 100px;
      background-color: lightseagreen;
    }

    .wrap>div:nth-child(2) {
      width: 100px;
      height: 100px;
      background-color: lemonchiffon;
    }

    .wrap>div:nth-child(3) {
      width: 100px;
      height: 100px;
      background-color: lightsalmon;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

row（默认）

row-reverse

column

column-reverse

②、flex-wrap

如果一条轴线排不下，如何换行。

<!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>
    .wrap {
      width: 200px;
      border: 10px solid red;
      display: flex;
      flex-wrap: wrap;
    }

    .wrap>div {
      font-size: 50px;
      text-align: center;
      line-height: 100px;
    }

    .wrap>div:nth-child(1) {
      width: 100px;
      height: 100px;
      background-color: lightseagreen;
    }

    .wrap>div:nth-child(2) {
      width: 100px;
      height: 100px;
      background-color: lemonchiffon;
    }

    .wrap>div:nth-child(3) {
      width: 100px;
      height: 100px;
      background-color: lightsalmon;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

wrap

nowrap

wrap-reverse
- 换行，第一行在下方。

③、flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

④、justify-content

定义了项目在主轴上的对齐方式。

flex-start

flex-end

center

space-between:两端对齐，项目之间的间隔都相等。

space-around:每个项目两侧的间隔相等

⑤、align-items

属性定义项目在侧轴上如何对齐

flex-start：侧轴起点对齐

flex-end：侧轴终点对齐

center

baseline

stretch:如果项目未设置高度或设为auto，将占满整个容器的高度。

2、项目的属性

<!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>
    .wrap {
      width: 500px;
      border: 10px solid red;
      display: flex;
      justify-content: space-between;  
    }

    .wrap>div {
      font-size: 50px;
      text-align: center;
    }

    .wrap>div:nth-child(1) {
      width: 100px;
      height: 100px;
      background-color: lightseagreen;
    }

    .wrap>div:nth-child(2) {
      width: 100px;
      height: 100px;
      background-color: lemonchiffon;
    }

    .wrap>div:nth-child(3) {
      width: 100px;
      height: 100px;
      background-color: lightsalmon;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

①、order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

②、flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

<!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>
    .wrap {
      width: 500px;
      border: 10px solid red;
      display: flex;
    }

    .wrap>div {
      font-size: 50px;
      text-align: center;
      /* 也就是剩余空间每个项目一份 */
      flex-grow: 1;
    }

    .wrap>div:nth-child(1) {
      width: 100px;
      height: 100px;
      background-color: lightseagreen;
    }

    .wrap>div:nth-child(2) {
      width: 100px;
      height: 100px;
      background-color: lemonchiffon;
    }

    .wrap>div:nth-child(3) {
      width: 100px;
      height: 100px;
      background-color: lightsalmon;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

③、flex-shrink属性

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

④、flex-basis

flex-basis 用于设置子项的占用空间。
如果设置了值，则子项占用的空间为设置的值；
如果没设置或者为 auto，那子项的空间为width的值。

<!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>
    .wrap {
      width: 200px;
      border: 10px solid red;
      display: flex;
    }

    .wrap>div {
      font-size: 50px;
      text-align: center;

    }

    .wrap>div:nth-child(1) {
      flex-basis: 10px;
      width: 100px;
      height: 100px;
      background-color: lightseagreen;
    }

    .wrap>div:nth-child(2) {
      width: 100px;
      height: 100px;
      background-color: lemonchiffon;
    }

    .wrap>div:nth-child(3) {
      width: 100px;
      height: 100px;
      background-color: lightsalmon;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

⑤、flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

练习1、

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xiaomi</title>
  <style>
    ul,
    ol {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    ul {
      width: 1226px;
      margin: 100px auto;
      display: flex;
      justify-content: space-between;
    }

    .first {
      width: 234px;
      height: 170px;
      background-color: #5f5750;
    }

    .first~li>img {
      width: 316px;
      height: 170px;
    }
  </style>
</head>

<body>
  <div>
    <ul>
      <li class="first"></li>
      <li>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340" alt="">
      </li>
      <li>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fce474f4024b96545959ccd45b7e50f3.jpg?w=632&h=340" alt="">
      </li>
      <li>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340"
          alt="">
      </li>
    </ul>
  </div>
</body>

</html>

2022-03HTML CSS

day09