Some face questions about CSS

This article is mainly for you to share a question about CSS, with a very good reference value, I hope to be helpful to everyone. Follow the small series together to see it.

1 problems with upper and lower margin coincident

Wraps a layer of container outside the coincident element and triggers the container to generate a BFC.
Example:

<p class= "aside" ></p><p class= "text" >    <p class= "main" ></p></p><!-- Here is the CSS code--. Aside {            margin-bottom:100px;              width:100px;            height:150px;            Background: #f66;        }        . Main {            margin-top:100px;            height:200px;            Background: #fcc;        }         . text{/            * Box main outer Package a p, by changing the properties of this p to make two boxes belong to two different BFC, in order to prevent margin overlap */            Overflow:hidden;  The BFC property has been triggered at this time.        }

2 after setting the element float, what is the display value of the element?

Automatically becomes Display:block

3 is the layout of the mobile side used for media queries?

Media queries allow you to define different CSS for different sizes and sizes of media, adapting to the display of the corresponding device.

2. CSS: @media only screen and (max-device-width:480px) {/CSS style /}

4 Use the CSS preprocessor?

Less SASS

5 What are the methods for optimizing CSS and improving performance?

1. Avoid over-restraint

2. Avoid descendant selectors

3. Avoid chained selectors

4. Use a compact syntax

5. Avoid unnecessary namespaces

6. Avoid unnecessary duplication

7. It is best to use a name that represents semantics. A good class name should be a description of what he is and not what it looks like.

8. Avoid! Important, you can choose a different selector

9. As thin as possible, you can merge duplicate rules in different classes.

6 How does a browser parse a CSS selector?

The parsing of the CSS selector is parsed from right to left. If you match from left to right, you find that you do not meet the rules, you need to backtrack, you will lose a lot of performance. If you match right-to-left, find all the right-most nodes, and for each node, look up the parent node until the root element is found or the matching rule satisfies the criteria, then the traversal of the branch is ended. The performance of the two matching rules varies greatly, because right-to-left matching filters out a large number of non-conforming right-most nodes (leaf nodes) in the first step, while the performance of left-to-right matching rules is wasted on failed lookups.
After parsing the CSS, it is necessary to parse the results with the contents of the DOM tree to create a Render tree, which is used for drawing. When creating the render tree (the "attachment" process in WebKit), the browser will determine what Render tree to generate based on the parsing result of the CSS (Style Rules) for each element in the DOM tree.

7 Should I use an odd or even font in a Web page? Why is it?

Use an even number body. Even number numbers are relatively easier to scale with other parts of the web design. Windows comes with the dot matrix (Arial) from the beginning of the Vista only provides 12, 14, three px of the size of the lattice, and 13, 15, PX with a small number of points. (that is, each word occupies a larger space of 1 px, but the lattice has not changed), so slightly sparse.

What are the 8 margin and padding suitable for use in each scenario?

When to use margin:

1. Need to add white space outside the border

2. No background color required in white space

3. The gap between the top and bottom two boxes that need to be offset from one another.

When to use padding:

1. Need to add a blank inside the border

2. White space requires background color

3. Up and down connected two boxes of blank, hope for the sum of the two.

Compatibility issues: In IE5 IE6, when you specify margin for a float box, the margin on the left side may become two times the width. Solved by changing the padding or specifying the display:inline of the box.

9 is the percentage setting for the vertical of the element relative to the height of the container?

When you set the width of an element by a percentage, it is calculated relative to the width of the parent container, but for some properties that represent a vertical distance, such as Padding-top, Padding-bottom, Margin-top, Margin-bottom, and so on, When you set them by percentage, the width of the parent container is also the basis, not the height.

10 What is the principle of full-screen scrolling? What properties of CSS are used?

1. Principle: A bit similar to the carousel, the whole element has been ranked down, assuming there are 5 needs to show the full screen page, then the height is 500%, just show 100%, the rest can be transform for y-axis positioning, can also be achieved through margin-top

2. Overflow:hidden;transition:all 1000ms Ease;

11 What is responsive design? What is the basic principle of responsive design? How to be compatible with low version IE?

Responsive web Design (responsive) is a Web site that is compatible with multiple endpoints, rather than making a specific version for each terminal.
The basic principle is to use media queries to detect different device screen sizes for processing.
The page header must have a meta-declaration of viewport.

<meta name= "' Viewport '" content= "" Width=device-width, "initial-scale=" 1. "Maximum-scale=" 1,user-scalable=no ""/ >

12 parallax scrolling effect?

Parallax Scrolling (Parallax scrolling) creates stunning 3D effects by controlling the movement of the background faster than the foreground movement by scrolling down the page.

1. CSS3 implementation
   Advantages: Short development time, good performance and development efficiency, disadvantage is not compatible with the lower version of the browser

2. jquery implementation
   By controlling the scrolling speed of different layers, the time of each layer is calculated and the scrolling effect is controlled.
   Advantages: can be compatible to various versions, the effect of good control
   Cons: Developed to high demand for producers

3. Plug-In implementation method
   For example: parallax-scrolling, compatibility is very good

: Before and: What is the difference between a double colon and a single colon in after? Explain the effect of these 2 pseudo-elements

1. A single colon (:) used for CSS3 pseudo-classes, double colons (::) for CSS3 pseudo-elements.

2. :: Before is the existence of a child element that defines a pseudo-element before the element's principal content. Does not exist in the DOM and exists only in the page.

: Before and: After these two pseudo-elements, is the new appearance in the CSS2.1. At first, the pseudo-element prefix uses a single colon syntax, but as the web evolves, in the CSS3 specification, the pseudo-element syntax is modified to use a double colon, which becomes:: Before:: After

14 How do you understand line-height?

Line height refers to a line of text, in particular, the distance between the baseline between two lines of text. The height of the CSS is high and line-height, does not define the height property, and ultimately its performance must be line-height.
Single line text Vertical center: The line-height value is set to the same size as the height of the value can realize the vertical center of single-line text, you can actually delete the height.

Multiline text is centered vertically: you need to set the display property to Inline-block.

15 How do I get Chrome to support text that's less than 12px?

P{font-size:10px;-webkit-transform:scale (0.8);}//0.8 is the scale

16 make the font in the page clear, and make it thinner with CSS?

-webkit-font-smoothing does not work under the window system, but it works on iOS devices-webkit-font-smoothing:antialiased is the best, grayscale smoothing.

position:fixed; how do I deal with the invalid under Android?

<

Meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=no "/>

18 If you need to write animation manually, how long do you think the minimum time interval is, and why?

The default frequency for most displays is 60Hz, which is 1 seconds to refresh 60 times, so theoretically the minimum interval is 1/60*1000ms = 16.7ms.

What is the cause of the invisible gap between Li and Li? What's the answer?

The line box arrangement will be affected by the middle blank (carriage return space) and so on, because the space is also a character, these blanks will also be applied style, occupy space, so there will be an interval, the character size is set to 0, there is no space.
Workaround:

1. You can write the <li> code all in one row

2. Floating Li in Float:left

3. In UL with font-size:0 (Google does not support); You can use letter-space:-3px

When will the gap be shown in Display:inline-block?

1. There is a space when there will be a gap resolved: Remove space

2. When margin is positive, resolve: margin uses negative values

3. Use font-size time to solve: font-size:0, letter-spacing, word-spacing

21 has a highly adaptive p, which has two p, a height of 100px, hoping that the other fills the remaining height

The outer p uses position:relative; the highly adaptive p uses position:absolute; top:100px; bottom:0; left:0

PNG, JPG, GIF These picture formats explain, when to use respectively. Have you ever known WEBP?

1. PNG is a portable web image (Portable Network Graphics) is a lossless data compression bitmap file format. The advantages are: High compression ratio, good color. It can be used in most places.

2. JPG is a kind of distortion compression method for photo use, it is a kind of destructive compression, and it does well in hue and color smooth change. On WWW, the format used to store and transfer photos.

3. GIF is a bitmap file format that reproduces true-color images in 8-bit colors. Animations can be achieved.

4. The WEBP format is the image format that Google introduced in 2010, with a compression rate of only 2/3 jpg and a 45% smaller size than PNG. The disadvantage is that the compression time is longer, the compatibility is not good, the current Google and opera support.

What is the difference between body and body before the style label is written?

Page loading top-down is of course loading the style first.
After the body tag is written, the browser parses the HTML document in a row-by-line manner, and when parsing to a style sheet written in the trailer (or written in a style tag) causes the browser to stop rendering before it is stopped, waiting to be loaded, and then re-rendering after parsing the style sheet. Fouc phenomenon may occur under IE in Windows (i.e., page flicker problem caused by style invalidation)

The CSS property Overflow property defines how the content of the overflow element content area will be handled?

When the parameter is scroll, scroll bars will appear.
When the parameter is auto, a scrollbar appears when the child element content is larger than the parent element.
When the parameter is visible, the overflow content appears outside the parent element.
The parameter is hidden when the overflow is hidden.

25 Explain the CSS Sprites

All the images involved in a page are included in a large image, and then the background is positioned using a combination of CSS background-image,background-repeat,background-position. Using CSS sprites can greatly improve the performance of the page by reducing the HTTP request of the webpage, and the CSS sprites can reduce the byte of the picture.