我很早学过，只是当时没有系统记录笔记，导致过一段时就容易忘记很多东西。本笔记主要参考 CSS 基础&进阶-千古前端图文教程，W3C School - CSS，MDN web docs - CSS

H1Selectors

H2Basic selectors

H3Universal selector

Syntax: *

H3Type selector

Syntax: elementname

H3Class selector

Syntax: .classname

H3ID selector

Syntax: #idname

H3Attribute selector

Syntax: [attr]、[attr=value]、[attr~=value]、[attr|=value]、[attr^=value]、[attr$=value]、[attr*=value]

H2Grouping selectors

H3Selector list

Syntax: A, B

H3Child combinator

Syntax: A > B

H3General sibling combinator

Syntax: A ~ B

H3Adjacent sibling combinator

Syntax: A + B

H1Value

H2max-content

The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows. 人话说就是内容的最大宽度。

H1Property

H2background

This property is a shorthand for the following CSS properties:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

Syntax: background: [color] [image] [repeat] [attachment] [position] / [size] [origin] [clip];

Example: background: #f1f1f1 url("img_hotgirl.png") no-repeat right top / 150px 100px content-box border-box;

Note:

The <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%".

H2inset

The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.

H2transform-origin

The transform-origin CSS property sets the origin for an element's transformations.

默认情况下，转换的原点是center.

Syntax:

x-offset/x-offset-keyword | y-offset/y-offset-keyword | z-offset/z-offset-keyword

H2text-align

The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in a horizontal direction.

H2text-transform

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

H2zoom

它在改变元素大小的同时，也会改变其占位大小，这可以和 scale 区别开来。但 MDN 文档 显示此特性是非标准，所以还是建议使用 scale。

H2gap

Flex 和 Grid 布局都适用

H2aspect-ratio

The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box.

H1By Tags

H2Textarea

H3resize

可以用 resize 来控制 textarea 的缩放行为。

H2ul, ol, li

H3list-style-position

控制 li 左侧的点的位置，下面的是用来让点点显示在内容区域内部。

H1Pseudo-classes 伪类

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

H2:focus

The :focus represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

H1Pseudo-elements 伪元素

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

H2::after

::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content（装饰性内容）to an element with the content property. It is inline by default.

比如下例就是给一段文字右侧加上一个好的标志：

H2::before

同上，一般常见用法是在链接前加上一个 🔗 符号。

H1At-rules @

H2@media

The @media rule is used in media queries to apply different styles for different media types/devices. The screen keyword is the default value, so when it's not explicitly specified, the browser assumes it to be a screen media type.

Six standard screen widths: 320 px, 480 px, 760 px, 960 px, 1200 px, 1600 px.

H1Units 单位

H2rem, em

em and rem are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text.

The em unit means "my parent element's font-size". Each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

The rem unit means "The root element's font-size". This means that each successive level of nesting does not keep getting larger.

However, if you change the <html> element's font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

简而言之，em 是父亲元素的相对大小，rem 是根结点元素的相对大小。

H2fr

这个单位专门为 grid 设计。The new fr unit represents a fraction of the available space in the grid container.

The following grid definition would create three equal-width tracks that grow and shrink according to the available space.

H1Flex

H2Flex Container

The flex container becomes flexible by setting the display property to flex:

Example:

The flex container properties are:

H3Property: flex-direction

The flex-direction property defines in which direction the container wants to stack（堆叠） the flex items.

H4Value: column

The column value stacks the flex items vertically (from top to bottom)

H4Value: column-reverse

The column-reverse value stacks the flex items vertically (but from bottom to top)

H4Value: row (default)

The row value stacks the flex items horizontally (from left to right)

H4Value: row-reverse

The row-reverse value stacks the flex items horizontally (but from right to left)

H3Property: flex-wrap

The flex-wrap property specifies whether the flex items should wrap or not.

H4Value: wrap

The wrap value specifies that the flex items will wrap if necessary:

H4Value: nowrap (default)

The nowrap value specifies that the flex items will not wrap (this is default)

H4Value: wrap-reverse

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order.

H3Property: flex-flow

The flex-flow property is a shorthand（速记，简单表达方式） property for setting both the flex-direction and flex-wrap properties.

Example:

H3Property: justify-content

