How to use display in css-CSS Tutorial-php.cn

How to use display in css

清浅

Release： 2018-11-21 14:13:56

Original

10973 people have browsed it

Display commonly used attribute values are block-level block, row-level inline, row-block-level inline-block, none, and row-level or block-level labels can be converted through display

This article will share the display attribute in CSS, which has certain reference value. I hope it will be helpful to everyone

We usually use the values block, none, inline, and inline in the display attribute when making CSS layouts. -block So today we will learn how to use them

display attribute

The display attribute can have multiple values, but the commonly used ones are as follows

none: This element will not be displayed.

block: This element will be displayed as a block-level element, with line breaks before and after this element.

inline: This element will be displayed as an inline element, with no line breaks before and after the element.

inline-block: Inline block element, which has both block-level attributes and row-level attributes.

So in this article, I will introduce in detail block, inline, inline-block and none, these commonly used attribute values

display: block

Features: Occupies one line by itself, the width and height can be changed through CSS

Commonly used block-level elements: div, p, ul, li, ol, form, address

display ：inline

Features: The content determines the size, and the width and height cannot be changed through CSS

Commonly used row-level elements: span, strong, em, a, del

<style>
	div{
		background-color: pink;
	}
	span{
		background-color: yellow;
	}
	</style>
</head>
<body>		
	<div>123</div>//块级元素
 <p><span class="span">hello</span>world</p>//行级元素

Copy after login

As shown in the picture above, you can see that the block element occupies the full width of the line. If you think of it as width:100%, the following content should start with a new line.

And the row-level element only displays its own part. The content does not occupy a row

Rendering

Image 13.jpg

Row block-level element conversion

(1) Convert block-level elements to row-level elements

Set display: inline for block-level elements

The result is like this

Image 15.jpg

(2) Row level Convert elements to block level

Set display:block for row-level elements

The result is as follows

Image 16.jpg

display:inline-block

Common inline block elements: img, input

Features: The content determines the size, and the width and height can be changed

<style>
	span{
		background-color: yellow;
		display:inline-block;//设置行块级元素
		width:100px;
		height:30px;
	}
	</style>
</head>
<body>		
 <p><span class="span">hello</span>world</p>

Copy after login

Rendering

The difference between display: none and visibility: hidden

display: none is used to hide elements, which is not only invisible but also takes up no space. Size

visibility: hidden can also be used to hide elements, but they still exist even if they are not visible, leaving an empty space

Example

display:none

 .span{
   background-color: aquamarine;
  display:none;}
	</style>
</head>
<body>		
 <p><span class="span">hello</span>world</p>

Copy after login

Rendering

Image 12.jpg

hello is hidden but does not leave any space

visibility: hidden

<style>
 .span{
  background-color: pink;
   visibility: hidden;}
</style>
</head>
<body>
 <p><span class="span">hello</span>world</p>

Copy after login

Effect Picture

Image 11.jpg

hello is hidden but still has a vacant position

Summary: The above is the entire content of this article. I hope it will be useful for everyone to learn display. help

The above is the detailed content of How to use display in css. For more information, please follow other related articles on the PHP Chinese website!