Display mode of elements in CSS
|
In CSS, element tags are divided into two categories according to the different element display modes: inline-level elements and block-level elements. 1. First, let’s introduce what are inline elements and what are block-level elements? 1.1, Inline elements are elements that do not occupy a single line, for example: span buis strong em ins del, etc. 1.2, block-level elements are elements that occupy a single line, such as p div h ul ol dl li dt dd, etc. 2. What are the differences between inline elements and block-level elements? 2.1, inline elements will not occupy a single line, but block-level elements will occupy a single line; 2.2. The width and height of inline elements cannot be set. Their width and height will change as the text changes. Block-level elements can set width and height. If the width and height are not set, by default, the width is the same as the parent element and the height is 0; 2.3, the following example shows the difference between inline and block level by setting styles for inline element span and block level element div
<style>
span{
height: 200px;
width: 300px;
background-color: red;
font-size: 40px;
}
.father{
width: 300px;
height: 300px;
background-color: green;
margin: 100px auto;
}
.son{
background-color: blue;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display mode of CSS elements</title>
</head>
<body>
<span>I am span</span>
<div class="father">
I am father
<div class="son">I am son</div>
</div>
</body>
</html>
3. Sometimes we not only need to set the width and height of an element, but also hope that the element will not occupy a single line. In this case, inline-block elements appear. Common inline-block elements include <img>/<input>/<td>, etc. 4. How to switch the display mode of CSS elements? 4.1, Set the display attribute of the element 4.2, display value: inline (inline), block (block level), inline-block (inline block level) 4.3, the following example converts the display mode of span to block level, converts the display attribute of div to inline block level, and converts the display mode of img to block level
<style>
/*Convert span to a block-level element--*/
*{
margin: 0;
padding: 0;
}
span{
display: block;
background-color: red;
width: 400px;
height: 400px;
}
/*Convert div to inline block-level element*/
div{
display: inline-block;
background-color: green;
width: 300px;
height: 300px;
}
/*Convert img to a block-level element*/
img{
display: block;
width: 200px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display mode of CSS elements</title>
</head>
<body>
<span>I am span</span>
<div>I am div</div>
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg">
</body>
</html>
Summarize This is the end of this article about the display mode of elements in CSS. For more relevant CSS display mode content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: HTML hyperlink style (four different states) setting example
>>: Introduction to MIME encoding (integrated from online information and practical experience)
Recommend
Summary of various methods of implementing article dividing line styles with CSS
This article summarizes various ways to implement...
CSS achieves the effect of hiding the scroll bar and scrolling the content (three ways)
We often encounter this situation in front-end de...
Usage and principles of provide and inject in Vue3
Preface: When passing data between parent and chi...
JavaScript implements the drag slider puzzle verification function (html5, canvas)
introduction: Slider drag verification is now use...
Example of how to change the line spacing of HTML table
When using HTML tables, we sometimes need to chan...
Implementation of Docker deployment of Nuxt.js project
Docker official documentation: https://docs.docke...
How to upload the jar package to nexus via the web page
When using Maven to manage projects, how to uploa...
JavaScript function syntax explained
Table of contents 1. Ordinary functions 2. Arrow ...
Use Javascript to implement the function of sending SMS verification code interval
In many apps and websites, when we log in or regi...
Application of mapState idea in vuex
Table of contents 1. Map method 2. Application ba...
Linux /etc/network/interfaces configuration interface method
The /etc/network/interfaces file in Linux is used...
Detailed explanation of the use of docker tag and docker push
Docker tag detailed explanation The use of the do...
How to install MySQL using yum on Centos7 and achieve remote connection
Centos7 uses yum to install MySQL and how to achi...
How to shrink the log file in MYSQL SERVER
The transaction log records the operations on the...
Basic usage examples of Vue named slots
Preface Named slots are bound to elements using t...