Analysis of the method of using border attribute and display attribute in CSS

Time:2020-9-15

Introduction to border attribute

  • borderProperty to set the element border.
  • frame3Such as thickness, line type and color.

Border line type property value theoryThey are as follows:

 

 

Attribute refers to describe
none Defines no borders.
hidden Same as “None”. Except for tables, where hidden is used to resolve border conflicts.
dotted Defines a dotted border. Rendered as a solid line in most browsers.
dashed Define the dashed line. Rendered as a solid line in most browsers.
solid Define a solid line.
double Define double lines. The width of the double line is equal to the value of border width.
groove Defines a 3D groove border. The effect depends on the value of border color.
ridge Define a 3D ridge border. The effect depends on the value of border color.
inset Define 3D inset borders. The effect depends on the value of border color.
outset Defines the 3D offset border. 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:

 

 

attribute describe
border-top Sets the top border of the element.
border-bottom Sets the bottom border of the element.
border-left Sets the left border of the element.
border-right Sets the right border of the 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 chart

Note: the border color can be omitted, the default is black. If the other two properties are not written, the border will not be displayed.

Practice of setting element border orientation

Code block

 

<!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 chart

Introduction to display property

displayProperty, which means display,displayAttribute can convert the in line element to the block level element, set the hidden element to display state or the displayed element to hidden state.

displayThe table of attribute values is as follows:

 

 

Property value describe
inline Converts block level elements to inline elements.
block Functions: 1. Convert the in line elements to block level elements. 2. Sets hidden elements to display.
none Sets the displayed element to hidden state.

Display property practice

usedisplayThe property value of the property isblocktakespanThe label sets the width and height and sets a background color.

Code block

 

<!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
  <style>
     .box{
        width: 200px;
        height: 100px;
        display: block;
        background-color: red;
     }
  </style>
</head>

<body>
   Smile is the original belief</span>
</body>

</html>

Result chart

Note: if the in line element usesdisplay: block;Has the characteristics of block level elements.

usedisplayThe property value of the property isinlinetakeh1Tags are converted to inline elements.

Code block

 

<!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 tag to inline element
  <style>
     .box{
        width: 200px;
        height: 100px;
        display: inline;
        background-color: red;
     }
  </style>
</head>

<body>
   < H1 class = "box" > smile is the original belief</h1>
</body>

</html>

Result chart

Note: if block level elements usedisplay: inline;, has the characteristics of in line elements.

summary

The above is how to use the border attribute and display attribute in CSS. I hope it will be helpful to you. If you have any questions, please leave me a message, and I will reply you in time. Thank you very much for your support to the developeppaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

Recommended Today

Oracle scheduled tasks

Timing task query To query Oracle scheduled tasks, you can use: –Scheduled tasks for all users SELECT * FROM dba_jobs; –Timing task of the user select * from user_jobs; In the query results, the what field generally stores the name of the stored procedure (or the specific stored procedure content). Broken = n indicates that […]