A brief analysis of how to use border and display attributes in CSS

Introduction to border properties `border` property sets the border of an element. `3` elements of the border are: thickness, line type, and color. The border line type attribute value description table is as follows:

Introduction to border properties

border property sets the border of an element.
3 elements of the border are: thickness, line type, and color.

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