CSS fragmentary knowledge points

CSS fragmentary knowledge points

float

Floating action

Used for web page layout to change the vertical layout to the horizontal layout

Attention!!! When the box has floated, you can't use absolute positioning, you can use relative positioning

Floating characteristics

  1. Floating will break away from the standard flow and occupy no position in the standard flow
  2. The floating display priority after separation is half a level higher than the standard flow
  3. Floating find floating, several elements float at the same time, and the later floating element will float behind the first floating element
  4. Floats are affected by element boundaries (block level elements such as div occupy one line)
  5. Floating has special display effect, width and height can be set, and there can be multiple floats in a row
  6. Floating elements cannot use text align and margin:0 auto to set the horizontal center, but the contents of floating elements can

Floating code

#Left float
.left {
	float:left;
}
#Right float
.right{
    float:right;
}

Clear float

Objective: sometimes when the child element floats, it will break away from the standard flow, and the parent element can no longer be supported by the child element.

method:

  1. Set the height of the parent element (disadvantage: some plates are not allowed to set the height of the parent element)

    .father {
          height: 400px;
          width: 400px;
          background-color: pink;
        }
    
    .son {
          float: left;
          width: 100px;
          height: 400px;
          background-color: blue;
        }
    
  2. Extra tag method: add a block level element at the end of the parent element and set clear:both (disadvantage: adding tags makes the web page structure complex)

     .father {
          width: 400px;
          background-color: pink;
        }
    
        .son {
          float: left;
          width: 100px;
          height: 400px;
          background-color: blue;
        }
    
        .clear {
          clear: both;
        }
    
  3. 2 optimization, single pseudo element method: add clear:both to the pseudo element of the parent element

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .father {
          width: 400px;
          background-color: pink;
        }
    
        .son {
          float: left;
          width: 100px;
          height: 400px;
          background-color: blue;
        }
    
        .clearfix::after {
          content: '';
          display: block;
          clear: both;
          /* Supplementary code: no pseudo elements can be seen in the web page */
          /* height: 0;
          visibility: hidden; */
        }
      </style>
    </head>
    <body>
      <div class="father clearfix">
        <div class="son"></div>
      </div>
    
      <div class="clearfix"></div>
      <div class="clearfix"></div>
      <div class="clearfix"></div>
      <div class="clearfix"></div>
    </body>
    </html>
    
  4. Double pseudo element elimination method: it can also solve margin collapse and use the conventional routine

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .father {
          width: 400px;
          background-color: pink;
        }
    
        .son {
          float: left;
          width: 100px;
          height: 400px;
          background-color: blue;
        }
    
        .clearfix::before,
        .clearfix::after {
          content: '';
          display: table;
        }
        .clearfix::after {
          clear: both;
        }
      </style>
    </head>
    <body>
      <div class="father clearfix">
        <div class="son"></div>
      </div>
    </body>
    </html>
    
  5. Set overflow:hidden for parent element

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .father {
          width: 400px;
          background-color: pink;
          overflow: hidden;
        }
    
        .son {
          float: left;
          width: 100px;
          height: 400px;
          background-color: blue;
        }
        
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son"></div>
      </div>
    </body>
    </html>
    

Edition Center

Moderation

It is used to constrain the main content of the web page. No matter what display size, the main content of the web page can be presented in the middle

code

.container {
    width:1000px;
    margin:0 auto;
}

index page skeleton

<!DOCTYPE html>
<!-- Select language:en zh-CN -->
<html lang="en"> 
<head>
<!-- Character code universal code -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Web page description -->
<meta name="description" content="xxxxxx">
<!-- Web page keywords -->
<meta name="keywords" content="xxxxxxx">
<!-- icon Icon -->
<link rel="shortcut icon" href="./xtx/favicon.ico" type="image/x-icon">
<!-- Page title -->
    <title>Document</title>
<!-- CSS Outreach style -->
<link rel="stylesheet" href="./xtx/css/base.css">

</head>
<body>
    
</body>
</html>

selector

Descendant Selectors

Usage: selector 1 selector 2 {CSS}

Effect: descendants (sons, grandchildren...) in selector 1 can be selected if they meet the conditions of selector 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father p {
      color: red;
    }
  </style>
</head>
<body>
  <!-- Demand: only let the little sister turn red (no change) html Structure) -->
  <!-- Solution: in.father this div Find in the offspring of p Label is enough -->
  <div class="father">
    <p>cute girl</p>
    <div>
      <p>Handsome boy</p>
    </div>
  </div>
  <p>Cutie</p>
</body>
</html>

Tips: little sister and handsome boy become red, and little cute remains the same

Progeny selector

Usage: selector 1 > selector 2 {CSS}

Effect: only the children in selector 1 can be selected, and only sons can be selected, and those conforming to selector 2 are selected

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father > p {
      color: red;
    }
  </style>
</head>
<body>
  <div class="father">
    <p>Cutie</p>
    <div>
      <p>cute girl</p>
    </div>
  </div>
  <p>Big cute</p>
