Module 02 · CSS Overview & HTML5 ElementsCSS 概述与 HTML5 元素
Advanced CSS Properties高级 CSS 属性
Estimated time: 30 minutes
预计时间：30 分钟
Introduction 引言
Cascading Style Sheets (CSS) is a language used to describe the presentation of a document written in HTML. CSS enhances the look and feel of web pages by allowing developers to apply styles to elements. This reading aims to explain various CSS properties and Flexbox properties, including their usage, examples and values, to help you build visually appealing web pages.
层叠样式表（CSS）是一种用于描述 HTML 文档表现的编程语言。CSS 通过允许开发者对元素应用样式来增强网页的外观和感觉。本阅读材料旨在解释各种 CSS 属性和 Flexbox 属性，包括它们的用法、示例和值，以帮助您构建视觉上吸引人的网页。
Objective 目标
By the end of this reading you will:
通过阅读本篇，你将：
- Gain a good understanding of various CSS properties.
掌握各种 CSS 属性的深入了解。 - Learn about Flexbox properties.
了解 Flexbox 属性。 - Understand how these properties affect HTML elements.
理解这些属性如何影响 HTML 元素。 - Learn to use these properties effectively in web designs.
学习如何在网页设计中有效地使用这些属性。
CSS Properties CSS 属性
1. text-decoration 文本装饰
Controls the decoration applied to text, such as underlines, lines above or through text.
控制应用于文本的装饰，例如下划线、上划线或贯穿文本的线条。
This property can enhance the visual emphasis of text or indicate a change in text state (like a link being visited).
该属性可以增强文本的视觉重点或指示文本状态的变化（如访问过的链接）。
- Example:
text-decoration: underline;示例：text-decoration: underline;- This applies an underline to text.
此操作为文本添加下划线。
- This applies an underline to text.
- Values: 值：
none: No decoration. 无装饰。underline: Underlines the text.
underline：下划线文本。overline: Adds a line above the text.
在文本上方添加一行。line-through: Strikes through the text.
line-through：在文本上划线。- Default value:
none默认值：none
2. font-weight 字体粗细
Specifies the thickness or boldness of the font characters.
指定字体字符的粗细或粗度。
This property is used to make text stand out by adjusting its weight, which can enhance readability or create emphasis.
此属性用于通过调整文本的粗细来使文本突出，从而增强可读性或创建强调。
- Example:
font-weight: bold;示例：font-weight: bold;- This makes the font bold.
这使得字体加粗。
- This makes the font bold.
- Values: 值：
normal: Normal weight.normal: 正常体重。bold: Bold weight.bold: 粗体字重。bolder: Bolder than the parent element.
比父元素更粗。lighter: Lighter than the parent element.
比父元素轻。100-900: Numeric values (100 is the thinnest, 900 is the thickest).
100-900: 数值（100 为最薄，900 为最厚）。- Default value:
normal默认值：normal
3. margin 边距
Sets the space around an element, outside its border. Margins create space between elements, helping to separate and organize content visually.
设置元素周围的空白区域，位于其边框之外。边距在元素之间创建空间，有助于在视觉上分隔和组织内容。
- Example:
margin: 20px;示例：margin: 20px;- This adds a 20px margin on all sides of an element.
这为元素的所有边添加了 20 像素的边距。
- This adds a 20px margin on all sides of an element.
- Values: 值：
auto: Automatically calculates the margin.
自动计算边距。length: Specifies a fixed margin (e.g., 20px).
length：指定一个固定边距（例如，20px）。percentage: Specifies a margin relative to the containing element's width.
percentage：指定相对于包含元素宽度的边距。- Default value:
0默认值：0
4. padding 填充
Sets the space inside an element, between its content and its border.
设置元素内部空间，即其内容与其边框之间的空间。
Padding increases the area within the element, creating spacing between the content and the edges of the element.
填充增加元素内的面积，在内容与元素边缘之间创建间距。
- Example:
padding: 10px;示例：padding: 10px;- This adds 10px padding inside an element.
此操作在元素内部添加了 10 像素的内边距。
- This adds 10px padding inside an element.
- Values: 值：
length: Specifies a fixed padding (e.g., 10px).
length：指定固定填充（例如，10px）。percentage: Specifies padding relative to the containing element's width.
percentage：指定相对于包含元素宽度的填充。- Default value:
0默认值：0
5. float 浮动
Specifies whether an element should float to the left or right of its container.
指定元素是否应浮动到其容器的左侧或右侧。
Floating elements are taken out of the normal document flow, allowing text and inline elements to wrap around them.
浮动元素被移出正常文档流，允许文本和内联元素围绕它们包裹。
- Example:
float: left;示例：float: left;- This makes an element float to the left.
这使元素向左浮动。
- This makes an element float to the left.
- Values: 值：
none: The element does not float.
该元素不浮动。left: The element floats to the left.
left: 元素向左浮动。right: The element floats to the right.
元素向右浮动。- Default value:
none默认值：none
6. border-radius 边框圆角
Defines the radius of the corners of an element's border box, creating rounded corners.
定义元素边框盒角落的半径，创建圆角。
This property is used to soften the appearance of boxes, buttons, and other UI elements.
此属性用于软化框、按钮和其他用户界面元素的外观。
- Example:
border-radius: 10px;示例：border-radius: 10px;- This rounds the corners of an element with a 10px radius.
此操作将元素圆角设置为 10 像素半径。
- This rounds the corners of an element with a 10px radius.
- Values: 值：
length: Specifies a fixed radius (e.g., 10px).
指定一个固定半径（例如，10px）。percentage: Specifies a radius relative to the element's dimensions.
指定相对于元素尺寸的半径。- Default value:
0默认值：0
7. width and height 宽度和高度
Sets the width and height of an element.
设置元素的宽度和高度。
These properties determine the size of the element, affecting how much space it occupies within its container.
这些属性决定了元素的大小，影响其在容器内占据的空间大小。
- Example:
width: 200px; height: 100px;示例：width: 200px; height: 100px;- This sets the width to 200px and height to 100px.
将宽度设置为 200 像素，高度设置为 100 像素。
- This sets the width to 200px and height to 100px.
- Values: 值：
auto: The browser calculates the dimension.
浏览器计算维度。length: Specifies a fixed dimension (e.g., 200px).
指定一个固定维度（例如，200px）。percentage: Specifies a dimension relative to the containing element's dimensions.
percentage：指定相对于包含元素的尺寸的维度。- Default value:
auto默认值：auto
8. position 位置
Specifies the type of positioning method used for an element.
指定元素所使用的定位方法类型。
Positioning determines how an element is placed within its containing block and how it interacts with other elements.
定位决定了元素在其包含块内的放置方式以及它与其它元素之间的交互。
- Example:
position: relative;示例：position: relative;- This sets the element's position relative to its normal position.
这设置了元素相对于其正常位置的位置。
- This sets the element's position relative to its normal position.
- Values: 值：
static: The default positioning.
static：默认定位。relative: Positioned relative to its normal position.
相对于其正常位置定位。absolute: Positioned relative to the nearest positioned ancestor.
相对于最近的定位祖先定位。fixed: Positioned relative to the browser window.
相对于浏览器窗口定位。sticky: Switches between relative and fixed based on the scroll position.
根据滚动位置在相对和固定之间切换。- Default value:
static默认值：static
Flexbox Properties 弹性盒属性
What is Flexbox? 什么是 Flexbox？
Flexbox (Flexible Box Layout) is a CSS layout module designed to align and distribute space among items in a container, even when their size is unknown or dynamic. It allows you to create complex layouts with less code and provides greater control over alignment, direction, and order of items within a container.
Flexbox（弹性盒子布局）是一个 CSS 布局模块，旨在在容器中排列和分配项目之间的空间，即使它们的尺寸未知或动态。它允许您用更少的代码创建复杂的布局，并提供了对容器内项目对齐、方向和顺序的更多控制。
1. display: flex 显示：flex
Defines an element as a flex container, enabling flexbox layout for its children.
定义一个元素为弹性容器，为其子元素启用弹性盒布局。
This property makes it possible to use flexbox properties on the child elements to control their alignment, direction, and distribution.
这一属性使得可以在子元素上使用 flexbox 属性来控制它们的对齐、方向和分布。
- Example:
display: flex;示例：display: flex;- This turns the container into a flex container.
这使容器变为弹性容器。
- This turns the container into a flex container.
- Values: 值：
flex: Turns the element into a block-level flex container.
将元素转换为块级弹性容器。inline-flex: Turns the element into an inline-level flex container.
将元素转换为内联级弹性容器。- Default value:
inline(for the display property in general)
默认值：inline（用于一般显示属性）
2. justify-content 对齐内容
Aligns flex items along the main axis, which is horizontal by default.
沿主轴对齐弹性项目，默认情况下主轴为水平。
This property helps control the distribution of space between and around flex items within a container.
这个属性有助于控制容器内和周围弹性项目之间的空间分布。
- Example:
justify-content: center;示例：justify-content: center;- This centers items along the main axis.
此操作将项目沿主轴居中。
- This centers items along the main axis.
- Values: 值：
flex-start: Aligns items at the start of the main axis.
将项目对齐到主轴的起始位置。flex-end: Aligns items at the end of the main axis.
将主轴末尾的项目对齐。center: Centers items along the main axis.
沿主轴居中项目。space-between: Distributes items evenly with the first item at the start and the last item at the end.
将项目均匀分布，第一个项目在开头，最后一个项目在结尾。space-around: Distributes items evenly with equal space around them.
将项目均匀分布，周围空间相等。space-evenly: Distributes items evenly with equal space between them.
将项目均匀分布，项目之间间隔相等。- Default value:
flex-start默认值：flex-start
3. flex-direction
Defines the direction in which flex items are placed within the flex container.
定义了弹性项目在弹性容器内的放置方向。
This property determines whether the items are displayed in rows or columns, and can also reverse the order.
此属性决定项目是以行或列形式显示，还可以反转顺序。
- Example:
flex-direction: column;示例：flex-direction: column;- This arranges items in a column.
将项目排列成列。
- This arranges items in a column.
- Values: 值：
row: Default direction, items are placed in a row.
默认方向，项目按行排列。row-reverse: Items are placed in a row in reverse order.
物品以逆序排列在一行中。column: Items are placed in a column.
物品放置在列中。column-reverse: Items are placed in a column in reverse order.
项目以倒序方式放置在列中。- Default value:
row默认值：row
4. flex-wrap（弹性换行）
Specifies whether flex items should wrap onto multiple lines when they overflow the container.
指定当弹性项目溢出容器时是否应该换行。
This property helps manage the layout when there are too many items to fit in one line.
此属性有助于管理在一行中无法容纳过多项目时的布局。
- Example:
flex-wrap: wrap;示例：flex-wrap: wrap;- This allows items to wrap onto multiple lines if necessary.
这允许项目在必要时换行。
- This allows items to wrap onto multiple lines if necessary.
- Values: 值：
nowrap: Items do not wrap.
nowrap: 项目不换行。wrap: Items wrap onto multiple lines.
wrap: 项目换行到多行。wrap-reverse: Items wrap onto multiple lines in reverse order.
项目以相反的顺序换行。- Default value:
nowrap默认值：nowrap
5. align-items 对齐项目
Aligns flex items along the cross-axis, which is vertical by default.
沿交叉轴对齐弹性项目，默认为垂直。
This property is used to control the alignment of items within the flex container's cross-direction.
此属性用于控制弹性容器交叉方向内项目对齐。
- Example:
align-items: stretch;示例：align-items: stretch;- This stretches items to fill the container's cross-axis.
这会将项目拉伸以填充容器的交叉轴。
- This stretches items to fill the container's cross-axis.
- Values: 值：
flex-start: Aligns items at the start of the cross-axis.
flex-start：沿交叉轴起始位置对齐项目。flex-end: Aligns items at the end of the cross-axis.
使交叉轴末尾的项目对齐。center: Centers items along the cross-axis.
沿交叉轴居中项目。baseline: Aligns items' baselines.
对齐项目基线。stretch: Stretches items to fill the container.
将项目拉伸以填充容器。- Default value:
stretch默认值：stretch
6. align-self 对齐自身
Aligns a single flex item along the cross-axis within its flex container.
使单个弹性项目在其弹性容器内沿交叉轴对齐。
This property allows individual items to override the alignment set by align-items.
此属性允许单个项目覆盖由 align-items 设置的排列方式。
- Example:
align-self: center;示例：align-self: center;- This centers the item within its flex container along the cross-axis.
此操作将项目在其 flex 容器中沿交叉轴居中。
- This centers the item within its flex container along the cross-axis.
- Values: 值：
auto: Inherits the alignment from the parent container.
继承父容器对齐方式。flex-start: Aligns the item at the start of the cross-axis.
flex-start：将项目对齐到交叉轴的起始位置。flex-end: Aligns the item at the end of the cross-axis.
将项目对齐到交叉轴的末尾。center: Centers the item along the cross-axis.
沿交叉轴居中项目。baseline: Aligns the item's baseline with the parent’s baseline.
将项目基线与父基线对齐。stretch: Stretches the item to fill the container.
将项目拉伸以填充容器。- Default value:
auto默认值：auto
7. flex-flow
Shorthand property for flex-direction and flex-wrap.
简写属性为 flex-direction 和 flex-wrap 。
This property combines both the direction and wrapping behavior into a single declaration.
该属性将方向和换行行为合并为一个声明。
- Example:
flex-flow: row wrap;示例：flex-flow: row wrap;- This arranges items in a row and allows them to wrap onto multiple lines.
将项目排列成一行，并允许它们换行显示。
- This arranges items in a row and allows them to wrap onto multiple lines.
- Values: 值：
- Combines values for
flex-directionandflex-wrap.
合并flex-direction和flex-wrap的值。 - Default value:
row nowrap默认值：row nowrap
- Combines values for
8. justify-self
Aligns an individual flex item along the main axis.
沿主轴对单个弹性项进行对齐。
This property affects the alignment of a single item relative to its container's main axis.
此属性影响单个项目相对于其容器主轴的对齐方式。
- Example:
justify-self: center;示例：justify-self: center;- This centers a single item within its flex container along the main axis.
此操作将单个项目沿主轴在其弹性容器内居中。
- This centers a single item within its flex container along the main axis.
- Values: 值：
auto: Inherits the alignment from the parent container.
继承父容器对齐方式。flex-start: Aligns the item at the start of the main axis.
将项目对齐到主轴的起始位置。flex-end: Aligns the item at the end of the main axis.
将项目对齐到主轴的末端。center: Centers the item along the main axis.
沿主轴居中项目。baseline: Aligns the item's baseline with the parent's baseline.
将项目基线与父基线对齐。stretch: Stretches the item to fill the container.
将项目拉伸以填充容器。- Default value:
auto默认值：auto
Summary 摘要
CSS properties control the presentation of HTML elements on a web page. Understanding and using these properties correctly allows you to create visually appealing and well-structured web pages. Flexbox provides a powerful layout system to arrange and align items within a container efficiently, making it easier to design responsive and flexible layouts.
CSS 属性控制网页上 HTML 元素的表现。正确理解和使用这些属性可以使您创建出视觉上吸引人且结构良好的网页。Flexbox 提供了一种强大的布局系统，用于高效地排列和定位容器内的项目，这使得设计响应式和灵活的布局更加容易。