CSS basics and css Basics

CSS basics and css Basics

1. What is the standard CSS box model? What is the difference between the box model and the lower version of IE?

Standard box model: width = content width (content) + border + padding + margin
Lower version IE box model: width = content width (content + border + padding) + margin

2 box-sizing attributes?

The resolution mode of the box model used to control elements. The default value is content-box.
Context-box: W3C standard box model. Setting the height/width attribute of an element indicates the height/width of the content part.
Border-box: Traditional IE box model. The height/width attribute of the element indicates the height/width of the border + padding + content part.

3. What are CSS selectors? What attributes can be inherited?

CSS selector: id selector (# myid) and class selector (. myclassname), tag selector (div, h1, p), adjacent selector (h1 + p), sub-selector (ul> li), descendant selector (li), wildcard selector (*), attribute selector (a [rel = "external"]), pseudo class selector (a: hover, li: nth-child)

Inherited attributes: font-size, font-family, color

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

Priority (proximity principle ):! Important> [id> class> tag]
! Important has a higher priority than inline

4 How is the CSS priority algorithm calculated?

Element selector: 1
Class selector: 10
Id Identifier: 100
Element Tag: 1000

What are the new pseudo classes in 5 CSS3?

P: first-of-type: select the first element of its parent element.
P: last-of-type: select the last element of its parent element.
P: only-of-type: select the element that is unique to its parent element.
P: only-child: select the unique child element of its parent element.
P: nth-child (2) Select the second child element of its parent Element
: Enabled: the disabled status of the disabled form control.
: Checked single sequence or check box is selected.

6. How to center the div? How to center a floating element? How to center an absolutely positioned div?

Css:

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

Center the upper, lower, and left sides of a floating element:

border: 1px solid red;float: left;position: absolute;width: 200px;height: 100px;left: 50%;top: 50%;margin: -50px 0 0 -100px;

Center of the left and right sides of the absolute positioning:

border: 1px solid black;position: absolute;width: 200px;height: 100px;margin: 0 auto;left: 0;right: 0;

Another more elegant way to center is to use flexbox. I will organize it later.

7. What values does display have? What are their roles?

Inline (default)-inline
None-hide
Block-block display
Table-table display
List-item-Project list
Inline-block

8 position value?

Static (default): sort by normal document stream;
Relative;
Absolute (absolute positioning): refer to a parent element not static closest to it and locate it through top, bottom, left, right;
Fixed (fixed positioning): The fixed reference object is a visual window.

9 What are the new features of CSS3?

10 what are the flexxbox (elastic box layout model) of CSS3 and the applicable scenarios?

The purpose of this layout model is to provide a more efficient way to layout, align, and allocate space for entries in the container. In the traditional layout mode, blocks are arranged vertically from top to bottom, while inline is arranged horizontally. There is no such internal direction limit on the elastic box layout, which can be freely operated by developers.
Trial scenario: the flexible layout is suitable for mobile front-end development and is also supported perfectly on Android and ios.

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

First, 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 text layout?

The first true character:

Second, full screen text layout:
The div above is set to 100%, and the div below is 50% in width, and the line feed is disabled by float or inline.

13. Common compatibility problems?

1. The default margin and padding labels for different browsers are different. * {Margin: 0; padding: 0 ;}

2. IE6 bilateral margin bug: When the block attribute label float appears rampant, IE6 shows that the margin is larger than the setting. Hack: display: inline; converts it to an in-row attribute.

3. The method of progressive recognition is gradually excluded from the whole. First, cleverly use the "9" mark to separate ie from all situations. Then, use "+" to separate IE8 from IE7 and IE6, so that IE8 has been recognized independently.

{Background-color: # f1ee18;/* all recognition */background-color: # 00deff \ 9;/* IE6, 7, 8 recognition */+ background-color: # a200ff;/* IE6, 7 recognition */_ background-color: #1e0bd1;/* IE6 recognition */}

4. Set a smaller height label (generally smaller than 10px). The height in IE6 and IE7 exceeds the configured height. Hack: Set overflow: hidden for the label that exceeds the height; or set the line-height to be smaller than the height you set.

5. in IE, you can use the method to obtain general attributes to obtain custom attributes, or you can use getAttribute () to obtain Custom Attributes. In Firefox, you can only use getAttribute () to obtain custom attributes. Solution: Get custom attributes through getAttribute.

6. By default, text smaller than 12px is displayed as 12px on the Chrome Chinese interface. You can add the CSS Attribute-webkit-text-size-adjust: none.

7. After a hyperlink is accessed, the hover style will not appear, and the clicked hyperlink style will no longer have hover and active. The solution is to change the order of CSS properties: L-V-H-A (love hate): a: link {} a: visited {} a: hover {} a: active {}.

14. Why initialize CSS styles?

Due to browser compatibility issues, different browsers have different default values for some labels. If CSS is not initialized, page display differences may occur between browsers.

15 what is the difference between the containing block Calculation Method of absolute and normal stream?

Either way, you must first find the most recent position element in the ancestor element that is not static, and then judge:

If none of them can be found, it is the initial containing block.

Supplement:

16 does the visibility attribute in CSS have a collapse attribute value? What are the differences in different browsers?

When the visibility attribute of an element is set to the collapse Value, the normal behavior of an element is the same as that of hidden.

17 what is the difference between display: none and visibility: hidden?

Display: none does not display the corresponding elements, and no space is allocated in the Document Layout (reflux + re-painting)
Visibility: hidden hides the corresponding elements and retains the original space in the Document Layout (re-painting)

18 what happens when position and display, overflow, and float features are superimposed on each other?

The display attribute specifies the type of the box that the element should generate. The position attribute specifies the positioning type of the element. The float attribute defines the direction in which the element floats.
Similar to the priority mechanism: position: absolute/fixed has the highest priority. If they are present, float does not work and the display value needs to be adjusted. Float or absolute positioning elements can only be block elements or tables.

19 what is the understanding of the BFC specification (block-level formatting context: block formatting context?

BFC defines how Block boxes are deployed internally.
Positioning scheme:

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

20. Why is there a float and when do I need to clear the float? How does one clear the float?

A floating element stays on the border containing its border or floating element. Because floating elements are not in the Document Stream, the block boxes of the Document Stream behave as if the floating boxes do not exist. The floating element floats on the block frame of the Document Stream.
Floating issues:

How to clear floating:

21 question about the upper and lower margin coincidence

Wrap a layer of containers outside the coincidence element and trigger the container to generate a BFC.
Example:

<Div class = "aside"> </div> <div class = "text"> <div class = "main"> </div> <! -- The following is the css code -->. aside {margin-bottom: 100px; width: 100px; height: 150px; background: # f66 ;}. main {margin-top: 100px; height: 200px; background: # fcc ;}. text {/* the outer part of the box main is a div. By changing the property of this div, the two boxes are divided into two different BFC to prevent the margin from overlapping */overflow: hidden; // The BFC attribute is triggered .}

 

22. What is the display value of an element after it is set to float?

Automatically changed to display: block

23 have you used media queries for the mobile terminal layout?

Media query allows you to define different css for media of different sizes and sizes to adapt to the display of devices.

24. Is CSS Preprocessor used?
Less sass

25 what are the methods for CSS optimization and performance improvement?

26. How does the browser parse the CSS selector?

The CSS selector is parsed from right to left. If a match is found from left to right and does not comply with the rules, backtracking is required, which will result in a lot of performance loss. If right-to-left matching is performed, all the rightmost nodes are first found. For each node, the parent node is searched up until the root element or matching rule meeting the condition is found. The traversal of this branch ends. The performance of the two matching rules varies greatly because a large number of rightmost nodes (leaf nodes) that do not meet the conditions are filtered out in the first step ), however, the performance of matching rules from left to right is wasted on failure searches.
After CSS Parsing is complete, you need to analyze the parsing result together with the content of the DOM Tree to create a Render Tree for plotting. When a Render Tree is created (the "Attachment" Process in WebKit), the browser determines the Render Tree to be generated based on the CSS parsing result (Style Rules) for each element in the DOM Tree.

27 should I use an odd or even font in the webpage? Why?

Use an even font. The even font size is more easily proportional to other parts of the web design. The lattice () provided by Windows is only available in the sizes of 12, 14, and 16 px from Vista, the values 13, 15, and 17 px are smaller ones. (That is, the space occupied by each word is 1 px larger, but the dot matrix is not changed), so it is slightly sparse.

28 what scenarios are margin and padding applicable?

When to use margin:

When to use padding:

Compatibility problem: In IE5 IE6, When you specify a margin for a float box, the left-side margin may be twice the width. Change the padding or specify the display: inline of the box.

Is the vertical percentage setting of 29 elements relative to the height of the container?

When the width of an element is set by percentage, it is calculated relative to the width of the parent container. However, for some attributes that indicate vertical distance, such as padding-top, padding-bottom, margin-top, margin-bottom, etc. When you set them by percentage, it is based on the width of the parent container, not the height.

30 what is the principle of full-screen scrolling? What attributes of CSS are used?

31. What is responsive design? What is the basic principle of responsive design? How can I be compatible with earlier IE versions?

Responsive Web design is a website that is compatible with multiple terminals, rather than a specific version for each terminal.
The basic principle is to detect different device screen sizes through media queries.
The page header must have a meta-declared viewport.

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

Parallax Scrolling creates amazing 3D effects by controlling the movement speed of the background when the webpage is scroll down, which is slower than the movement speed of the foreground.

What is the difference between double colons and single colons in 33: before AND: after? Explain the functions of these two pseudo elements

: Before AND: after are two new pseudo elements in CSS2.1. At first, the prefix of pseudo elements uses the single colon syntax. However, with the evolution of the Web, in the CSS3 specification, the syntax of pseudo elements is changed to the double colon and becomes :: before: after

34. How do you understand line-height?

Line height refers to the height of a line of text, specifically the baseline distance between two lines. CSS plays a role in height and line-height. It does not define the height attribute. In the end, its performance must be line-height.
Vertical center of a single line of text: Setting the line-height value to a value of the same size as height can achieve vertical center of a single line of text. In fact, you can also delete the height.
Vertical center of multi-line text: Set the display attribute to inline-block.

35 How can Chrome support text smaller than 12px?

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

36. How can I make the font on the page clearer and finer with CSS?

-Webkit-font-smoothing does not work in the window system, but it works on IOS devices-webkit-font-smoothing: antialiased is the best, and it is grayscale smooth.

37 position: fixed; What should I do if it is invalid in android?

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

38 if you need to manually write an animation, how long do you think the minimum interval is? Why?
The Default Frequency of most displays is 60Hz, that is, 60 refresh times per second. Therefore, the minimum theoretical interval is 1/60*1000 ms = 16.7 ms.

39 why is there an invisible gap between li and li? What are the solutions?

The arrangement of line boxes will be affected by blank spaces in the middle (Press ENTER space). Because spaces are also characters, these spaces will also be applied to the style and occupy space, so there will be an interval, if you set the character size to 0, there will be no space.
Solution:

40 display: When will the inline-block display gaps?

41. There is a highly adaptive div with two divs in it, one with a height of PX and the other with the remaining height.

The outer div uses position: relative; the height of the Self-Adaptive div uses position: absolute; top: 100px; bottom: 0; left: 0

42. png,. jpg, And. gif images are used in different formats. Have you ever learned about webp?

43 what is the difference between the style label and the style label before the body?

To load a page from top to bottom, you must first load the style.
After the HTML document is written in the body tag, the browser parses the HTML document in line-by-line mode. When it is parsed to the style sheet written at the end (external or written in the style tag), the browser stops rendering, after the style sheet is loaded and parsed, it will be re-rendered. In windows IE, FOUC may occur (that is, page flashing caused by style failure)

44 What should I do if the CSS overflow attribute defines the content of the overflow element content area?

When the parameter is scroll, a scroll bar is required.
When the parameter is auto, the scroll bar appears when the content of the child element is greater than that of the parent element.
When the parameter is visible, the overflow content appears outside the parent element.
When the parameter is hidden, overflow is hidden.

45. CSS Sprites

Include all the images involved in a page into a large image, and then use the combination of CSS background-image, background-repeat, and background-position to locate the background. CSS Sprites can effectively reduce http requests on webpages, greatly improving page performance. CSS Sprites can reduce image bytes.