1. The difference between link and @import

  • Link is an XHTML tag and @import is a complete CSS implementation. You can set a lot of attributes in link, but you can’t set @import
  • Loading sequence: When users browse the page, the style will be loaded at the same time if link is used, while @import can only load the style after all the page is loaded, so sometimes the network is slow and there will be no style.
  • Compatibility issues, @import has compatibility issues that are not supported by earlier browsers, but link does not have this issue

2. 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

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

4. Margin penetration: there is a small box inside a big box. In order to keep a certain distance between the small box and the upper part of the big box, a margin-top is set for the small box, causing the small box and the big box to fall down together

  • Solution 1: Create a padding-top for the larger box and remove the margin-top Settings from the smaller box
  • Solution 2: Set a border-top for the large box
  • Solution 3: Set overflow: Hidden for the big box
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> There is a small box inside a big box. In order to keep a certain distance between the small box and the upper part of the big box, a margin-top is set for the small box, which causes the small box and the big box to fall down together. The first solution is: Set a border-top for the big box and a border-top for the big box. Set overflow:hidden for the big box. */ * { margin: 0; padding: 0; } .main { width: 300px; height: 300px; background-color: chartreuse; Border-top: 1px solid transparent; border-top: 1px solid transparent; */ /* Overflow: hidden; */ } .box { width: 50px; height: 50px; background-color: crimson; margin-top: 20px; } /* First workaround:.main {padding-top: 20px; } */ </style> </head> <body> <div class="main"> <div class="box"></div> </div> </body> </html>Copy the code

5. Margin value merge

Margin-bottom :100px; margin-bottom :100px; margin-bottom :100px; Margin-top: 50px; margin-top: 50px; , the distance between the two boxes is not the sum of the margin of 150px, but the maximum margin of 100px

<style> *{ margin:0; padding:0; } div{ width:200px; height:200px; } .box1{ background:green; margin-bottom:30px; } .box2{ background:gold; margin-top:100px; } </style> <div class="box1"></div> <div class="box2"></div>Copy the code

6. Fix “box collapse” caused by floating elements on parent level

  • If there is no height, set height to the parent of the floating element
  • Set the floating element’s parent: overflow: Hidden;
  • Add a block-level element to the end of the floating element’s parent box and style the block-level element: clear: both
  • Whoever floats will add a class name to their parent: clearfix, if you put the following code into the style
.clearfix:after{
content:"";
font-size:0;
display:block;
height:0;
visibility: hidden;
clear: both;
}
.clearfix{
*zoom:1;
}
Copy the code

Create a triangle with a float

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> *{margin: 0; padding: 0; } .box{ border: 20px solid coral; border-color: transparent transparent transparent red; width: 0; } </style> </head> <body> <div class="box"></div> </body> </html>Copy the code

8. How do I center an element horizontally and vertically across a screen or a box?

Fixed or absolute positioning:

  • Left: 50%; Top: 50%;
  • Margin-left: negative half the width of the box; Margin-top: negative half of the height of the box;
<style>
    .box{
        width:200px;
        height:200px;
        background:green;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
</style>
Copy the code