• Several ways to clear floats

1. The parent div defines height
  • Principle: The parent div defines height manually, which solves the problem that the parent div cannot automatically get the height.
  • Advantages: simple, less code, easy to master
  • Disadvantages: only suitable for fixed height layouts, give exact height, if the height is not the same as the parent div, this can cause problems
2. Add an empty div tag at the end: clear:both
  • Principle: Add an empty div and use CSS’s improved clear: BOTH to clear the float so that the parent div can automatically get the height
  • Advantages: Simple, less code, good browser support, not prone to strange problems
  • Disadvantages: many beginners do not understand the principle; If your page has a floating layout, add a lot of empty divs, which makes it feel bad
3. The parent div defines pseudo classes :after and zoom
  • Principle: IE8 above and non-IE browsers only support :after, principle and method 2 is somewhat similar, ZOOM (IE to have properties) can solve ie6, IE7 floating problem
  • Advantages: Good browser support, not easy to appear strange problems (currently: large websites are used, such as: Teng Xun, netease, Sina, etc.)
  • Disadvantages: many code, many beginners do not understand the principle, to use two lines of code to allow the mainstream browser support
4, the parent div defines overflow:hidden
  • Principle: Width or zoom:1 must be defined, and height cannot be defined. When using Overflow: Hidden, the browser will automatically check the height of the floating area
  • Advantages: Simple, less code, good browser support
  • Disadvantages: Cannot be used in conjunction with position, because the size beyond the position is hidden.

• What is the CSS selector, selector weight priority

Selector type
1, id #id 2, class. Class 3, tag p 4, generic * 5, attribute [type="text"] 6, pseudoclass: hover 7, pseudo-element ::first-line 8, child selector, adjacent selectorCopy the code
Weight calculation rules
1. First class: represents the inline style, such as: style= "", weight is 1000. 2. Second class: represents an ID selector, such as #content, with a weight of 0100. 3. Third class: represents classes, pseudo-classes, and attribute selectors, such as.content, with a weight of 0010. 4. Fourth class: represents type selectors and pseudo-element selectors, such as div P, with a weight of 0001. 5. Wildcard, child selector, adjacent selector, etc. For example, *, >, +, the weight is 0000. 6. Inherited styles have no weights.Copy the code

• Explain CSS sprites, how to use them?

CSS Sprites is actually to integrate some background images in the web page into a picture file, and then use the combination of “background-image”, “background-repeat”, and “background-position” of CSS for background positioning. Background-position can be used to accurately locate the position of the background image.

CSS Sprites save bandwidth for some large web sites and improve user loading speed and user experience without the need to load more images

• Methods to hide elements

Visibivisibility: hidden hidden still occupies a space 2. Opacity: 0 transparent still occupies a space 3. Position: absolute; left: -1000; top: -9000; 4. Display: none; 6. H5 hidden attribute <p hidden></p> =display:none 7. Height :0; overflow: hidden; 8. Filter: blur(0) =0Copy the code

• CSS3 The difference between one colon and two colons

Single colons (:) are used for CSS3 pseudo-elements, and double colons (::) are used for CSS3 pseudo-elements to distinguish them from pseudo-elements. There is no distinction before CSS2, and all single colons (:) are used for pseudo-elements before CSS2, such as :before.

• List all pseudo-elements

:before :after  :first-line  :first-letter
Copy the code

• All pseudo classes

:active Adds styles to active elements. :focus Adds styles to elements that have keyboard input focus. :hover Adds styles to elements when the mouse hovers over them. :link Adds styles to links that are not accessed. :visited Adds styles to links that have already been visited. :first-child Adds the style to the first child of the element. :lang :last-child :nth-child(n/odd/even)Copy the code

• CSS link and import differences

There are four ways to introduce CSS into HTML. They are inline, embedded, link, and import. Link is imported through link, and import is imported through import.

Link and import are both external references to CSS, but there are some differences:
  1. Difference 1: Link is an Xhtml tag that can define other transactions, such as RSS, in addition to loading CSS. @import belongs to CSS and can only load CSS.
  2. Difference 2: When link references CSS, the page is loaded at the same time; @import requires the page page to load after it is fully loaded (without blocking).
  3. Difference 3: Link is an XHTML tag, no compatibility issues; @import was introduced in CSS2.1 and is not supported by older browsers.
  4. Difference 4: Link supports using JavaScript to control the DOM to change styles; @import is not supported.

• Div + CSS displays two or three lines of text

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // The number of lines of text to control
overflow: hidden;
Copy the code

Application Scope: This method applies to WebKit browsers and mobile devices because WebKit CSS extensions are used.

Margin overlap problem

– Overlap of the same direction margin:

The margin-top of picture 1 overlaps with the margin-top of picture 3, and the margin-bottom of picture 2 overlaps with the margin-bottom of picture 3. At this time, the margin value after overlap is determined by the maximum value of the two overlapping pieces. If one of them is negative, the largest positive margin is subtracted from the largest negative margin in absolute value; if none, the largest negative margin in absolute value is subtracted from 0.

Methods to solve the overlap in the same direction:

  1. Add overflow: Hidden to the outermost div; zoom:1;
  2. Add the padding:1px on the outer layer; (But will affect the overall style accuracy)
  3. Add border:1px solid #cacbcc;
– Anisotropic overlap problem:

1. The margin-bottom of the picture overlaps with the margin-top of the two pictures, and the margin value after the overlap is determined by the maximum value of the two pictures.

To solve the problem of heteromorphic overlap:

  • Float :left (IE6) float:left (IE8, Firefox, Opera)

2. Use the landing

BFC stands for Block Formatting Context. The BFC is a completely independent space (layout environment), so that the child elements in the space do not affect the layout of the outsideCopy the code

– Method 1, add display:inline-block to one of the elements, as in

//css
<style>
     .box {
        margin: 10px;
        width: 100px;
        height: 100px;
        background: #000;
    }
</style>

//html
<div class="container">
    <div class="box"></div>
    <div class="box" style="display:inline-block"></div>
</div>

Copy the code

– Method 2, nest a layer, the parent element is BFC

//css
<style>
     .box {
        margin: 10px;
        width: 100px;
        height: 100px;
        background: #000;
    }
</style>

//html
<div class="container">
    <div class="box"></div>
    <div  style="display:inline-block">
        <div class="box"></div>
    </div>
</div>
Copy the code

To be continued…