Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the CSS high-frequency interview questions". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the CSS high-frequency interview questions"?

one。 What is the BFC mechanism?

BFC (Block Formatting Context), the block-level formatting context, is a separate rendering area that separates elements inside the BFC from those outside the BFC, so that the positioning of internal and external elements does not affect each other.

Trigger condition (any of the following)

The value of float is not none

The value of overflow is not visible

The value of display is one of table-cell, tabble-caption, and inline-block

The value of position is not static or any of the releative

Under IE, Layout can be triggered by zoom:1

BFC layout is different from normal document stream layout:

BFC layout rules:

1. The floating element is calculated by the parent (the parent element triggers the BFC)

two。 Non-floating elements do not override the position of floating elements (non-floating elements trigger BFC)

3. Margin is not passed to the parent (the parent triggers the BFC)

4. The upper and lower margin of two adjacent elements belonging to the same BFC will overlap.

1. Normal document flow layout: floating elements are not calculated by the parent

two。 A non-floating element overrides the position of the floating element

3. Margin is passed to the parent element

4. The margin above and below two adjacent elements will overlap

Application in development

Prevent margin overlap

Can include floating elements-clear internal floats (the principle of clearing floats is that both div are in the same BFC area)

Adaptive two-column layout

Can prevent elements from being overwritten by floating elements

two。 New selectors and properties in CSS3

Here is just a list, specific use, please check out my article on the new selector and properties of css3

Attribute selector

Attribute selector meaning description E [at ^ = "val"] attribute att value begins with "val" element E [att $= "val"] attribute att value ends with "val" element E [att * = "val"] attribute att contains the "val" string element

Structural pseudo-class selector

The meaning of selector describes that E:root matches the root element of the document. For HTML documents, the HTML element E:nth-child (n) matches the nth child element of its parent element, the first number 1E:nth-last-child (n) matches the penultimate child element of its parent element, and the first number 1E:nth-of-type (n) has the same effect as: nth-child (). But matching only elements that use the same tag E:nth-last-of-type (n) is similar to: nth-last-child (), but only matching elements using the same tag E:last-child matches the last child of the parent element, which is equivalent to: nth-last-child (1) E:first-of-type matches the first child element of the same tag under the parent element Equivalent to: nth-of-type (1) E:last-of-type matches the last child element that uses the same tag under the parent element, equivalent to: nth-last-of-type (1) E:only-child matches the only child element under the parent element, which is equivalent to: first-child:last-child or: nth-child (1): nth-last-child (1) E:only-of-type matches the only child element that uses the same tag under the parent element Equivalent to: first-of-type:last-of-type or: nth-of-type (1): nth-last-of-type (1) E:empty matches an element that does not contain any child elements. Note that text nodes are also treated as child elements.

New properties for css3

Attribute meaning description compatible with transition settings transition effects transform transformation effects (move, scale, rotate, stretch or stretch) animation animation effects box-shadow shadow effects FF3.5, Safari4, Chrome 3text-shadow text shadows FF3.5, Opera10, Safari4, Chrome 3border-colors set multi-color FF3+boder-image picture frames FF3.5, Safari4, Chrome 3text-overflow text truncation IE6+, Safari4, Chrome3, Opera10word-wrap automatic line wrapping IE6+, FF3.5 Safari 4, Chrome 3border-radius fillet border FF3+, Safari 4, Chrome 3opacity opacity allbox-sizing control box model composition mode FF3+, Opera 10, Safari 4, Chrome 3outline outer frame FF3+, safari 4, chrome 3, opera 10background-size does not specify the size of the background picture safari 4, chrome 3, opera 10background-origin specifies where the background picture starts to display safari 4, chrome 3, FF3+ background-clip specifies where the background picture starts trimming safari 4, chrome 3rgba based on rforme g B three color channels to set color values, and a to set transparency safari 4, chrome 3, FF3, opera 10

three。 Central layout

Horizontal center

Inline element: text-align:center

Block-level element: margin:0 auto

Absolute positioning and mobility: absolute + transform

Absolute positioning and negative margin: absolute + margin

Flex layout: flex + justify-content:center

Vertical center

