CSS The display Property

粉丝

2小时前2小时

行政经理

CSS The display Property

The CSS display Property

The display property is an important CSS property for controlling layout. It specifies whether an HTML element is treated as a block or an inline element.

Every HTML element has a default display value, depending on what type of element it is. The default display value for most elements is block or inline.

The display property is used to change the default display behavior of HTML elements.

Block-level Elements

A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Inline Elements

An inline element DOES NOT start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

<span>
<a>
<img>

Common display Values

The CSS display property has many values. The following table lists the most commonly used:

Value	Description
inline	Displays an element as an inline element
block	Displays an element as a block element
contents	Makes the container disappear, making its child elements children of the element the next level up in the DOM
flex	Displays an element as a block-level flex container
grid	Displays an element as a block-level grid container
inline-block	Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height, width, padding, and margin values
none	The element is completely hidden from the document flow (does not take up any space).

Override the Default Display Value

The display property is used to change the default display behavior of HTML elements.

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

A common example is to change <li> elements to inline, to create a horizontal menu:

Example

li {
display: inline;
}

Try it Yourself »

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

The following example displays <span> elements as block elements:

Example

span {
display: block;
}

Try it Yourself »

The following example displays <a> elements as block elements:

Example

a {
display: block;
}

Try it Yourself »

Example of More Display Values

The following example demonstrates some more display values:

Example

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display: grid;}

Try it Yourself »

★ +1

引用

参与讨论

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

粉丝

转到主题列表

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
- 2小时前2小时
- 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
- 2小时前2小时
- 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
- 2小时前2小时
- 0篇回复

CSS The display Property

推荐的帖子

CSS The display Property

The CSS display Property

Block-level Elements

Inline Elements

Common display Values

Override the Default Display Value

Example

Example

Example

Example of More Display Values

Example

参与讨论

动态

CSS Grid Items

CSS Grid Container

CSS Text Effects

24 小时内在线的用户 1

帐户

导航

搜索

配置浏览器推送通知

Chrome (安卓)

Chrome (台式电脑)

Safari (iOS 16.4+)

Safari (macOS)

Edge (安卓)

Edge (台式电脑)

Firefox (安卓)

Firefox (台式电脑)