Home  >  Article  >  Web Front-end  >  Detailed explanation of the usage of four common attribute values ​​in css display attribute (code example)

Detailed explanation of the usage of four common attribute values ​​in css display attribute (code example)

青灯夜游
青灯夜游Original
2018-09-07 14:00:505387browse

When we develop web front-end, in order to make the website more visually beautiful and richer in effect, the powerful properties of css naturally play an indispensable role. So here we will mention an attribute we often use when developing web front-ends, css display attribute. All major browsers support the display attribute. Secondly, we all know that the display attribute specifies the type of box that the element should generate. It is often used in the CSS display attribute, and it is also the most common attribute value: none, block, inline, inline-blockt.

Next, we will explain in detail the most common attribute value usage in the css display attribute through specific code examples.

1: display: none, the setting element will not be displayed

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css display:none</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.demo{
				width: 200px;
				height: 200px;
				margin:50px auto;
			}
			
			ul li {
				float: left;
			}
			
			span {
				width: 30px;
				height: 30px;
				color: #fff;
				background: red;
				margin: 5px;
				text-align: center;
				line-height: 30px;
			}
			.a1{
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>数字2不会显示出来</p>
			<ul>
				<li>
					<span>1</span>
				</li>
				<li>
					<span class="a1">2</span>
				</li>
				<li>
					<span>3</span>
				</li>
				<li>
					<span>4</span>
				</li>
				<li>
					<span>5</span>
				</li>
			</ul>
		</div>
	</body>

</html>

The rendering of the above code is as follows:

Detailed explanation of the usage of four common attribute values ​​in css display attribute (code example)

display: none, the set element will not be displayed, and the space that will make the element realistic will not be retained. But there is another visibility: hidden, which retains the space of the element. To learn more, read css visibility property.

2: display:block, display the element as a block-level element

Display the element as a block-level element, with line breaks before and after the element. After setting it to block, the element can set width and height. Elements occupy their own line.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css display:block</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.demo{
				width: 500px;
				height: 200px;
				margin:50px auto;
			}
			
			ul li {
				float: left;
			}
			
			span {
				display:block; 
				width: 30px;
				height: 30px;
				color: #fff;
				background: red;
				margin: 5px;
				text-align: center;
				line-height: 30px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>span元素定义了宽与高,宽与高都显示为30px</p>
			<ul>
				<li>
					<span>1</span>
				</li>
				<li>
					<span>2</span>
				</li>
				<li>
					<span>3</span>
				</li>
				<li>
					<span>4</span>
				</li>
				<li>
					<span>5</span>
				</li>
			</ul>
		</div>
	</body>

</html>

The rendering of the above code is as follows:

Detailed explanation of the usage of four common attribute values ​​in css display attribute (code example)

The width and height of the span tag are displayed as 30px. When we remove the display:block in the code, the displayed rendering is as follows:

Detailed explanation of the usage of four common attribute values ​​in css display attribute (code example)


Obviously, when we After display:block is removed, the height and width of span cannot be set.

The span tag is an inline element. You cannot set the height, width, top, bottom, left, and right margins, padding, and margin of the element. However, when display:block is set for the span tag, the inline element can be converted into a block. element, so that you can set the element's height, width, top, bottom, left, and right margins, padding, and margin.

Three: display:inline, displays the element as an inline element

The default attribute of display. Displays the element as an inline element with no line breaks before or after the element. We know that the width and height of inline elements cannot be set, so once the display attribute of the element is set to inline, setting the attributes height and width is useless. At this time, the height that affects it is generally the height (font-size) and padding of the internal elements.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css display:block</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.demo{
				width: 1000px;
				height: 200px;
				margin:50px auto;
			}
			.demo p{
				display:inline ;
				color: #0081EF;
			}
			.demo div{
				display:inline ;
				color: #70DBDB;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>p标签和div标签同为块状元素,本应无法在同一行显示;</p>
			<div>此时全为内联元素,不换行,在同一行显示。</div>
		</div>
	</body>

</html>

The rendering of the above code is as follows:

Detailed explanation of the usage of four common attribute values ​​in css display attribute (code example)

Four: inline-block, display the element as an inline block element

Inline block elements. This attribute value combines the characteristics of inline and block. You can combine inline and block to understand inline-block, that is, it is an inline element, can be displayed on the same line, and can set width and height.

The above is a detailed introduction to the usage of common attribute values ​​​​in the css display attribute, including specific usage examples of none, block, inline, and inline-block. It has certain reference value and I hope it will be helpful to friends in need!


The above is the detailed content of Detailed explanation of the usage of four common attribute values ​​in css display attribute (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn