current position：Home>CSS learning notes [3] floating, not separated from document flow, inheritance and stacking

CSS learning notes [3] floating, not separated from document flow, inheritance and stacking

2022-04-29 12:34:29【51CTO】

float 

      
      

       
        Floating elements have no block level , How big it floats is how big ,
       
       

       
        As long as it involves the layout of the page, it is used float Layout 
       
       

       
       <
       
       style
       
       >
       
       
       
       
       #d1 {
       
       
           
       
       height: 
       
       200
       
       px;
       
       
           
       
       width: 
       
       200
       
       px;
       
       
           
       
       background
       
       -
       
       color: 
       
       red;
       
       
           
       
       float: 
       
       left;
       
       /* Float left */
       
       

       
       
       }
       
       
       
       
       #d2 {
       
       
           
       
       height: 
       
       200
       
       px;
       
       
           
       
       width: 
       
       200
       
       px;
       
       
           
       
       background
       
       -
       
       color: 
       
       blue;
       
       
          
       
       float: 
       
       right;
       
       /* Floating to the right */
       
       

       
       
       }
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    • 
       
       
  • 6.
    • 
       
       
  • 7.
    • 
       
       
  • 8.
    • 
       
       
  • 9.
    • 
       
       
  • 10.
    • 
       
       
  • 11.
    • 
       
       
  • 12.
    • 
       
       
  • 13.
    • 
       
       
  • 14.
    • 
       
       
  • 15.
    • 
       
       
  • 16.
    • 
       
       
  • 17.
    •

The impact of floating

· Address the impact of floating
· Overflow properties
· location
· Verify that floating and positioning are out of the document flow
·Z-index Modal frame
· transparency
· Simple blog Garden Construction
·JS Programming foreplay

Address the impact of floating

Bring the problem of parent tag collapse
To address the impact of floating Derivation steps
1· Add one by yourself div Set height
2· utilize clear attribute 

      
      

       
       d4 {
       
       

       
       clear: 
       
       left;
       
       /* The left side of the label （ Ground and air ） There can be no floating elements  clear：right That is, there cannot be... On the right ,both That is, there can be no... On both sides */
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    •

3· A general solution to the impact of floating
Writing html Before First, write in advance about how to deal with the impression of floating css Code 

      
      

       
       .
       
       clearfix:
       
       after{
       
       

       
       content:
       
       '';
       
       

       
       display:
       
       block;
       
       /* Set an empty content as a block label , The block level tag has an exclusive row attribute */
       
       

       
       clear:
       
       both;
       
       /* So that there can be no floating labels on both sides of the label */
       
       
}
      
      

      
      
    
       
       
  • 1.
    • 
       
       
  • 2.
    • 
       
       
  • 3.
    • 
       
       
  • 4.
    • 
       
       
  • 5.
    •

After that, as long as there is a problem of label collapse, add a... To the collapsed label clearfix Attribute is enough

Verify that floating and positioning are out of the document flow

float
Relative positioning
Absolute positioning
Fixed position

Do not detach from the document stream

1· Relative positioning is not separated from the document flow

Off stream

1· float
2· Absolute positioning
3· Fixed position
I'm learning H5 And CSS In the process of , There will be a lot of doubts , My solution is to practice and record . Write down the questions in your notepad for the time being , Continue to test and record screenshots in the process , Facilitate later summary and comparison . In the process of summing up, we will rediscover many points that we didn't pay attention to or think deeply at the beginning , And it is these points that contribute to our progress .

Inheritance and layering

Cascading is when multiple style rules are applied to an element , Which rule takes precedence . If you've ever met someone who doesn't understand why CSS There seems to be no application , That may be the stack is not used well . Cascading is closely related to inheritance , Inheritance defines that a child element can inherit the style attributes of a parent element . It's also about specificity , Different selectors have different specificities , When there are several selectors that can be applied to an element , Inheritance can decide which rule to apply .

copyright notice
author[51CTO],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291018226400.html

The sidebar is recommended

guess what you like

Random recommended