Day 3 Label style

The label

Label division

  • Block level elements: H1-H6, P, div, ul, OL, LI, DL, DT, dd
    • Write width and height to help
    • An exclusive line
    • Arrangement: up and down
  • Note: block-level elements cannot be used within literal elements. The P tag is mainly used to store text, so you can’t put block-level elements in p.
  • Inline elements: SPAN, A, B, strong, EM, I, del, S, U, ins
    • Width and height do not matter, its size is determined by its content
    • Can be in a row
    • Arrangement: left and right
  • Inline block elements: IMG, video, audio
    • Write width and height to help
    • Can be in a row
    • Arrangement: left and right

Label aggregation

  • Title: h1 – h6
  • Paragraph: p
  • Big box: div
  • Small box: Span
  • Images: img
  • Hyperlink: A
  • Format labels: B, strong, EM, I, del, S, U, INS
  • List: UL, OL, LI, DL, DT, DD
  • Audio and video: Audio and video

Several values of display

  • Inline: Converts to inline elements (usually not, if you need to use inline elements directly)
  • Block: Converts to block-level elements
  • Inline-block: converts to an inline block
  • None: disappear

Interview question: How many ways can you make an element disappear?

  • Display: none
  • Visibility: hidden; By changing the visibility
  • Opacity: 0; By changing transparency, the value ranges from 0 to 1
  • Positioned elements are controlled by hierarchy (Z-index)
  • Margin can be adjusted to the side of the screen by giving elements a negative margin
  • Width and height is equal to 0

While display and opacity and opacity also allow elements to disappear, what’s the difference?

Display: none is completely disappeared, does not occupy the position, but visibility: hidden; And opacity: 0; It’s out of sight, but it’s still there.

Clear the list default format

  • Margin = 0; margin = 0; margin = 0; padding = 0
*{
margin:0;
padding:0;
}
Copy the code
  • Clear the default style at the front of the list
ul,ol{
list-style: none;
}
Copy the code
  • Clear the underline of label A
a{
text-decoration: none;
}
Copy the code
  • Background color: background-color
<style>
     div{
         width:200px;
         height:200px;
         background-color:red;
     }
</style>
Copy the code
  • Indent: text-indent
    • Text-indent can be followed by a specific pixel value, or by em, where 2em represents an indentation of two words.
<style>
    p{
        /* text-indent: 10px; */
        text-indent:2em;        
    }
</style>
Copy the code
  • Font size
p{
font-size:26px;
}
Copy the code
  • Text color: color
  • Font: font-family

Font-family :” Times New Roman”,Georgia,Serif; font-family:” Times New Roman”,Georgia,Serif;

  • Control text weight: font-weight
  • 400 Normal thickness === Normal
  • 700 ===bold
  • 900 ===bolder

Font weight: normal(400);

<style>
    p{
        font-weight: bold;
    }
    b{  
        font-weight: normal;
    }
</style>
Copy the code
  • Control text tilt :font-style
  • font-style:italic; Tilt the text
  • font-style:normal; Make text normal
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> < span style> span{ font-style: italic; } i{ font-style:normal; } < / style > < / head > < body > < span > span < / span > < I > italics < / I > < / body > < / HTML >Copy the code
  • Margin :0 auto;
div{
width:100px;
height:100px;
background:green;
margin:0 auto;
}
Copy the code
  • High line: the line – height
  • Center the text vertically: height equals line-height
li{
height:35px;
line-height:35px;
}
Copy the code
  • Frame: border
  • Dashed: the dotted line
  • Solid: solid line
<style>
  div{
            width:200px;
            height:200px;
            /* border:2px solid darkturquoise; */
             border:2px dashed darkturquoise; 
        }
</style>
Copy the code