Place to write CSS

引入 CSS 有三种方式：

  • Inline CSS: 在标签内部写入 CSS 样式(不推荐)
  • Internal CSS：在 head 标签中写 CSS 样式
  • External CSS：引入外部的 CSS 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 1. Inline CSS -->
<p style="color: blue">Inline CSS. Should never be used</p>
<!-- 2. Internal CSS -->
<head>
  <style>
    .internal-p {
      color: orange;
    }
  </style>
</head>
<body>
  <p class="internal-p">Internal CSS. Write in style element within head</p>
</body>
<!-- 3. External CSS -->
<head>
  <link href="style.css" rel="stylesheet" />
</head>
<body>
  <p class="external-p">External CSS. Write in other file</p>
</body>

Selector

CSS 选择器可以将样式应用于匹配某种模式的元素，比如 ID selector、class selector, element selector 等，详情可以参考 CSS selectors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* element selector */
h1,
h2 p,
li {
  font-family: sans-serif;
}

/* class selector */
.external-p {
  color: red;
}

/* ID selector */
#root {
  color: red;
}

Box model

HTML 中的每个元素都可以看做一个盒子，有它自己的宽高。每个盒子有如下几个属性:

  • Content: Text, images, etc.
  • Border: A line around the element, still inside of the element
  • Padding: Invisible space around the content, inside of the element
  • Margin: Space outside of the element, between elements
  • Fill area: Area that gets filled with background color or background image

Final element width = padding + width + border

Final element height = padding + height + border

我们可以为盒子的各个部分单独设置样式

1
<div class="box-model">content</div>
1
2
3
4
5
6
7
8
.box-model {
  text-align: center;
  background: cyan;
  border: 5px solid red;
  padding: 20px;
  margin: 10px 20px;
  width: 50%;
}

Box type

  • Inline boxes: Occupy the exactly width that is needed for its content
  • Block-Level boxes/elements: Occupy all the space that they can. And they basically create line breaks after them

通过 display 可以修改元素的 box type

Layout

使用 CSS 有三种设置 layout 的方式:

  • Float Layouts: using the float CSS property. Still used, but getting outdated fast.
  • Flexbox: Laying out elements in a 1-dimensional row without using floats. Perfect for component layout.
  • CSS Grid: For laying out element in a fully-fiedged 2-dimensional grid. Perfect for page layouts and complex components.

Flexbox

这种方式可以很方便的设置一维布局(比如单行)，可以在较为简单的场景中使用（比如设置单个 component 内部的 layout）。

Flexbox 有四个相关的概念:

  • Flex Container：表示 flexbox 容器，有如下几个属性可以设置组件内的布局:
    • gap: 0 / length，用于设置组件间的间隔
    • justify-content: flex-start / flex-end / center / space-between / space-around / space evenly. 用于设置 Main Axis 方向 items 的对齐方式
    • align-items: stretch / flex-start / flex-end / center / baseline. 用于设置 Across axis 方向 items 的对齐方式
    • flex-direction: 设置Main Axis 的方向
    • …
  • Flex Items: 表示 flexbox 容器中的每个组件，用于覆盖 flex container 的设置，有如下几个属性可以单独设置改组件的布局:
    • align-self: auto / stretch / flex-start / flex-end / center / baseline
    • flex-grow: 0/1+，是否允许元素自动增长，默认为 0
    • flex-shrink 0/1+，是否允许元素自动缩减，默认为 1
    • flex-basis 定义 item 的宽度，默认为 auto
    • flex：一次定义 flex-grow, flex-shrink, flex basis
    • order 控制 item 在 flex box 中排列的顺序
  • Main Axis: 表示 flexbox 布局的方向，可以修改
  • Cross Axis: 与 Main Axis 垂直的方向

可以使用 display: flex 来将某个元素以 flexbox 的方式进行布局，align-items 可以对 container 内的某个组件你单独设置，该属性主要有

Grid

Grid 可以方便的定义二维空间的布局，可以在较为复杂的常见中使用。Grid 将 box 划分为网格，每个元素占据一个网格，称为 grid cell，网格通过 grid lines 划分

Grid container 有如下几个属性可以设置对齐方式

  • grid-template-rows：设置 grid 有多少行
  • grid-template-columns：设置 grid 有多少列
  • row-gap：设置行间距
  • column-gap：设置列间距
  • justify-items
  • align-items:
  • justify-content
  • align-content

Grid items 有如下几个属性可以设置对齐方式

  • grid-row: start line / end line
  • grid-row: 将 item 放入某个特定的 cell 中: start line / end line
  • justify-self: 复写 justify-items: stretch / start / center / end
  • align-self: 复写 align-items: stretch / start / center / end