CSS | Tianhe Gao

Layout

Position

通过 position 可以对正常的文档流产生影响。

child 用 absolute，parent 就需要 relative

使用 absolute 时，是相对于父级元素而言；对于 fixed ，则相对于视窗（viewport）

position 属性不是默认继承的，color 是；inherit 可以让 position 变得可继承

static 是默认情况，left/right/top/bottom/z-index 不起作用

relative 可以使得 z-index 起作用，根据 left/right/top/bottom 属性，将元素从默认位置推走

absolute 从正常文档流移除，left/right/top/bottom/z-index 起作用

fixed 像 absolute 同样从文档流中移除，但滚动页面并不移动元素，仅相对于整个页面变化位置

sticky ，先是 relative，直到滚动到 viewport 的指定位置，此时的行为更像 fixed

Flexbox

flexbox

学习路径：

Grid

学习路径：

CSS Grid 是一个二维的页面布局系统，能够控制页面元素在行和列的排布。

Grid 布局特点：

A grid can be defined with rows and columns.
Direct children of the grid container will be automatically placed onto this grid.
Or, you can place the items in the precise location that you want.
Lines and areas on the grid can be named to make placement easier.
Spare space in the grid container can be distributed between the tracks.
Grid items can be aligned within their area.

Grid 术语：

Grid lines: Grid 线有水平和垂直的两种，它们共同构成 grid 格子。
Grid tracks: Grid 两条水平线/垂直线之间的格子区域就是 grid track。
Grid cell: 一个 grid cell 就是 grid tracks 的最小单位。
Grid area: 几个 grid cell 合成一个 grid area。
Gaps: Tracks 之间的分隔区域是 gap。
Grid container: 应用了 display: grid 的 HTML 元素，因此为直接子元素创建了一个新的网格格式上下文。
Grid item: Grid 容器的直接子元素。

行和列：

.container {
  display: grid;
  grid-template-columns: 5em 100px 30%;
  grid-template-rows: 200px auto;
  gap: 10px;
}

内部大小关键字：min-content, max-content, fit-content()

fr 单位只在 grid 布局中有效，描述 grid 容器中可用空间的共享。工作方式和 flexbox 中的 flex: auto; 相似。

Box Model

https://css-tricks.com/the-css-box-model/

Margin 并不影响盒子大小，但影响其他元素与盒子的交互。

盒子的大小计算方式：

Width = width + padding-left + padding-right + border-left + border-right Height = height + padding-top + padding-bottom + border-top + border-bottom

如果不声明 padding，borders，它们可能为 0（使用了 CSS reset 规则），可能是浏览器默认值。

块级盒子的默认宽度：不写明宽度，盒子会有一个静态 / 相对位置，width 是 100%，padding 和 border 是 push inwards。但如果显示设置 width 是 100%，padding 则变为 push outward。

绝对定位盒子没有宽度时：宽度是内容的宽度，直到盒子宽度达到最近的父元素（相对位置）/浏览器窗口的宽度，然后开始换行。

浮动盒子没有宽度时：The box is only as wide as it needs to be to accommodate the content, up to as wide as its parent element.

行内元素也可以是盒子。

查看页面所有盒子：

* {
  outline: 2px solid red !important;
}

Understanding Layout Algorithms

CSS 不仅仅是一系列属性的集合，它是一群相互连接的布局算法，每个算法都是一个复杂的系统，有着各自的规则和秘密机制。

布局算法包括：Flexbox、Positioned（例如 position: absolute）、Grid、Table、Flow（除去 flex、grid 以外的布局）。

.box {
  z-index: 10;
}

以上 CSS 展示的是流式布局，但是 z-index 并不起作用，因为 z-index 要配合 position 才能使用。z-index 在流式布局算法中并无实现。

Flow 是非表格元素的默认布局算法。如果在流式布局中设置宽高，那么它所表示的就是元素的实际宽高；而在 Flex 布局中，宽高则是一种假设的尺寸。

识别布局算法：

.help-widget {
  position: fixed;
  right: 0;
  bottom: 0;
}
.floated {
  float: left;
  margin-right: 32px;
}

冲突处理：当一个元素被应用多种布局时，优先级更高的布局生效。

行内魔法空格：在 Flow 布局中，图片和父元素之间出现空白，因为图片默认是 inline 元素。解决办法：

将图片设置为 display: block;
将图片设置为 display: flex;
使用 line-height: 0;（不利于可访问性）