</body>
</html>

Tips: little cute turns red

Union selector

Usage: selector 1, selector 2 {CSS}

Effect: make multiple selectors meet the selection conditions and modify multiple elements at the same time. Selectors can be basic selectors or complex selectors, one for each line

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div,
    p {
      color: red;
    }
  </style>
</head>
<body>
  <div>I am div</div>
  <div>I'm one, too div</div>
  <p>I am p label</p>
  <p>Me too. p label</p>
  <h1 class="red">I am a h1 label</h1>
  <h2>I am a h2 label</h2>
</body>
</html>

Tips: div and p labels turn red

Intersection selector

Usage: selector 1 selector 2 {CSS}. If there is a label selector, it must be written in front

Effect: select the elements that match selectors 1 and 2 at the same time

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p.red {
      color: red;
    }
  </style>
</head>
<body>
  <div class="red">cute girl</div>
  <p>Handsome boy</p>
  <p class="red">Cutie</p>
</body>
</html>

Tips: little cute turns red

hover pseudo class selector

Usage: selector:: hover {CSS}

Effect: when the mouse hovers over the label, the CSS style in the pseudo class selector is displayed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      text-decoration: none;
    }

    a:hover {
      color: orange;
      text-decoration: underline;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }

    .box:hover {
      width: 400px;
      height: 400px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <a href="#"> I am an a tag</a>
  <div class="box"></div>
</body>
</html>

Structure pseudo class selector

Precisely select the first element

Usage:

/*The child element is E*/
E:first-child {CSS} /*Matches the first child element in the parent element*/
E:last-child {CSS}	/*Matches the last child element in the parent element*/
E:nth-child(n) {CSS}/*Matches the nth child element in the parent element*/
E:nth-last-child(n) {CSS}/*Match the penultimate child element in the parent element*/
/*
n Is 0,1,2,3,4,..., 9
 Odd number: 2n-1,2n+1,odd
 Even: 2n, even
 First j: - n+j
 From the jth: n+j
*/

Sprite map

Function: there are many small pictures on a large picture. When sending data to the server, you don't need to send small pictures many times. You only need to send large pictures once to reduce the burden on the server

Usage:

  1. First create a box. The size of the box is the size of the picture
  2. Measure the coordinates (x,y) of the upper left corner of the small picture
  3. Invert coordinates
  4. Put the picture in the box
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one {
      width: 24px;
      height: 24px;
      background: url('./images/taobao.png') 0px -264px;
      float: left;
    }
    .two {
      width: 24px;
      height: 24px;
      background: url('./images/taobao.png') 0px -484px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
</html>

Pseudo element

Function: as the name suggests, it is a pseudo element, posing as a label effect. You can add a pseudo element to the non main content of the web page

!! The default is that inline elements do not have width or height

Usage:

Parent element:: before {CSS} adds a pseudo element before the parent element content

Parent element:: after {CSS} adds a pseudo element after the parent element content

content must be added to take effect

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .father::before {
      /* Mandatory attribute */
      content: 'I am a pseudo element';
      /* Convert display mode */
      display: block;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="father">
    I am father Internal content
  </div>
</body>
</html>

Disadvantages: it is not easy to debug, and the review elements cannot be found

Font text style

Font size 40px

Font weight 1. Normal bold 2. Number 100 ~ 900

Font style font style normal Italic

Font family

Font color

List style

Box

margin collapsing

Margin will not collapse horizontally, but will collapse vertically. In the two boxes, the one with the larger margin becomes the distance between the two boxes, and the one with the smaller distance shrinks in the one with the larger distance

The two margin tops are stacked together

Solution: clear the double pseudo elements in floating

Box composition

content

padding

border

margin

Automatic internal subtraction

Keep the box size unchanged while modifying the internal size

box-sizing:border-box

Background picture

background-size:

location

Static positioning

Relative positioning

When the box has floated, you can't use absolute positioning, you can use relative positioning

Absolute positioning

Position relative to distance from parent element

When the box has floated, you can't use absolute positioning, you can use relative positioning

Special:

Son Jue father phase

Father Jue son Jue

Element display mode

Block level element

display:block

Representative: div p h dl dt dd ul li header footer nav form

characteristic:

  1. There can only be one in a row, and only one row can be displayed
  2. Width and height can be set
  3. The default height is spread by the content, and the width is the same as that of the parent element

Inline element

display:inline

Representative: span a pseudo element

characteristic:

  1. Width and height cannot be set
  2. The height and width are supported by the content
  3. A row can have more than one

Inline block element

Alignment format

Vertical alignment

vertical-align:middle

Text:

Line height: current height

align horizontal center

Text: text align

margin:0 auto

Operating skills

Rapid generation framework

!+Tab

preview

Alt+B

Select multiple identical elements at the same time

Ctrl+D

Paste elements into multiple lines at the same time

Press and hold the middle key of the scroll wheel to scroll

El ement syntax

Tags: Front-end css

Posted on Sun, 24 Oct 2021 15:08:53 -0400 by Spear Chucka