Child elements are single-line text: line-height:height

Absolute + transform

Flex + align-items:center

Table: display:table-cell; vertical-align: middle

Using position and top and negative margin

Horizontal and vertical center

1. Known element width and height: absolute positioning + margin:auto:

Div {width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto;}

two。 Known element width and height: absolute positioning + negative margin

Div {width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto;}

3. Absolute+transform

Div {width: 200px; height: 200px; background: green; position:absolute; left:50%; / * locate 50% of the parent * / top:50%; transform: translate (- 50% meme 50%); / * your own 50% * /}

4.flex + justify-content + align-items

.box {height:600px; display:flex; justify-content:center; / / child element horizontal center align-items:center; / / child element vertical center / * aa can achieve indefinite width and height horizontal vertical center in only three sentences. * /} .box > div {background: green; width: 200px; height: 200px;}

four。 What are the ways to clear floats, and what are their advantages and disadvantages?

An empty element that uses the clear attribute uses an empty element such as an empty element after the floating element, and assigns the .clear {clear:both;} attribute to the CSS to clean up the float. It can also be used or used for cleaning.

Advantages and disadvantages: simplicity, writing a small amount of code, and good compatibility: adding non-semantic html elements is not conducive to code semantics, and the cost of later maintenance is high.

Use the overflow attribute of css to add overflow:hidden; or overflow:auto; to the container of floating elements to clear floats, and you also need to trigger hasLayout in IE6, such as setting the width and height of the container for the parent element or setting zoom:1. After adding the overflow attribute, the floating element goes back to the container layer, propping up the container high and achieving the effect of cleaning up the float.

Pros: simple, less code, browser support good disadvantages: can not be used with position, because the excess size will be hidden overflow:hidden

Use CSS's: after pseudo-element combination: after pseudo-element (note that this is not a pseudo-class, but a pseudo-element, representing the nearest element after an element) and IEhack, which is perfectly compatible with the current mainstream browsers, where IEhack refers to triggering hasLayout. Add a clearfix class to the container of the floating element, and then add one to the class: after pseudo-element implementation element to add an invisible Block element cleanup float at the end of the element. The CSS pseudo element adds an invisible space "020" or dot "." at the end of the inner element of the container, and assigns the clear attribute to clear the float. It is important to note that for IE6 and IE7 browsers, add a zoom:1; trigger haslayout to the class clearfix.

Advantages: good browser support, not prone to strange problems (at present: large websites are used, such as: Tencent, NetEase, Sina, etc.) disadvantages: a lot of code, it is necessary to use two lines of code together in order to make mainstream browsers support

Set the height of the parent element

Simple, less code, easy to grasp the disadvantages: only suitable for highly fixed layout

five。 What is the principle of creating a triangle with pure CSS

Before writing triangles, I memorized the code directly without exploring the reasons. I also did not explore the reasons until an interview, when the interviewer asked me to talk about the principle of creating triangles by css. Go through the information as soon as you get back. Then I listed the process that I understood at that time:

1. Write a border application that we are most familiar with