The justify-content property is used to align the flex items horizontally.

H4Value: center

The center value aligns the flex items at the center of the container:

H4Value: flex-start (default)

The flex-start value aligns the flex items at the beginning of the container (this is default)

H4Value: flex-end

The flex-end value aligns the flex items at the end of the container

H4Value: space-around

The space-around value displays the flex items with space before, between, and after the lines.

H4Value: space-between

The space-between value displays the flex items with space between the lines.

H3Property: align-items

The align-items property is used to align（对齐，使成一条线） the flex items vertically.

H4Value: center

The center value aligns the flex items in the middle of the container:

在 Flex 容器里的图片尺寸会有点拉伸，加上align-items: center;即可

H4Value: flex-start

The flex-start value aligns the flex items at the top of the container.

H4Value: flex-end

The flex-end value aligns the flex items at the bottom of the container.

H4Value: stretch

The stretch value stretches the flex items to fill the container (this is default). If you set it a height, it won't fill the container.

H4Value: baseline

The baseline value aligns the flex items such as their baselines aligns.

H3Property: align-content

The align-content property is used to align the flex lines.

H4Value: space-between

The space-between value displays the flex lines with equal space between them:

H4Value: space-around

The space-around value displays the flex lines with space before, between, and after them.

H4Value: stretch

The stretch value stretches the flex lines to take up the remaining space (this is default).

H4Value: center

The center value displays display the flex lines in the middle of the container.

H4Value: flex-start

The flex-start value displays the flex lines at the start of the container.

H4Value: flex-end

The flex-end value displays the flex lines at the end of the container.

H2Flex Items

The following table lists all the CSS Flexbox Items properties:

H3Property: order

The order property specifies the order of the flex items.

The order value must be a number, default value is 0.

Example:

The order property can change the order of the flex items:

H3Property: flex-grow

场景举例：最后一个元素想占剩余所有位置，可设置成 1

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.（相当于给 item 加上宽度权重，权重越大，宽度等比变大）

The value must be a number, default value is 0.（inc. percentage）

Example:

Make the third flex item grow eight times faster than the other flex items:

H3Property: flex-shrink

场景举例：视窗变窄了，但某元素不想缩窄，可设置成 0

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

The value must be a number, default value is 1.

Example:

Do not let the third flex item shrink as much as the other flex items:

H3Property: flex-basis

The flex-basis property specifies the initial length of a flex item.（这只是初始长度，但随着 items 变多，宽度也会受到一定压缩）

Example:

Set the initial length of the third flex item to 200 pixels:

H3Property: flex

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

Example:

Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:（不伸长，也不缩短，始终保持 200px 的宽度）

H3Property: align-self

The align-self property specifies the alignment for the selected item inside the flexible container.（针对某个 item，而不是全部）

The align-self property overrides the default alignment set by the container's align-items property.

Example:

Align the third flex item in the middle of the container:

H2Flex Responsive 弹性响应

For example, if you want to create a two-column layout for most screen sizes, and a one-column layout for small screen sizes (such as phones and tablets), you can change the flex-direction from row to column at a specific breakpoint (800px in the example below):

Example:

Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex-wrap: wrap; on the flex container for this example to work:

Example:

H1Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

All CSS Grid Properties:

H2Grid Intro

A grid layout consists of a parent element, with one or more child elements. And all direct children of the grid container automatically become grid items.

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

Example:

H3Properties: row-gap, column-gap, gap

Rows: The horizontal lines of grid items.

Columns: The vertical lines of grid items.

Gaps: The spaces between each column/row.

You can adjust the gap size by using one of the following properties:

• row-gap
• column-gap
• gap: shorthand property for the row-gap and the column-gap properties

Example:

H3Properties: grid-row-start, grid-row-end, grid-column-start, grid-column-end

Row lines: The lines between rows.

Column lines: The lines between columns.

Refer to line numbers when placing a grid item in a grid container.

Example:

Place a grid item at row line 1 and column line 1, and let it end on row line 3 and column line 3:

H2Grid Container

H3Property: grid-template-columns

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.（定义 多少列 + 各列宽度）

The value is a space-separated-list（以空格分隔的列表）, where each value defines the width of the respective column.

Example:

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or auto if all columns should have the same width.

