跳转到帖子

在手机APP中查看

一个更好的浏览方法。了解更多。

OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP

在Safari中轻敲分享图标
滚动菜单并轻敲添加到主屏幕。
轻敲右上角的添加按钮。

在安卓上安装此APP

轻敲浏览器右上角的三个点菜单 (⋮) 。
轻敲添加到主屏幕或安装APP。
轻敲安装进行确认。

OKCCN - XenForo & IPS Plugin Marketplace

OKCCN - XenForo & IPS Plugin Marketplace

OKCCN - XenForo & IPS Plugin Marketplace

OKCCN - XenForo & IPS Plugin Marketplace

OKCCN - XenForo & IPS Plugin Marketplace

OKCCN - XenForo & IPS Plugin Marketplace

登录

电子邮件地址

密码

记住我
不推荐在公共电脑上启用

忘记密码？

或使用以下方法登录
注册
选择语言

CSS Grid Container

粉丝

3小时前3小时

行政经理

CSS Grid Container

CSS Grid Container

A grid container contains one or more grid items arranged in columns and rows.

All direct child elements of a grid container automatically become grid items.

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

1

2

3

4

5

Try it Yourself »

Display Grid Property

The <div> element becomes a grid container when its display property is set to grid or inline-grid.

Example

Use display: grid to make a block-level grid container:

.container {
display: grid;
}

Result:

1

2

3

4

5

Try it Yourself »

Example

Use display: inline-grid to make an inline grid container:

.container {
display: inline-grid;
}

Result:

1

2

3

4

5

Try it Yourself »

CSS Grid Container Properties

Property	Description
align-content	Vertically aligns the grid items inside the container
align-items	Specifies the default alignment for items inside a flexbox or grid container
display	Specifies the display behavior (the type of rendering box) of an element
column-gap	Specifies the gap between the columns
gap	A shorthand property for the row-gap and the column-gap properties
grid	A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-auto-columns	Specifies a default column size
grid-auto-flow	Specifies how auto-placed items are inserted in the grid
grid-auto-rows	Specifies a default row size
grid-template	A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas	Specifies how to display columns and rows, using named grid items
grid-template-columns	Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows	Specifies the size of the rows in a grid layout
justify-content	Horizontally aligns the grid items inside the container
place-content	A shorthand property for the align-content and the justify-content properties
row-gap	Specifies the gap between the grid rows

★ +1

Sign in to track progress

引用

参与讨论

你可立刻发布并稍后注册。如果你有帐户，立刻登录发布帖子。

转到主题列表

CSS Grid Items
CSS Grid Items

Cavalry发布主题在教程

CSS Grid Items CSS Grid Items A grid container contains one or more grid items. All direct child elements of a grid container automatically become grid items. Below is a grid container with five grid items: 1 2 3 4 5 Try it Yourself » CSS Sizing/Spanning Grid Items A grid item can span over mulitiple columns or rows. We can specify where to start and end a grid item by using the following properties: grid-column-start - Specifies on which column-line the grid item will start grid-column-end - Specifies on which column-line the grid item will end grid-column - Shorthand property for grid-column-start and grid-column-end grid-row-start - Specifies on which row-line the grid item will start grid-row-end - Specifies on which row-line the grid item will end grid-row - Shorthand property for grid-row-start and grid-row-end The lines between the columns in a grid are called column-lines, and the lines between the rows in a grid are called row-lines. We can refer to line numbers when placing a grid item in a grid container. CSS grid-column-start and grid-column-end The grid-column-start property specifies on which column-line the grid item will start. The grid-column-end property specifies on which column-line the grid item will end. Example Let the first grid item start at column-line 1, and end on column-line 3: .item1 { grid-column-start: 1; grid-column-end: 3; } Result: 1 2 3 4 5 Try it Yourself » The CSS grid-column Property The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties. Example Let the first grid item start at column-line 1, and let it span 2 columns: .item1 { grid-column: 1 / span 2; } Result: 1 2 3 4 5 Try it Yourself » CSS grid-row-start and grid-row-end The grid-row-start property specifies on which row-line the grid item will start. The grid-row-end property specifies on which row-line the grid item will end. Example Let the first grid item start at row-line 1, and end on row-line 3: .item1 { grid-row-start: 1; grid-row-end: 3; } Result: 1 2 3 4 5 Try it Yourself » The CSS grid-row Property The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties. Example Let the first grid item start at row-line 1, and let it span 2 rows: .item1 { grid-row: 1 / span 2; } Result: 1 2 3 4 5 Try it Yourself » Combine grid-column and grid-row Here we use both the grid-column and grid-row properties to let a grid item span both columns and rows. Example Let the first grid item start at column-line 1, and let it span 2 columns, also let the first grid item start at row-line 1, and let it span 2 rows: .item1 { grid-column: 1 / span 2; grid-row: 1 / span 2; } Result: 1 2 3 4 5 6 Try it Yourself » All CSS Grid Item Properties Property Description align-self Aligns the content for a specific grid item along the column axis grid-area A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties grid-column A shorthand property for the grid-column-start and the grid-column-end properties grid-column-end Specifies where to end the grid item grid-column-start Specifies where to start the grid item grid-row A shorthand property for the grid-row-start and the grid-row-end properties grid-row-end Specifies where to end the grid item grid-row-start Specifies where to start the grid item justify-self Aligns the content for a specific grid item along the row axis place-self A shorthand property for the align-self and the justify-self properties ★ +1 Sign in to track progress
- 3小时前3小时
- 0篇回复
CSS Grid Container
CSS Grid Container

