How to use css border property and display properties

Original: How to use css border property and display properties

border property description #

borderAttribute of the element border.
Border 3th element such as: thickness, line style, color.

Property Value Description Table border line as: #

Refers to the property	description
none	No defined borders.
hidden	And "none" the same. However, except when used in tables for table, hidden to solve the border conflict.
dotted	The definition of point-like border. It appears as a solid line in most browsers.
dashed	Define the dotted line. It appears as a solid line in most browsers.
solid	Define a solid line.
double	The definition of wire. A width equal to double the value of border-width.
groove	3D groove defined border. The effect depends on the border-color value.
ridge	Define a 3D ridge-like border. The effect depends on the border-color value.
inset	The definition 3D inset border. The effect depends on the border-color value.
outset	The definition 3D outset border. The effect depends on the border-color value.
inherit	Provision should inherit the border style from the parent element.

Property Value Description Table border directions as: #

Attributes	description
border-top	Set the element's border.
border-bottom	Set next element's border.
border-left	Set left border element.
border-right	Set right border element.

Border practice #

Practice Code:

 
 
  
  Copy
 
 
<!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>边框</title>
  <style>
    
     .box{
        width: 200px;
        height: 100px;
        border: 1px solid red;
     }
  </style>
</head>

<body>
   <div class="box">
     微笑是最初的信仰
   </div>
</body>

</html>

Results Figure

Note: The border color can be omitted, the default is black. If you do not write the other two properties will not display a border.
Set border elements of the practice direction
Block

 
 
  
  Copy
 
 
<!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>边框</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">
     微笑是最初的信仰
   </div>
</body>

</html>

Results Figure

display attributes introduction #

displayIt is meant to show the properties, displaythe properties can be interconversion between the inner row elements and block element, the hidden element or elements disposed to set the display state of the display hidden.
displayProperty Value Description Table below:

Property Value	description
inline	Converting the block elements of the element row.
block	Effect: 1, to convert the inline element is block-level elements. 2, the hidden element to the display state.
none	The display element is set to hidden.

display attribute practice #

Using the displayproperty attribute value of blockthe spanlabel width set a background color and sets the height.
Block

 
 
  
  Copy
 
 
<!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>将span标签转换为块级元素</title>
  <style>
     .box{
        width: 200px;
        height: 100px;
        display: block;
        background-color: red;
     }
  </style>
</head>

<body>
   <span class="box">微笑是最初的信仰</span>
</body>

</html>

Results Figure

Note: If you use the inline element display: block;, you have a block-level element characteristics.
Using the displayproperty attribute value inlinewill be h1converted to label inline elements.
Block

 
 
  
  Copy
 
 
<!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>将h1标签转换为行内元素</title>
  <style>
     .box{
        width: 200px;
        height: 100px;
        display: inline;
        background-color: red;
     }
  </style>
</head>

<body>
   <h1 class="box">微笑是最初的信仰</h1>
</body>

</html>

Results Figure

Note: If you use a block-level element display: inline;, it has the characteristics of inline elements.

How to use css border property and display properties

border property description #

Property Value Description Table border line as: #

Property Value Description Table border directions as: #

Border practice #

display attributes introduction #

display attribute practice #

Guess you like