Detailed explanation of display attribute of css layout

This article brings you a detailed explanation of the display attribute of css layout, so that you can understand the impact of the display attribute on css layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

We need to know that display is the most important attribute in CSS used to control layout. Each element has a default display value, which is related to the element's type. Their default values ​​are usually block or inline for most elements. A block element is usually called a block-level element. An inline element is usually called an inline element. [For more css video learning, please visit: css tutorial]

Let’s take a look at the impact of different display attribute values ​​​​on css control layout.

css block attribute value

The block element will be displayed as a block-level element with line breaks before and after the element.

Features:

1. Each block-level element starts on a new line, and subsequent elements also start on a new line. (Really overbearing, a block-level element occupies one row)

2. The height, width, line height, and top and bottom margins of the element can be set.

3. If the width of an element is not set, it is 100% of its parent container (the same as the width of the parent element), unless a width is set.

Example: div element

<div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div>
<div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div>

Rendering:

##css inline attribute value

Inline elements will be displayed as inline elements, with no line breaks before and after the element. An inline element can wrap text within a paragraph without disrupting the paragraph's layout.

Features:

1. All elements are on the same line as other elements;

2. The height, width, top and bottom margins of the element cannot be set;

3. The width of an element is the width of the text or image it contains and cannot be changed.

Example: span is a standard inline element. The a element is the most commonly used inline element and can be used as a link.

<div>测试文字，<span style="background-color: palegreen;">被span元素包围，设置span的背景颜色</span>，<a href="#">a链接</a></div>

Rendering:

##css none attribute value Another commonly used display value for css elements is none. This is the default display value of some special elements, such as script. display:none is commonly used by JavaScript to hide or show an element without removing it. (None can also be used together with block. Use display:none to hide elements, and use display:block to display hidden elements; for example: secondary navigation menu)

It is different from the visibility attribute. An element with display set to none will not take up the space it should be displayed, but with visibility: hidden; it will still take up space.

Other display attribute values ​​​​of css

There are many more interesting display values, such as inline-block and flex. We will discuss these two attribute values ​​​​in subsequent articles.

Conversion of display valuesAs discussed before, every element has a default display value. But you can rewrite it anytime, anywhere! Although it may seem confusing to "artificially create" an inline element, you can change an element with specific semantics into an inline element. A common example is: changing the default block value of the li element to an inline value to create a horizontal menu. And the conversion method is also very simple, use the statement:

display: inline;

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning. If you want to learn more about css, we recommend video learning:

css tutorial

!

The above is the detailed content of Detailed explanation of display attribute of css layout. For more information, please follow other related articles on the PHP Chinese website!