Note: If you have more than 4 items in a 4 columns grid, the grid will automatically add a new row to put the items in.

The grid-template-columns property can also be used to specify the size (width) of the columns.

Example:

H3Property: grid-template-rows

The grid-template-rows property defines the height of each row.

The value is a space-separated-list, where each value defines the height of the respective row:

Example:

H3Property: justify-content

The justify-content property is used to align the whole grid inside the container horizontally.

Note: The grid's total width has to be less than the container's width for the justify-content property to have any effect.

H4Value: space-evenly

The value space-evenly will give the columns equal amount of space between, and around them.

Example:

H4Value: space-around

The value space-around will give the columns equal amount of space around them.

H4Value: space-between

The value space-between will give the columns equal amount of space between them.

H4Value: center

The value center will align the grid in the middle of the container.

H4Value: start

The value start will align the grid at the beginning of the container.

H4Value: end

The value end will align the grid at the end of the container.

H3Property: align-content

The align-content property is used to align the whole grid inside the container vertically.

Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.

H4Value: space-evenly

H4Value: space-around

H4Value: space-between

H4Value: center

H4Value: start

H4Value: end

H3Property: grid-auto-rows

It can specifies a default row size.

Note: minmax(min, max) 是 CSS Grid 布局中的一个函数，它可以让我们设置一个长度范围，这个函数可以用于定义网格项目的大小，尤其是在我们不知道网格项目具体大小时非常有用。

H3Property: grid-auto-columns

同上

H2Grid Item

H3Property: grid-row

The grid-row property defines on which row to place an item.

The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many rows the item will span:

Example:

Make "item1" start on row-line 1 and end on row-line 4:

Make "item1" start on row 1 and span 2 rows:

H3Property: grid-column

The grid-column property defines on which column(s) to place an item.

The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span.

Example:

Make "item1" start on column 1 and end before column 5:

Make "item1" start on column 1 and span 3 columns:

H3⭐Property: grid-area

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Example:

Make "item8" start on row-line 1 and column-line 2, and end on row-line 5 and column line 6:

Make "item8" start on row-line 2 and column-line 1, and span 2 rows and 3 columns:

H3Property: grid-template-areas

The grid-area property can also be used to assign names to grid items.

Example:

Item1 gets the name "myArea" and spans all five columns in a five columns grid layout:

Let "myArea" span two columns in a five columns grid layout:

Note: A period sign represents a grid item with no name.

To define two rows, define the column of the second row inside another set of apostrophes（撇号）:

Name all items, and make a ready-to-use webpage template:

由此可知，grid-template-areas可以用于形象化显示每个 item 的占位

H1Animations

An animation lets an element gradually change from one style to another.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

H2@keyframes、animation-name、animation-duration

To get an animation to work, you must bind the animation to an element.

It's also possible to use percent:

If you like to add more than one style:

H2Property: animation-delay

The animation-delay property specifies a delay for the start of an animation.

Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds. 一般没有人会用负数吧，好不容易写好的动画，你搁这直接跳过几秒？

H2Property: animation-iteration-count

The animation-iteration-count property specifies the number of times an animation should run.

You can also use the value "infinite" to make the animation continue forever.

H2Property: animation-direction

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:

• normal - The animation is played as normal (forwards). This is default
• reverse - The animation is played in reverse direction (backwards)
• alternate - The animation is played forwards first, then backwards
• alternate-reverse - The animation is played backwards first, then forwards

H2Property: animation-timing-function

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

• ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
• linear - Specifies an animation with the same speed from start to end
• ease-in - Specifies an animation with a slow start
• ease-out - Specifies an animation with a slow end
• ease-in-out - Specifies an animation with a slow start and end
• cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

H2Property: animation-fill-mode

animation-fill-mode 将指定目标元素在动画播放前/后/两者都保持的样式。

The animation-fill-mode property can have the following values:

• none - Default value. Animation will not apply any styles to the element before or after it is executing
• forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
• backwards - The element will get the style values that are set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
• both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

下面例子指的是 div 元素保持动画后的样式：

H2Animation Shorthand Property

The same animation effect as above can be achieved by using the shorthand animation property:

H2Property: animation-play-state

The animation-play-state CSS property sets whether an animation is running or paused.