跳至主要內容
布局实战

本章包括了一些经典的布局实战案例。

网格布局

概述

网格布局 (Grid) 是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

上图这样的布局，就是 Grid 布局的拿手好戏。

与 flex 的区别

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

CSS

CSS

按钮边款特效
字体显示控制
重置样式
......

CSS高阶用法以及VUE CSS穿透用法

CSS高阶用法

<style>
  :root {
    --size: 100px;
    --comCol: #fff;
    --align: center;
  }

  .title {
    width: var(--size);
    height: var(--size);
    background-color: var(--background);
    color: var(--comCol);
    text-align: var(--align);
    line-height: var(--size);
  }
</style>
盒模型简介

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括: 边距，边框，填充，和实际内容。

优先级和继承

本文介绍 CSS 的一些最基本的概念: 层叠、优先级和继承。

背景与边框

背景样式

背景颜色

background-color 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的颜色值。背景色扩展到元素的内容和内边距的下面。

背景图片

background-image 属性允许在元素的背景中显示图像。

默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。

如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加一个 background-color 属性，看看效果如何。

盒模型

在 CSS 中，所有的元素都被一个个的“盒子(box)”包围着。

溢出

溢出是在盒子无法容纳下太多的内容的时候发生的。

概念

我们知道，CSS 中万物皆盒，因此我们可以通过给 width 和 height(或者 inline-size 和 block-size) 赋值的方式来约束盒子的尺寸。溢出是在您往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS 给了您好几种工具来控制溢出。

CSS 尽可能不丢弃内容

在默认情况下，CSS 会将元素溢出的部分显示在和盒子外。