.box {width:100px; height:100px; border: 3px solid; border-color:#1b93fb # 1bfb24 # efad48 # ef4848;}

The effect is as follows:

two。 Next, we increase the border value

.box {width:100px; height:100px; border: 50px solid; border-color:#1b93fb # 1bfb24 # efad48 # ef4848;}

It is easy to find that border rendering is not square, but trapezoidal.

3. On the basis of increasing the border, what will happen if we change the width and height of the box to 0?

.box {width:0px; height:0px; border: 50px solid; border-color:#1b93fb # 1bfb24 # efad48 # ef4848;}

A rectangle composed of four triangles appears in front of us, for example, if we only want one triangle, can we imagine making the other three invisible?

4. Set transparency and hide three triangles

.box {width:0px; height:0px; border: 50px solid; border-color:transparent transparent transparent # ef4848;}

If the triangle comes out like this, is it very simple? of course, we can also use reverse thinking to write this effect, that is, first make all the borders transparent, and then which side we need to set the color to it, the effect is the same.

.box {width:0px; height:0px; border: 50px solid transparent; border-left:50px solid # ef4848;}

In this way, it should not be a problem for the interviewer to make it clear. The point is to understand the application of border.

six。 What are the ways to realize the three-column layout? describe them respectively.

The three-column layout, as the name implies, is fixed on both sides and adaptive in the middle. Three-column layout is very common in development, so what is a three-column layout? That is, the left and right modules have a fixed width, and the middle module adapts to changes in the browser. The final effect you want to achieve is as follows:

Four implementation methods are listed below. In development, you can choose the method that suits you according to your actual needs:

Flex layout

.container {display:flex; justify-content: center; height: 200px; background: # eee;} .left {width: 200px; background-color: red; height: 100%;} .main {background-color: yellow; flex: 1;} .right {width: 200px; background-color: green;} 1 2 3

Simple and practical, now more popular solution, but need to consider browser compatibility.

Absolute positioning layout

.container {position: relative; background:#eee; height:200px;} .main {height:200px; margin: 0 120px; background-color: yellow;} .left {position: absolute; width: 100px; height:200px; left: 0; top: 0; background-color: red;} .right {position: absolute; width: 100px; height:200px; background-color: green Right: 0; top: 0;} 1 2 3

This scheme is also simple and practical, and can put the elements first, so that the main content is loaded first!

Double wing layout

.content {float: left; width: 100%;} .main {height: 200px; margin-left: 110px; margin-right: 220px; background-color: yellow;} .left {float: left; height: 200px; width: 100px; margin-left:-100%; background-color: red;} .right {width: 200px; height: 200px; float: right; margin-left:-200px Background-color: green;}

Holy Grail layout

.container {margin-left: 120px; margin-right: 220px;} .main {float: left; width: 100%; height: 300px; background-color: yellow;} .left {float: left; width: 100px; height: 300px; margin-left:-100%; position: relative; left:-120px; background-color: blue;} .right {float: left; width: 200px Height: 300px; margin-left:-200px; position: relative; right:-220px; background-color: green;}

The Grail layout and the two-wing layout have the same solution in the first half, that is, all three columns are float floating, but the left and right columns are added with negative margin to make them side by side with the middle column div to form a three-column layout.

seven。 The thin Line of realizing 0.5px by css3

.line {position: relative;} .line: after {content: "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: # 00000000;-webkit-transform: scaleY (.5); transform: scaleY (.5);}

eight。 The difference between link and @ import

Subordinate relationship difference

@ import is the syntax rule provided by CSS, which can only import stylesheets; link is the tag provided by HTML, which can not only load CSS files, but also define RSS, rel connection properties, etc.

two。 Loading sequence difference

When the page is loaded, the CSS introduced by the link tag is loaded at the same time; the CSS introduced by @ import will be loaded after the page is loaded.

3. Compatibility difference

@ import is a syntax unique to CSS2.1, so it can only be recognized in IE5+; the link tag, as a HTML element, has no compatibility issues.

4. Differences in DOM controllability

You can change the style by manipulating DOM through JS and inserting link tags; because the DOM method is document-based, you cannot insert styles using @ import.

This is the end of the css section. If there is anything else you often encounter in the interview, you can leave me a message in the comments section. I will sort it out when I have time. IT (being kicked) is a big family, which is convenient for you, me and him.

nine。 Why initialize css style in development

Due to browser compatibility problems, different browsers have different default values for some tags, and page display differences between browsers often occur if there is no initialization of CSS.

ten。 What are the ways to optimize and improve the performance of CSS

Try to write the style in a separate css file, and there are several advantages to writing the code as a separate css file by reference in the head element:

1. Content and style are separated and easy to manage and maintain

two。 Reduce page size

3. Css files can be cached and reused, and the maintenance cost is reduced.

Do not use @ import

Avoid using complex selectors, the fewer levels the better, it is recommended that the nesting of selectors should not exceed three layers, such as:

Simplify the style file of the page and get rid of the unused styles

Reduce the amount of code by using CSS inheritance

Avoid! Important, you can choose another selector

Thank you for your reading, the above is the content of "what are the CSS high-frequency interview questions?" after the study of this article, I believe you have a deeper understanding of what the CSS high-frequency interview questions have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.