The front end of the interview retelling of hard core issue of collection (CSS)

1. talk about css box model

Here Insert Picture Description

2. Draw a line 0.5px

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

Or border-image, transform: scale () mode

Difference 3.link label and import labels

link belongs to html tags, import is provided by css
when the page is loaded, the link will be loaded at the same time, while import cited css load will wait until the end of the page load
link is html tags, so there is no compatibility, and in order to import more than ie5 identify
the right way link style weight than import

Differences 4.js animation and animation css3

Function coverage: js css than big
easier than css js, excellent performance jump direction is fixed
to the lower frame rate performance is not good version of the browser, css3 can do naturally downgrade
css animation natural event support
css3 compatibility issues

The block-level element and said at row level elements

Block elements: a separate line, and automatic fill parent element, as well as padding and can set the margin width height.
Line elements: not exclusive line, width, height failure, failure in the vertical direction and the padding and margin will be.

6. Bilateral from the overlap

Hammerstone direction normal stream plurality of adjacent block elements overlap margin
folding results:
two adjacent margins are positive numbers when folded result is a larger value between both of them
two adjacent margins are is negative, the result is a large absolute value folded value between both of them
when the positive or negative, the result is the folding of both the additive and

7. Clear float

Method 1: The use of the clear property empty elements, or adjacent processing elements
using an element such as empty after the floating element <div class="clear"></div>, and set its css, .clear{clear:both;}to clean up the float.
Method 2: Use of css overflow property
added to the vessel floating element overflow:hidden;or overflow:auto;clear floating.
Method 3: pseudo-element processing
to the vessel floating elements are added class a clearfix then add a to this class: afer the dummy element to achieve added to the end elements a cleaning element block floating invisible.

8.css selector

id selector, class selector, tag selector, pseudo-element selector, pseudo class selector

Here Insert Picture Description
With! important mark of style attributes highest priority
Here Insert Picture Description

9. How to make a disappearing element

Three ways:

display:none;
visibility:hidden;
opacity:0;

10. Rearrangement and redraw

DOM changes affect the budget of the geometric properties such as width and height, the browser re-calculate the geometric properties of the elements, the geometric properties of other elements will also be affected, need to re-construct the browser to render the book, this process is called rearrangement, browser the affected part of the process of re-drawn on the screen is called redraw,
the cause of the rearrangement redrawn:
add or remove visible DOM element
to change the position of the element size of the
browser page initialization
browser window size changes, rearrangements necessarily lead to redraw, redraw does not necessarily lead to rearrangements
reduce redraw rearrangement method:
do not DOM query layout information is changed
using csstext, className property to change the one-time
use fragment
for multiple rearrangements of elements such as animation, use absolute positioning from the document flow, it does not affect other elements

Published 158 original articles · won praise 44 · views 30000 +

Guess you like

Origin blog.csdn.net/qq_43277404/article/details/104268380