Cavalry发布主题在教程

CSS Grid Container CSS Grid Container A grid container contains one or more grid items arranged in columns and rows. All direct child elements of a grid container automatically become grid items. An element becomes a grid container when its display property is set to grid or inline-grid. 1 2 3 4 5 Try it Yourself » Display Grid Property The <div> element becomes a grid container when its display property is set to grid or inline-grid. Example Use display: grid to make a block-level grid container: .container { display: grid; } Result: 1 2 3 4 5 Try it Yourself » Example Use display: inline-grid to make an inline grid container: .container { display: inline-grid; } Result: 1 2 3 4 5 Try it Yourself » CSS Grid Container Properties Property Description align-content Vertically aligns the grid items inside the container align-items Specifies the default alignment for items inside a flexbox or grid container display Specifies the display behavior (the type of rendering box) of an element column-gap Specifies the gap between the columns gap A shorthand property for the row-gap and the column-gap properties grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-auto-columns Specifies a default column size grid-auto-flow Specifies how auto-placed items are inserted in the grid grid-auto-rows Specifies a default row size grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties grid-template-areas Specifies how to display columns and rows, using named grid items grid-template-columns Specifies the size of the columns, and how many columns in a grid layout grid-template-rows Specifies the size of the rows in a grid layout justify-content Horizontally aligns the grid items inside the container place-content A shorthand property for the align-content and the justify-content properties row-gap Specifies the gap between the grid rows ★ +1 Sign in to track progress
- 3小时前3小时
- 0篇回复
CSS Text Effects
CSS Text Effects

Cavalry发布主题在教程

CSS Text Effects CSS Text Effects CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes. In this chapter you will learn about the following properties: text-overflow - Specifies how to handle overflowed content word-wrap - Allows long words to be able to be broken and wrap onto the next line word-break - Specifies line breaking rules writing-mode - Specifies whether lines of text are laid out horizontally or vertically CSS text-overflow Property The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped or rendered with ellipsis (...). Both of the following properties are required for text-overflow to take effect: white-space: nowrap; overflow: hidden; Here, the overflowed content is clipped: This is some long text that will not fit in the box Here, the overflowed content is rendered with ellipsis (...): This is some long text that will not fit in the box The CSS code is as follows: Example p.test1 { width: 200px; border: 1px solid #000000; white-space: nowrap; overflow: hidden; text-overflow: clip; } p.test2 { width: 200px; border: 1px solid #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Try it Yourself » The following example shows how you can display the overflowed content when hovering over the element: Example p:hover { overflow: visible; } Try it Yourself » CSS word-wrap Property The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line. If a word is too long to fit within an area, it expands outside: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. The CSS code is as follows: Example Allow long words to be able to be broken and wrap onto the next line: p { word-wrap: break-word; } Try it Yourself » CSS word-break Property The CSS word-break property specifies how words should break when reaching the end of a line. This property can take one of the following values: normal - This is default. Uses the default line breaking rules of the language break-all - Allows words to be broken at any character to prevent overflow keep-all - Prevents words from breaking Here, we use normal: This paragraph contains some text. This line will-break-at-hyphens. Here, we use break-all: This paragraph contains some text. The lines will break at any character. The CSS code is as follows: Example p.test1 { word-break: normal; } p.test2 { word-break: break-all; } Try it Yourself » CSS writing-mode Property The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically. This property can take one of the following values: horizontal-tb - Default. The text flows horizontally from left to right, vertically from top to bottom vertical-rl - The text flows vertically from top to bottom, horizontally from right to left vertical-lr - The text flows vertically from top to bottom, horizontally from left to right Here is a text with a span element with a vertical-rl writing-mode. The following example shows some different writing modes: Example p.test1 { writing-mode: horizontal-tb; } span { writing-mode: vertical-rl; } p.test2 { writing-mode: vertical-rl; } Try it Yourself » CSS Text Effect Properties The following table lists the CSS text effect properties: Property Description text-justify Specifies how justified text should be aligned and spaced text-overflow Specifies how overflowed content that is not displayed should be signaled to the user word-break Specifies line breaking rules for non-CJK scripts word-wrap Allows long words to be able to be broken and wrap onto the next line writing-mode Specifies whether lines of text are laid out horizontally or vertically ★ +1 Sign in to track progress
- 3小时前3小时
- 0篇回复

Cavalry

258 总帖子数
251 总主题数
27 会员总数
178 最高在线
NocturneMax 最新会员 · 2月26日2月26日

位置:

搜索:

创建日期:

使用:

最后更新:

Chrome (安卓)

轻敲地址栏旁的锁形图标。
轻敲权限 → 通知。
调整你的偏好。

Chrome (台式电脑)

点击地址栏中的挂锁图标。
选择网站设置。
找到通知选项并调整你的偏好。