50-Channel CSS basic questions and Answers

1 Introduction to 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

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

CSS selector:

• ID selector (#myid)

• Class selector (. myclassname)

• Tag Selector (Div, H1, p)

• Adjacent 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-inheritable styles

• Border

• Padding

• Margin

• Width

• Height

Priority (Nearest principle):

!important > [id > Class > tag]

!important is higher than inline precedence.

4 How is the CSS precedence algorithm calculated?

Element selector: 1

Class Selector: 10

ID Selector: 100

Element Tags: 1000

1. !important declares a style with the highest precedence if the conflict is recalculated.

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

3. Inherited styles have the lowest precedence.

5 CSS3 What are the new pseudo-classes?

• 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 do I center a 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;   Float:left;   Position:absolute;   width:200px;   height:100px;   left:50%;   top:50%;   Margin: -50px 0 0-100px;

Left and right centering of absolute positioning:

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

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

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

• Inline (default)--inline

• none--Hidden

• block--Block Display

• table--Table Display

• list-item--Project List

• Inline-block

The value of 8 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.

What are the new features of the 9 CSS3?

• Rgba and transparency

• Background-image,background-origin (Content-box/padding-box/border-box), background-size,background-repeat

• Word-wrap (wrapping the long indivisible words), Word-wrap:break-word

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

• Font-face Properties: Defining Your own fonts

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

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

• Box Shadow:box-shadow:10px10px5px#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 scenario?

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, the block layout arranges the blocks in a vertical direction from top to bottom, while the inline layout is arranged horizontally. 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;

How is the layout of 121 full-screen products designed?

The first kind of real product word:

1. Three pieces of aspect are definite;

2. Above that block with margin:0 Auto; center;

3. The following two block with float or inline-block do not wrap;

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

1, different browser label default margin and padding is not the same.

   *{margin:0;  Padding:0;}

2, IE6 two-sided bug: block attribute tag after float, there is the margin of the case, in the IE6 show margin than set the large. Hack:display:inline; convert it into inline properties.

3, the gradual recognition of the way, from the overall part of the gradual exclusion. First, the use of the "\9" tag, ie browser from all the circumstances of the separation. Next, use "+" again to separate IE8 and IE7, IE6, so that IE8 has been independently identified.

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

4, set a smaller height label (generally less than 10px), in the ie6,ie7 height beyond its 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.

5, IE, you can use the method to get the general properties of the custom properties, you can also use GetAttribute () to get the custom attributes; Under Firefox, you can only use getattribute () to obtain a custom attribute. Workaround: Unify through getattribute () to get the custom attributes.

6, the Chrome Chinese interface by default will be less than 12px of text to force the 12px display, can be resolved by adding CSS properties -webkit-text-size-adjust:none; .

7, hyperlinks after access to the hover style will not appear, the clicked-visited hyperlink style no longer have hover and active. The workaround is to change the order in which CSS properties are arranged: L-v-h-a (Love Hate)

{}{}{}{}

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.

How does the containing block calculation in absolute differ from 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:

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

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

If none are found, then initial containing block.

Add:

1. Static (default)/relative: Simply say the content box of its parent element (that is, remove the padding part)

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

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

The Visibility property in the 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.

1. In Chrome, there's no difference between using collapse values and using hidden.

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

What is 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)

What happens when position is superimposed on the features of display, overflow, and float?

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 understanding of the BFC specification (block-level formatting context: Block formatting context)?

BFC specifies how the internal block box is laid out.

Positioning scheme:

1. The inner box is placed one after the other in the vertical direction.

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

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

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

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

6. Floating elements also participate in calculations when calculating the height of the BFC.

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

1. The root element, which is the HTML

2. The value of float is not none (default)

3. The value of overflow is not visible (default)

4. The values for display are Inline-block, Table-cell, table-caption

5. The value of position is absolute or fixed

20 Why does it appear floating and when do I need to clear the float? 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:

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

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

3. Unless the first element floats, the element before the element also needs to float, otherwise it will affect the structure of the page display.

How to clear float:

1. Parent DIV defines height

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

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

4. Parent DIV Definition Zoom

21 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:

<div class= "aside" ></div> <div class= "text" > <div class= "main" ></div> </ Div> <!--Here's the CSS code---aside{Margin-bottom:100px;width:100px;Height:150px;background:#f66; }. Main{Margin-top:100px;Height:200px;background:#fcc; }. Text{/*Box main outside a div, by changing the properties of this div to make two boxes belong to two different BFC, so as to prevent margin overlap*/Overflow:Hidden;//The BFC property 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 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.

1. Inside:

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

2. CSS:

{/*CSS style */}

24 Use the CSS preprocessor? Less,sass.

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

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.

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

27 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 different scenarios for the use of margin and padding?

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 twice the width. Solved by changing the padding or specifying the display:inline of the box.

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

30 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;

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.

   <meta name= ' viewport ' content= "Width=device-width, 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.

1, CSS3 realization

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

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

::beforeis a pseudo-element that is defined before the element's body content, with the existence of a child element. Does not exist in the DOM and exists only in the page.

:beforeAnd :after These two pseudo-elements, are emerging 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 syntax of the pseudo-element is modified to use double colons to become ::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 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 zoom ratio

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

-webkit-font-smoothingIt doesn't work under the window system, but it works best on iOS devices -webkit-font-smoothing：antialiased , with grayscale smoothing.

Panax Notoginseng position:fixed; how do I deal with the invalid 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 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. can add

2. The code is all written in a row.

3. Floating Li in Float:left

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

41 There is a highly adaptive div with two div inside, a height of 100px, and hopefully the other to fill the remaining height

The outer div uses:

position:relative;

The highly demanding adaptive Div 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?

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, and it does well in hue and color smooth change. 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.

What is the difference between a style tag and a body before it is written?

The page loads top-down, 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 can occur under IE in Windows (that is, page flicker problems caused by style invalidation).

The overflow property of the CSS 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.

50-Channel CSS basic questions and Answers