This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

positioning

01. Positioning mode + positioning offset

  • Positioning mode:Static, absolute, relative, fixed
  • Positioning offset:Top, bottom, left, ri5ght
  • Inline elements set * * * * | absolutely fixed 】 【 positioning, height, width can be set directly
  • Block-level elements set * * * * | absolutely fixed 】 【 positioning, if not, give the width and height by default for content size
  • None of the elements that leave the document flow will trigger margin collapse

02. What are the categories of positioning?

(1) Static positioning — static (default)

(2) They are relative

  • Position relative to original position

    • Offset by the original position of the element itself in the document flow

  • Stay in place

    • After the elements are positioned relative to each other, their original positions remain in the document flow

(3) Absolute positioning — absolute

  • Location relative to ancestor elements

    • Starting with the parent element, find the nearest parent element, the already positioned element, the ancestor element, and offset it all the way to the browser

  • Out of document flow

    • Not occupying the original position

(4) fixed positioning — fixed

  • How to position?

    • Position offset against the browser’s visual window

  • [Note] For this reason, when positioning the mobile end, manually limit its width, using min-width,max-width

    • It has nothing to do with the parent element

  • Does not scroll with the scroll bar

    • Out of the document stream, not in the original position

  • A special kind of absolute positioning

  • How to fix it to the right of the type center (main content area)

    • 1. Offset the browser width by half: left:50%

    • 2. Use [margin] to offset the width of the font center: margin-left:100px

(5) Sticky positioning — sticky

1. It has mixed characteristics of relative positioning and absolute positioning

2. Perform positioning and offset based on the viewable window of the browser

3. Stay where you are and stay in the flow

4. You must add location offsets: top, bottom, left, right

5. Poor compatibility

03. What is the essence of the son and the father?

  • Use relative positioning as the parent element of absolute positioning
  • The parent element is positioned relative to the child element and the child element is positioned absolutely
  • Relative positioning is to limit absolute positioning

floating

01. Floating features

  • Floating elements leave the document flow (standard flow)
  • Floating elements are displayed on a single line unless the parent element does not fit
  • Floating elements have the properties of inline block elements (wide, high style can be set)

02. How do I clear floats?

  • Why clear the float?

    • One way to clear the float is to set a fixed height for the parent element, but since the parent element height is not fixed, you cannot set the height for the parent element every time

    • So clear floats, that is, the effect of floating elements leaving the flow of the document, otherwise it will affect the layout of subsequent elements

  • Method of clearing float – closed float

    • Extra label method — partition method

    • Add an empty div tag (or some other block-level element, which must be a block-level element) after the last floating child to set the style [clear:both;

      div.last{
    clear:both;
}

Copy the code

    • The parent element overflow

      • Styles the parent element of the floating element

        .father{
    overflow:hidden;
}

Copy the code

    • : after pseudo elements

      • Add an After pseudo-class to the parent element of the floating element

        Adding pseudo-elements works the same way as adding extra tags, adding a block-level element cleanup float at the end of the parent element, except that the new tags are generated by CSS

        Add a new inline element */ at the end of the parent element
.clearfix:after{/* Required attribute content, set this to null */ content:"";
    
    /* Use display to change the new inline element to a block element */
    display: block;
    
    /* Sets the pseudo element height to 0*/
    height: 0;
    
    /* Clear float for this pseudo-element */
    clear: both;
    
    /* Sets the pseudo-element invisible */
    visibility: hidden;
}

/* This is to address browser compatibility issues */
.clearfix{
    *zoom:1;
}

Copy the code

    • Double pseudo elements

      • Add before pseudo-element to after pseudo-element

        .clearfix:before, .clearfix:after{
   content: "";
   display: table;
}

.clearfix:after{
  clear:both;
}

.clearfix{
  *zoom:1;
}

Copy the code

03. How to match the floating page layout?

  • It is usually used with a parent element in the document flow

    • The parent element is in normal document flow

  • The child element floats within the parent element

    • Finally, the float is cleared in the parent element

Some DOS and don ‘ts

  • Floating boxes do not suffer from BFC, or margin collapse

  • Floating elements will press down on the boxes in the document flow below, but not on the text in the document flow. This is because floating is originally intended to create a text wrap effect

I front-end side dish chicken, if there is wrong, please forgive