45-Channel CSS Basic questions (with answer)

1, introduce the standard CSS box model? What's the difference between a box model with a low version ie?

Standard box Model: width = width of contents (content) + border + padding + margin
Low version IE box model: width = content width (content+border+padding) + margin

2, box-sizing properties?

The parsing mode of the box model used to control the element, the default is Content-box
CONTEXT-BOX:W3C's standard box model, the Height/width attribute of the set element refers to the height/width of the content section
Border-box:ie traditional box model. The Height/width property of the Set element refers to the height/width of the border + padding + Content section

3. What are CSS selectors? Which properties can be inherited?

CSS selectors: ID selector (#myid), class selector (. myclassname), Tag selector (Div, H1, p), neighbor selector (H1 + p), sub-selector (ul > li), descendant selector (Li a), wildcard selector (*), property selector (a [rel= "external"]), Pseudo-class selector (a:hover, Li:nth-child)

Inheritable properties: font-size, font-family, color

Non-inheriting styles: border, padding, margin, width, height

Priority (Nearest principle):!important > [id > Class > tag]
!important higher than inline priority

4, how to calculate the CSS priority algorithm?

Element selector: 1
Class Selector: 10
ID Selector: 100
Element Tags: 1000

?! Important declares a style with the highest precedence if the conflict is recalculated.

? If the priority is the same, select the last style that appears.

The inherited style has the lowest precedence.

5, CSS3 new Pseudo-class have those?

P:first-of-type Select the first element that belongs to its parent element
P:last-of-type Select the last element that belongs to its parent element
P:only-of-type Select an element that belongs to its parent element only
P:only-child Select a unique child element that belongs to its parent element
P:nth-child (2) Select the second child element that belongs to its parent element
: Enabled:D isabled the disabled state of the form control.
: The Checked box or check box is selected.

6, how to center div? How do I center a floating element? How do I get an absolutely positioned div centered?

Div:

border: 1px solid red;margin: 0 auto; height: 50px;width: 80px;

The floating element is centered around the top and bottom:

border:1px solid red;

absolute;width:200px;
height:100px;
left:50%;
top:50%;

Left and right centering of absolute positioning:

BORDER:1PX solid black;
Position:absolute;
width:200px;
height:100px;
margin:0 Auto;
left:0;

There is a more elegant way of centering is to use Flexbox, I will do the finishing.

7. What are the values of display? To explain their role?

Inline (default)--inline
none--Hidden
block--Block Display
table--Table Display
list-item--Project List
Inline-block

8, the value of position?

Static (default): Arranges according to normal document flow;
Relative (relative positioning): not out of the document flow, refer to their own static position through top, bottom, left, right positioning;
Absolute (absolute positioning): Refer to its nearest a non-static parent element through top, bottom, left, and right positioning;
Fixed position: The fixed reference pair is like a visual window.

9. What are the new features of CSS3?

? Rgba and transparency

? background-image Background-origin (content-box/padding-box/border-box) background-size background-repeat

? word-wrap (wrapping a long, indivisible word) word-wrap:break-word

Text shadow: text-shadow:5px 5px 5px #FF0000; (horizontal shadow, vertical Shadow, blur distance, shadow color)

? Font-face properties: Define your own fonts

? Fillet (Border radius): Border-radius property used to create rounded corners

? Border Picture: Border-image:url (border.png) round

Box Shadow: box-shadow:10px 10px 5px #888888

? Media query: Define two sets of CSS that will take different properties when the browser size changes

10, please explain the CSS3 flexbox (flexible box layout model), and the applicable scene?

The purpose of this layout model is to provide a more efficient way to lay out, align, and allocate space for items in a container. In the traditional layout mode, block layout is to arrange the blocks in vertical direction from top to bottom;

The inline layout is arranged in a horizontal direction. The flexible box layout does not have this inherent direction limitation and can be freely operated by the developer.
Trial scenario: Flexible layouts are suitable for mobile front-end development and are perfectly supported on Android and iOS.

11. What is the principle of creating a triangle with pure CSS?

First, you need to set the width and height of the element to 0. Then set the border style.

width:0;
height:0;
border-top:40px solid Transparent;
border-left:40px solid Transparent;
border-right:40px solid Transparent;
border-bottom:40px solid #ff0000;

12. How to design a full-screen product word layout?

The first kind of real product word:

? Three blocks of aspect are determined;

? The upper piece is margin:0 auto;

? The following two block with float or inline-block do not change line;

? Adjust the position with margin to center them.

The second full-screen word layout:
The div above is set to 100%, the following div is 50% wide, then use float or inline to keep it from wrapping.

13. Common compatibility issues?

? The default margin for different browser tags is not the same as padding.

*{margin:0;padding:0;}

? IE6 Two-sided bug: block attribute tag after float, there are rows of margin in the case, the IE6 display margin than set the large. Hack:display:inline; convert it into inline properties.

Gradual recognition of the way, from the overall part of the gradual exclusion. First, the smart use of the "9" mark, the Internet Explorer from all the circumstances of the separation. Next, use "+" again to separate IE8 and IE7, IE6, so that IE8 has been independently identified.

{
/* All recognition */

/*IE6, 7, 8 identification */
+
/*IE6, 7 identification */
_
/*IE6 Recognition */}

? set a smaller height label (typically less than 10px), in ie6,ie7 height beyond your own set height. Hack: Set Overflow:hidden for labels that are out of height, or set row height line-height less than the height you set.

? Under IE, you can get custom properties by using the method that gets the general properties, or you can use GetAttribute () to derive the custom attributes, and under Firefox, you can only use getattribute () to derive the custom attributes. Workaround: Unify through getattribute () to get the custom attributes.

? In the Chrome interface, the default will be less than 12px of text will be forced to display 12px, by adding CSS properties-webkit-text-size-adjust:none; Solve.

The hover style does not appear after hyperlink access, and the hyperlink style that has been clicked is no longer hover and active.

The workaround is to change the order in which CSS properties are arranged: L-v-h-a (Love Hate): a:link {} a:visited {} a:hover {} a:active {}

14. Why CSS styles are initialized

Because of browser compatibility issues, different browsers have different default values for some tags, and if the CSS is not initialized, the page display differences between browsers will often occur.

15. What is the difference between the containing block calculation mode of absolute and normal flow?

Whichever it belongs to, first find the element with the nearest position value in its ancestor element that is not static, and then judge:

If this element is an inline element, the containing block is the smallest rectangle of the padding box (except the margin, border area) of the first and last inline box that can contain this element;

Otherwise, it is composed of the padding box of this ancestor element.

If none are found, then initial containing block.

Add:

Static (default)/relative: Simply the Content box of its parent element (that is, the part that removes padding)

Absolute: Find the nearest element that is positioned as absolute/relative

Fixed: its containing block is the root element (Html/body)

16. The visibility attribute in CSS has a collapse attribute value? What's the difference after different browsers?

When an element's visibility property is set to a collapse value, it behaves the same as hidden for the normal element.

In Chrome, there is no difference between using collapse values and using hidden.

? Firefox,opera and IE, there is no difference between using collapse values and using Display:none.

17, the difference between Display:none and Visibility:hidden?

Display:none does not display the corresponding element and no longer allocates space in the document layout (reflow + redraw)
Visibility:hidden hides the corresponding elements, still retains the original space in the document layout (redraw)

18. What happens to position with display, overflow, and float when these features overlap each other?

The Display property specifies the type of box that the element should generate; The Position property specifies the type of positioning of the element; The float property is a layout that defines the direction in which the element floats.

Similar to the priority mechanism: the position:absolute/fixed has the highest priority, and when they are there, float does not work and display values need to be adjusted. A float or absolute positioned element can only be a block element or table.

19, the BFC specification (block-level format context: Blocks formatting context) understanding?

BFC specifies how the internal block box is laid out.
Positioning scheme:

? The inner box is placed one by one in the vertical direction.

? The vertical distance of the box is determined by margin, and the margin of the two adjacent boxes belonging to the same BFC overlap.

? The left side of the margin box for each element touches the left side of the containing block border box.

? The BFC area does not overlap with the float box.

? BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements.

When calculating the height of a BFC, floating elements are also involved in the calculation.

BFC can be triggered if one of the following conditions is met

? root element, or HTML

The value of float is not none (default)

The value of the overflow is not visible (default)

The value of display is Inline-block, Table-cell, table-caption

The value of position is absolute or fixed

20, why will appear floating and when need to clear floating? How to clear the float?

The floating element stops at the border that contains it or the bounding rectangle of the floating element. Because the floating element is not in the document flow, the block box of the document flow behaves as if the floating box does not exist.

Floating elements float on the block box of the document flow.
Problems caused by floating:

? The height of the parent element cannot be stretched, affecting elements that are siblings of the parent element

? Non-floating elements (inline elements) that are siblings of a floating element are followed

? The element before the element also needs to float, otherwise it will affect the structure of the page display, unless the first element floats.

How to clear float:

? Parent DIV defines height

After the last floating element, empty the div tag and add the style clear:both.

The parent tag that contains the floating element adds a style overflow to hidden or auto.

? Parent DIV Defines zoom

21, the upper and lower margin coincident problem

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

 <div class= "aside" ></div><div class= "text" > <div class= "main" ></div ></div><!--Here is the CSS code--
. Aside {            
  margin-bottom: 100px;   width:100px;           &NBSP 
  height:150px;             
  bac Kground: #f66;        }       &NBSP; 
. Main {          
   &NBSP;M argin-top:100px;           &NBSP 
    height:200px;             
 &N Bsp  background: #fcc;        } 
. text{            
/* Box main out of the package a Div, 
 By changing the properties of this div to make two 
 boxes belong to two different BFC, 
 to prevent margin overlap */overflow:hidden;   
//The BFC attribute has been triggered at this time.        } 

22. After setting the element float, what is the display value of the element?

Automatically becomes Display:block

23, the mobile side of the layout used media query it?

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

?

<link rel= "stylesheet" type= "Text/css" href= "Xxx.css" media= "only screens and (max-device-width:480px)" >

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

24. Do you use CSS preprocessor?
Less SASS

25. What are the methods for optimizing CSS and improving performance?

? Avoid excessive restraint

? Avoid descendant selectors

? Avoid chained selectors

? Use a compact syntax

? Avoid unnecessary namespaces

? Avoid unnecessary duplication

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

Avoid Important, you can choose a different selector

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

26. How does the browser parse the 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.

27. Should I use an odd or even font in a webpage? 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.

28, margin and padding respectively suitable for what scene use?

When to use margin:

? You need to add white space outside the border

White space does not require a background color

? The gap between the top and bottom connected two boxes needs to be offset from one another.

When to use padding:

? You need to add a blank inside the border

The white space requires a background color.

Two boxes in the upper and lower spaces, hoping 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.

29. Is the percentage setting of the element vertical 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.

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

? 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

? overflow:hidden;transition:all 1000ms Ease;

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

Initial-scale=1. Maximum-scale=1,
User-scalable=no ">

32, 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.

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

? 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

? plug-In implementation method
For example: parallax-scrolling, compatibility is very good

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

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

?:: Before is a pseudo-element that is defined before the element's principal content, with the existence of a child element. 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

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

35, how to let chrome support less than 12px of text?

p{
font-size:10px;
-webkit-transform:scale(0.8);
} 
//0.8是缩放比例

36, let the page in the font to become clear, fine with CSS how to do?

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

37, position:fixed; How to deal with the invalid under Android?

User-scalable=no "/>

38, if you need to manually write animation, you think the minimum time interval is how long, 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.

39. 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:

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

? floating Li in Float:left

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

40. When will the Display:inline-block show clearance?

There is a space when there is a gap resolved: Remove space

When the margin value is resolved: Margin uses a negative value

? When using font-size: font-size:0, letter-spacing, word-spacing

41, there is a highly adaptive div, there are two div, a height of 100px, I hope the other fills the remaining height

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

42, PNG, JPG, gif these picture format explanation, when use respectively. Have you ever known WEBP?

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

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

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

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.

43. What is the difference between the style label and the body before the body 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)

44. CSS Properties 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.

45, explain the CSS Sprites

All the pictures 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.

45-Channel CSS Basic questions (with answer)