A brief analysis of how to use border and display attributes in CSS
|
Introduction to border properties
The border line type attribute value description table is as follows: |
| Attributes | describe |
|---|---|
| none | Defines no border. |
| hidden | Same as "none". The exception is when applied to tables, where hidden is used to resolve border conflicts. |
| dotted | Defines a dotted border. Renders as a solid line in most browsers. |
| dashed | Defines a dashed line. Renders as a solid line in most browsers. |
| solid | Defines a solid line. |
| double | Defines a double line. The width of the double line is equal to the value of border-width. |
| groove | Defines the 3D groove border. The effect depends on the value of border-color. |
| ridge | Defines a 3D ridge border. The effect depends on the value of border-color. |
| inset | Defines the 3D inset border. The effect depends on the value of border-color. |
| outset | Defines the 3D outset bounding box. The effect depends on the value of border-color. |
| inherit | Specifies that the border style should be inherited from the parent element. |
The border direction attribute value description table is as follows:
| property | describe |
|---|---|
| border-top | Sets the top border of an element. |
| border-bottom | Sets the bottom border of an element. |
| border-left | Sets the left border of an element. |
| border-right | Sets the right border of an element. |
Border Practice
Practice code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Border</title>
<style>
.box{
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
Smile is the first belief</div>
</body>
</html>Result Plot
Note: The border color can be omitted and is black by default. If the other two properties are not written, no border will be displayed.
Setting element border direction practice
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Border</title>
<style>
.box{
width: 200px;
height: 100px;
border-top: 2px double red;
border-bottom: 2px ridge lawngreen;
border-left: 2px inset darkorange;
border-right:2px groove darkblue;
}
</style>
</head>
<body>
<div class="box">
Smile is the first belief</div>
</body>
</html>Result Plot
Introduction to display properties
display attribute means display. display attribute can convert inline elements to block-level elements and vice versa, setting hidden elements to display state or setting displayed elements to hidden state.
The following table describes the display attribute values:
| Property Value | describe |
|---|---|
| inline | Converts a block-level element to an inline element. |
| block | Function: 1. Convert inline elements to block-level elements. 2. Set the hidden elements to display state. |
| none | Sets a displayed element to a hidden state. |
Display property practice
Use display attribute with a value of block to set the width and height of span tag and set a background color.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Convert span tags to block-level elements</title>
<style>
.box{
width: 200px;
height: 100px;
display: block;
background-color: red;
}
</style>
</head>
<body>
<span class="box">Smile is the first belief</span>
</body>
</html>Result Plot
Note: If an inline element uses display: block; it has the characteristics of a block-level element.
Use display attribute with the value inline to convert h1 tag into an inline element.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Convert h1 tags to inline elements</title>
<style>
.box{
width: 200px;
height: 100px;
display: inline;
background-color: red;
}
</style>
</head>
<body>
<h1 class="box">Smile is the first belief</h1>
</body>
</html>Result Plot
Note: If a block-level element uses display: inline; it has the characteristics of an inline element.
Summarize
The above is the method of using border and display attributes in CSS that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!
<<: Practice of realizing Echarts chart width and height adaptation in Vue
>>: An article to teach you HTML
Recommend
Summary of commonly used tags in HTML (must read)
Content Detail Tags: <h1>~<h6>Title T...
CSS--overflow:hidden in project examples
Here are some examples of how I use this property ...
Detailed explanation of how to set the change value within a specified time in Zabbix
Background description: On an existing load balan...
Detailed tutorial on deploying Django project using Docker on centos8
introduction In this article, we will introduce h...
Tutorial on installing Ceph distributed storage with yum under Centos7
Table of contents Preface Configure yum source, e...
Detailed explanation of the use of Vue mixin
Table of contents Use of Vue mixin Data access in...
The difference between html form submission action and url jump to actiond
The action of the form is different from the URL j...
How to use the VS2022 remote debugging tool
Sometimes you need to debug remotely in a server ...
Solve the problem of MySQL 8.0 still prompting Access denied even though the input is correct
I started learning MySQL recently. The installati...
The implementation process of long pressing to identify QR code in WeChat applet
Preface We all know that the QR codes in official...
Mysql timeline data to obtain the first three data of the same day
Create table data CREATE TABLE `praise_info` ( `i...
Detailed explanation of .bash_profile file in Linux system
Table of contents 1. Environment variable $PATH: ...
Summary of the use of MySQL date and time functions
This article is based on MySQL 8.0 This article i...
Pure CSS3 to achieve pet chicken example code
I have read a lot of knowledge and articles about...
Summary of Binlog usage of MySQL database (must read)
I won't go into details about how important b...