Responsive Design

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

HTML 包含基础的响应式部分。例如，一段文字一开始位于大窗口，后来宽度变小，文字会被浏览器重新布局以适应。这叫「流体」布局。但是，当文字呈现在更窄的屏幕上时，文字呈现变得不自然。如果设定固定大小的布局，在多个屏幕上呈现会有水平滚动条，和很多被浪费掉的闲置空间。

除去「流式」布局，还有「固定宽度」构建页面方法。

在响应式设计之前的灵活布局，有根据分辨率判断布局的，等等。

「响应式设计」，由 Ethan Marcotte 第一次于 2010 年提出。有三点：

流体网格
流式图像
media query

以下是在创建响应式站点时，可能用到的技术。

一、Media Queries：Media query 根据断点（breakpoints）切换布局。一个简单相反：为窄屏设计单列内容，为宽屏设计多列内容。

二、Flexible grids：响应式站点除去「断点」，还依赖灵活的网格。使用 float 设置。

三、Modern layout tech：多列、Flexbox、Grid 布局是默认响应式的。

四、Responsive images：

img {
  max-width: 100%;
}

五、Responsive typography 响应式排版：先对根元素设置基本字体大小，再对其他元素用 rem。或者使用 vw 单位，或 calc(1.5rem + 3vw)。

六、viewport meta tag：

<meta name="viewport" content="width=device-width,initial-scale=1" />

Media Queries

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

media-type 是可以省略的，如果省略，该样式默认适用于 screen, print。

media-feature-rule 最常用于创建响应式的是宽度。有 max-width, min-width, orientation(portrait or landscape), hover。

逻辑：and、,（or）、not

断点选择：两种方式——从宽屏到窄屏，或从窄屏到宽屏（mobile first）。

Container & Style Queries

https://una.im/style-queries/

Style Queries 允许查询同页面的父元素的样式。

Container queries 能够通过查询父选择器，得到它的大小和样式信息。让子元素有自己的内在响应逻辑。

Style Queries 能力：

查询直接父级以将样式应用于子级
给不可继承的属性添加样式
选中特定父元素，为其子元素设置唯一样式（链式样式）
通过更高优先级的变量，为样式分组
CSS 中的交互
结合大小和样式查询

进一步了解：

Decoration

Background

https://developer.mozilla.org/en-US/docs/Web/CSS/background

