20-Channel CSS Foundation questions

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

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 selectors: ID selector (#myid), class selector (. myclassname), Tag Selector (p, 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 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 to center p? How do I center a floating element? How do I get the absolutely positioned p centered?

P:

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-100p X

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, will do after 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?

1. rgba and transparency

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

3. word-wrap (wrapping long, indivisible words) Word-wrap:break-word

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

5. font-face properties: Define your own fonts

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

9. Media query: Define two sets of CSS with 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 TRANSP arent;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 p above is set to 100%, the p below is 50% wide, and then float or inline is used to make it non-newline.

13 Common compatibility issues?

2. The default margin and padding for different browser tags are not the same. *{margin:0;padding:0;}

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

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

8. {background-color: #f1ee18;/* All recognition */.background-color: #00deff \9;/*ie6, 7, 8 identify */+background-color: #a200ff;/*ie6, 7 identification */_background-color: #1e0bd1;/*ie6 recognition */}

10. Set a smaller height label (typically less than 10px), and height in ie6,ie7 above 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.

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

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

16. The hover style does not appear after the hyperlink has been accessed, and the clicked-visited hyperlink style no longer has 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.

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 p defines height

2. After the last floating element, add the empty P label and the style Clear:both.

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

4. Parent P defines zoom