css

可劲学吧，学不完的。

基础

css属性值

initial

让css某个属性恢复到属性默认值

inherit

让css某个属性继承父元素

unset

让css某个属性不设置，并且继承父元素（如果可以继承的话）

revert

让css某个属性恢复到浏览器的默认样式

inset

inset 为简写属性，对应于 top、right、bottom 和 left 属性

布局

固定元素宽高比

方法一：aspect-ratio 存在兼容性

aspect-ratio 为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

当前图片宽度：，当前图片高度：

小提示

当同时设置 width 和 height 时，aspect-ratio 会被忽略。

方法二：padding-top 完美适配

padding-top 是一个百分比值时，它基于包含块（父元素）的宽度来计算高度。

padding-top

查看完整代码

<template>
  <div class="conatiner">
    <div class="content">
      <div class="inner">
        <div class="item">padding-top</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.conatiner {
  width: 100%;
  height: 700px;
  background-color: #333333;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  // 外包装
  .content {
    width: 100%;
    margin: 0 auto;
    // 设置content高度为宽度的75%
    .inner {
      width: 100%;
      // 元素顶部内边距区域的高度 - <percentage> 相对于包含块的行内尺寸（水平语言中的宽度，由 writing-mode 定义）的百分比。
      padding-top: 75%;
      position: relative;
      // 真正展示的内容
      .item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #5bceaa;
        font-size: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>

适应内容（宽度/高度）

导航栏

查看完整代码

<template>
  <div class="container">
    <div class="nav">
      <h1>导航栏</h1>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 400px;
  background-color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  .nav {
    width: 100%;
    height: 50px;
    background-color: rgba(175, 175, 175, 0.5);
    h1 {
      background-color: #37ad54;
      line-height: 50px;
      width: fit-content;
    }
  }
}
</style>

• width: fit-content
• height: fix-content

Flex 布局

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

• flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
• flex-direction 属性指定了内部元素是如何在弹性容器中布局的，定义了主轴的方向（正方向或反方向）。
• justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。
• align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
• justify-items 属性为所有盒中的项目定义了默认的 justify-self ，可以使这些项目以默认方式沿适当轴线对齐到每个盒子。
• align-items 属性设置了所有直接子元素的 align-self 值作为一个组。在 Flexbox 中，它控制子元素在交叉轴上的对齐。在 Grid 布局中，它控制了子元素在其网格区域内的块向轴上的对齐。
• flex CSS 简写属性(flex-grow（增长）、flex-shrink（收缩）、flex-basis（初始大小）)设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

flex-wrap：wrapflex-direction：rowjustify-content：centeralign-items：center

0

1

2

3

4

5

6

7

8

9