background: linear-gradient(#223344);
background-attachment: ;
background-clip: ;
background-color: ;
background-image: ;
background-origin: ;
background-position: ;
background-repeat: ;
background-size: ;

对 html 和 body 设置 background 的区别：注意这两者之间的差异。

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

Font

https://www.cssfontstack.com/

body {
  font: italic small-caps bold 50px/2 'Indie Flower', cursive;
}

/* Same as */
body {
  font-family: "Indie Flower", cursive;
  line-height: 2;
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;
  font-size: 50px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/font#syntax

Gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

使用例子：

linear-gradient(217deg, rgba(255,0,0,0.6), rgba(255,0,0,0) 66%),
linear-gradient(127deg, rgba(0,255,0,0.6), rgba(0,255,0,0) 66%),
linear-gradient(336deg, rgba(0,0,255,0.6), rgba(0,0,255,0) 66%)

linear-gradient(to left top, rgba(111,222,255,.6), rgba(222,111,255,.6))
linear-gradient(0deg, blue, green 40%, red)
linear-gradient(.25turn, red, 10%, blue)

注意：linear-gradient() 属于 <image> 类型，无法在 background-color 上使用，只能在 background 使用。

有趣例子：

Shadow

box-shadow
text-shadow

Shapes

Refers:

各种 CSS 形状的代码示例：

矩形、圆形、椭圆形、三角形（上/下/左/右/左上/右上/左下/右下）、梯形、平行四边形、弧形尾箭头、六角星、五角星、正五边形、正六边形、正八边形、心形、无穷大形、菱形、钻石盾形、鸡蛋形、吃豆人、对话气泡、RSS Feed、12点爆发、8点爆发、阴阳、徽章丝带、太空入侵者、电视、V形、放大镜、Facebook logo、月牙、旗帜、扇形、十字、房子、有指向性的丝带、锁形、倒角。

详细 CSS 代码参见 https://css-tricks.com/the-shapes-of-css/

Transitions

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions

transition: <property> <duration> <timing-function> <delay>
transition-delay:
transition-duration:
transition-property:
transition-timing-function:

Image Rendering

<img class="nes-avatar is-large" src="https://www.gravatar.com/avatar?s=15" alt="Gravatar image example" style="image-rendering: pixelated;">

没有 ?s=15 就无法让 image-rendering: pixelated; 发挥作用。

Buttons

模板：

button {
  background: ; /* normal color: #fff or linear-gradient() */
  text-decoration: ;
}
button:hover { }

透明背景按钮、插入实体动画按钮、点击动画按钮、插入背景图片的按钮、带有 icons 的按钮。

详细代码示例参见：https://codepen.io/tianheg/

按钮相关工具：

参考资料：

CSS Button Tutorial – How to Styling HTML Buttons with CSS

Techniques

Centering

https://css-tricks.com/centering-css-complete-guide/ https://www.w3schools.com/csS/css_align.asp

水平居中：

elem { margin: 0 auto; width: 50%; }
.text { text-align: center; }
img { display: block; margin: 0 auto; }

垂直居中（块级元素 height 未知）：

.center-vertically {
  position: relative;
}
.center-vertically .child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Flexbox 垂直居中：

.center-vertically {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平 + 垂直居中（Flexbox）：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid 居中：

body, html {
  height: 100%;
  display: grid;
}
.child {
  margin: auto;
}

左右对齐：

.right { float: right; }
.left { float: left; }
.right { position: absolute; right: 0; }

Clearing boxes wrapped around a float： https://www.w3schools.com/csS/css_align.asp https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats#clearing_boxes_wrapped_around_a_float

当使用 float 时，有时内部图片会溢出到父元素之外，这时就需要一些 hack。

CSS Page Height

https://www.freecodecamp.org/news/html-page-width-height/

Setting min-height to 100% on both html and body does not allow the body element to fill the page.

理想设置：

html { height: 100%; }
body { min-height: 100%; }

现代做法：

body { min-height: 100vh; }

高度和宽度都设置：

html { background-color: #000; }
body { min-height: 100vh; max-width: 400px; background-color: papayawhip; margin: 0 auto; }

Hide Scrollbar

https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Hover on Touch Screen

触屏上的 CSS hover 问题。（Chrome Android）点击一下会选中可 hover 的文本。

@media (pointer: fine) {
  /* 鼠标设备 */
  button:hover { color: #fff; }
}
@media (pointer: coarse) {
  /* 触屏设备 */
  button:hover { color: #ddd; }
}

参考：https://medium.com/time2hack/can-i-use-hover-on-touch-devices-d9f039e24899

Reduced Motion

https://css-tricks.com/introduction-reduced-motion-media-query/

Designing Safer Web Animation For Motion Sensitivity

Text Underline Offset

https://stackoverflow.com/q/1734618/12539782

使用 text-underline-offset 增加文本和下划线之间的距离。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

One Word Adjust

当鼠标悬浮在链接上时，只改变该链接的文本的字体大小，而不影响链接文本所在段落的行高。

Demo: https://github.com/tianheg/csszengarden/blob/main/days/first-30-days/3/index.html

CSS Skills & Tips

Refers:

区块居中：.block { margin: 0 auto; }

简化的 CSS reset：

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

继承 box-sizing：

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

使用 unset 重置按钮：

button { all: unset; }

注意：all、unset 在 IE11 不受支持。

Draw with CSS

用 CSS 画画。目标：画妹妹。

CSS 学习榜样：https://github.com/cyanharlow 作品：https://diana-adrianne.com/purecss-francine/

学习模仿 demo：https://codepen.io/tag/css-drawing

Preprocessors

Sass

在 SASS 中定义属性选择器：

.bg-brand-3 {
  background-color: black;
  &[type='button']:enabled {
    &:hover { background-color: orange; }
    &:active { background-color: green; }
  }
  &[type='submit'] {
    // css
  }
}

https://stackoverflow.com/a/69444953/12539782

Resources

Learning CSS

如何学习 CSS？

系统教程：

更多资源：

CSS 知识点列表：Animations, Backgrounds and borders, Box alignment, Box model, Columns, Conditional rules, CSSOM view, Flexbox, Flow layout, Fonts, Grid, Images, Lists and counters, Logical properties, Media queries, Positioning, Scroll snap, Shapes, Text, Transforms, Transitions。

CSS frameworks: Pure

官方标准：

有用资料：