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

This article mainly explains "what are the CSS interview questions". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the CSS interview questions"?

1. Flex often meets with test questions.

Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility to the box model.

1 flex-direction: attribute determines the direction of the spindle Row horizontal direction, the starting point is in the left row-reverse horizontal direction, the right end of the starting point is in the vertical direction of column, the starting point is in the vertical direction of the upper column, and the starting point is in the lower 2 flex-wrap: decide whether to wrap or not. The default is no-wrap; (default) without wrapping wrap. / / Line break. The first line is above the wrap-reverse;// line. The second line is above 3 abbreviations for flex-flow:flex-direction and flex-wrap Default is row nowrap flex-flow: | | 4 justify-content: the alignment defined in item on the spindle flex-start from left to right, flex-end from right to left, center centered, space-between aligned at both ends of space-around, each item on both sides. Equal 5 justify-content: the left, middle and right tripartite of the alignment of the item on the principal axis

Add a display:flex to the parent element

Left and right layout, one side fixed width, one side adaptive support sss ssssss unknown height width up and down / / csshtml,body {height: 100%} .main {display: flex; height: 100%; justify-content: center; align-items: center} .box {width: 300px; border: 1px solid red } / / the unknown height of html is centered from top to bottom. 2. Box model interview questions what is box model?

Pages are stacked by box models, and each HTML element can be called a box model, which includes margin, border, padding, and content from the outside to the inside. The actual width it occupies in the page is the addition of the width of margin + border + paddint + content.

The difference between the Standard Box Model and the IE Box Model

The difference is that the content size of the standard box model is the size of content, while that of IE is the total size of content + padding + border.

How to set up the standard box model and the IE box model

Free switching can be achieved by setting box-sizing:content-box (W3C) / border-box (IE).

The basic concept of BFC interview question BFC

BFC means "block-level formatting context" and is also translated as "block-level formatting scope". It is a concept in the W3C CSS 2.1 specification that determines how elements position their content, as well as their relationships and interactions with other elements. Popularly speaking, it is a special block, which has its own layout and is not affected by external elements.

BFC principle

The boxes inside the BFC will be placed vertically, one after another. Margin overlap also occurs vertically.

BFC is a separate container on the page. The child elements in the container will not affect the outer elements, and the outer ones will not affect the inner ones.

The area of BFC does not overlap with float box.

Floating elements are also counted when calculating the height of the BFC.

How BFC produces overflow: auto/ hidden;position: absolute/ fixed;float: left/ right;display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

When the attribute value is these, it will cause the box to which it belongs to generate BFC.

What are the layouts of the CSS layout interview questions

The compatibility of float layout is better. Solution: add overflow: hidden to the orange block (a BFC is generated). The floating element parent element also has a high collapse problem. The solution is that the parent element generates a BFC.

The layout of absolute is a little simple and straightforward with good compatibility. Shortcomings, away from the document stream.

Flex layout has the advantages of simple layout, flexible layout and mobile-friendly; the disadvantage is that the following ie8 is not compatible.

The advantage of table layout is good compatibility, and sometimes the layout is relatively simple. The disadvantage is that it is the irregular use of TABLE tags, which has been criticized by everyone. It is not suitable when the content is highly inconsistent.

The advantage of grid layout is the first layout module based on two-dimensional direction. It is the first grid-based native layout system. The disadvantage is that it is not compatible with older browsers.

CSS preprocessor

Less (based on Node), Sass (based on Ruby)

CSS preprocessor function

1. Nesting reflects levels and constraints 2. Variables and calculations reduce repetitive code 3.Extend and Mixin code snippet reuse 4. The loop is suitable for modularization of complex and regular style 5.import CSS files.

New features of CSS A new selector for css3

The E:nth-child (n) selector matches the nth child element of its parent element, regardless of element type, n can make a number, keyword, or formula

E:nth-of-type (n) selects the Nth child element of the matching parent element

E:frist-child is referenced relative to the parent, the first child of "all" child elements, and the "position" corresponds to

E:frist-of-type is referenced relative to the parent, the first child element of "specific type" (E)

E:empty selects each E element without child elements

E:target selects the currently active E element

:: selection selects the part of the element selected by the user

Attribute selector

E [abc*= "def"] Select all elements that contain the substring "def" in the adc attribute value

2. Text

Text-shadow:2px 2px 8px # 000; Parameter 1 is the offset to the right, parameter 2 is the offset to the left, parameter 3 is the gradient pixel, parameter 4 is the gradient color

Text-overflow: specifies what happens when text overflows containing elements text-overflow:ellipsis (omitted)

Text-wrap: a rule for wrapping text

Word-break stipulates the rule of line wrapping for non-Chinese, Japanese and Korean texts

Word-wrap splits long inseparable words and wraps them to the next line

White-space: specifies how to handle white space in an element white-space:nowrap specifies that text in a paragraph does not wrap

3. Frame

Fillet of border-raduis:50% border

Border-image frame picture

. border-image {

Border-image-source:url (images/border.png)

Boder-image-slice:27

Border-image-width:10px

Border-iamge-repeat:round; (round tiling) tiling effect does not work on four corners, but only works on four sides.

}

4. Background

Rgba

Backgrounnd-size:cover/contain, where background-size:cover, will scale the "largest" edge, while the other side will be scaled year-on-year to fill the container, and the excess will overflow. Background-size:contain will make the "smallest" edge zoom, and the other side will be scaled year-on-year, which may not necessarily cover the container, and will fully display the picture.

5. Gradual change

Linear-gradient

Background-image:linear-gradient (90 degmeng yellow 20% gamma green 80%)

Radial-gradient

Background-iamge:radial-gradient (120px at center center,yellow,green)

6. Multi-column layout

Column-count

Column-width

Column-gap

Column-rule

7. Transition

Transition

Transition-property:width / / property is a list of css attributes that define transitions, separated by commas

Transition-duration:2s; / / duration of the transition

Transition-timing-function:ease

Transition-delay:5s / / transition delay of 5s

8. Animation, rotation

Animation

Transform: translate (XQuery y) rotate (deg) scale (xQuery y)

Translate

Scale

Rotate

Skew (tilt)

9. Several common values of flex layout 10 and @ media media query display

1, none this element will not be displayed, and does not occupy the page space, this is also different from visibility:hidden, set visibility:hidden elements, will not be displayed, but will still occupy the original page space.

2. The element in the inline line will be displayed in one line, and the line will automatically wrap beyond the width of the screen. Width and height cannot be set. The width and height of the element can only be supported by the content in the element.

Example element: span,b,i,a,u,sub,sup,strong,em

3, block block-level elements will occupy a row, if you do not set the width, its width will automatically fill the width of the parent element, you can set the width and height, even if the width is set, less than the width of the parent element, the block-level elements will occupy a row.

Example element: div,h2-h7,ul,ol,dl,p

4. Inline-block inline block elements can be displayed in a row like inline elements, and you can set width and height, margin and padding.

Example element: input,button,img

5. List-item list elements

Example element: li

6. Table will be displayed as a block-level table (similar to), with line breaks before and after the table.

7. Inline-table will be displayed as an inline table (similar to), with no line breaks before and after the table.

8. Flex multi-column and multi-column layout, Firefox can be used directly. Google and Oppen need to prefix the attribute value with-webkit-, which is more suitable for mobile development.

Why there is a gap between two adjacent inline-block nodes and how to solve it

When an element is treated as an inline element, the carriage return newline in the original HTML code is converted into a blank character, which occupies a certain width when the font is not 0, so there is a gap between the elements of inline-block. The spacing between these elements varies with the font size, and when the inline element font-size:16px, the spacing is 8px.

Resolve:

1 、 font-size

2. Change the way of writing

3. Use negative values of margin

4. Use word-spacing or letter-spacing

Viewport interview questions

The mobile browser will put the page into a virtual "viewpoint", but the viewport is not limited to the size of the browser's visual area, it may be larger or smaller than the browser's visual area. Usually this virtual "viewport" is wider than the screen and squeezes the web page into a small window. If you do not set viewport explicitly, the browser will set width to 980 by default. However, the result is a horizontal scroll bar in the browser because the width of the browser's visual area is smaller than the width of the default viewport. Then the browser introduced viewport as a meta tag, allowing web developers to control the size and scaling of the viewport.

CSS implements a rectangle with an adaptive width of 100% and a width-height ratio of 16:9.

The first step is to calculate the height. If the width is 100%, then the height is 56.25%.

The second step is to use the previously mentioned method of setting padding-bottom to realize the rectangle.

Html

This is a 16:9 rectangle.

Css.box {width: 80%;}. Scale {width: 100%; padding-bottom: 56.25%; height: 0; position: relative;}. Item {width: 100%; height: 100%; background-color: aquamarine; position: absolute;} rem layout advantages and disadvantages

Advantages: it allows us to adapt to various models of mobile phones; it greatly reduces the repeatability of our code, making our code more compatible.

Disadvantages: currently, ie does not support a small number of uses for pc pages.

Large amount of data: all pictures and boxes need us to give an accurate value in order to ensure the adaptation of different models.

Implement a simple triangle

The border of an element is composed of triangles

Div {width: 0; height: 0; border: 40px solid; border-color: transparent transparent red;} how to solve the 1px problem (1 pixel border problem) 1. Media query uses device pixel ratio scaling to set decimal pixels

PX values with decimals are already supported under IOS8. Media query has a query value-webkit-min-device-pixel-ratio for devicePixelRatio. Css can be written like this.

Border {border: 1px solid # 999} @ media screen and (- webkit-min-device-pixel-ratio: 2) {.border {border: 0.5px solid # 999} @ media screen and (- webkit-min-device-pixel-ratio: 3) {.border {border: 0.333333px solid # 999}}

[disadvantages] there are requirements for equipment, and the compatibility of decimal pixels is poor at present.

2. Viewport + rem scheme

This scheme is the optimization of the above scheme, the overall idea is to use viewport + rem + js to dynamically modify the zoom ratio of the page to achieve less than 1 pixel display. During page initialization, the original default state is introduced in the header as follows:

The next task is to dynamically modify the zoom ratio of js and to set the font size of the rem root element.

Var viewport = document.querySelector ("meta [name=viewport]") if (window.devicePixelRatio = = 1) {viewport.setAttribute ('content',' width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')} if (window.devicePixelRatio = = 2) {viewport.setAttribute ('content',' width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')} if (window.devicePixelRatio = = 3) {viewport.setAttribute ('content') 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')} var docEl = document.documentElement Var fontsize = 10 * (docEl.clientWidth / 320) + 'px';docEl.style.fontSize = fontsize

[disadvantages] think that zooming involves global rem units, which is more suitable for new projects, and may involve more changes for old projects.

3. Set the border-image scheme .border-image-1px {border-width: 1px 0px;-webkit-border-image: url ("border.png") 20 stretch; border-image: url ("border.png") 20 stretch;}

[explanation] border-width specifies the width of the border. You can set four values, which are upper, right, lower, left, border-width: top right bottom left. Border-image this example means: 2px at the top of the picture (there is no unit on the attribute value) crop the border picture as the top border, and the bottom 2px crop as the bottom border. A cropped picture with a distance of about 0 pixels has no frame and is displayed in a stretched way.

The combination is: in a border picture, the width of 2 pixels at the top and bottom of the picture is cropped as the upper and lower borders and displayed in a border space with a width of 1 pixel. There is no border on the left and right. Note that the 1 pixel here is special, referring specifically to physical pixels, while the usual length and width 1px represents logical pixels. Of course, this method introduces pictures, and we can also change the pictures into base64 form.

.border-image-1px {border-width: 1px 0px;-webkit-border-image: url (_ "data:image/png;base64,xxx") 20 stretch; border-image: url ('as above');}

[disadvantages] need to make pictures, fillets may be blurred

4. Background-image gradient implementation

In addition to using pictures,   can also be implemented using pure css, which is the scheme adopted by Baidu glutinous rice balls.

Border {background-image:linear-gradient (180deg, red, red 50%, transparent 50%), linear-gradient (270deg, red, red 50%, transparent 50%), linear-gradient (0deg, red, red 50%, transparent 50%), linear-gradient (90deg, red, red 50%, transparent 50%); background-size: 100% 1pxMagol 1px 100%, 100% 1pxMagne1px 100%; background-repeat: no-repeat Background-position: top, right top, bottom, left top; padding: 10px;}

[idea] the border size of the original 1 physical pixel is divided into several parts by linear gradient (percentage control) to achieve the effect of less than 1 pixel [explanation] linear-gradient specifies a linear gradient and accepts 3 parameters greater than or equal to 3 parameters, the first is the rotation angle of the gradient, and the second begins to change the color of the gradient and to which position (percentage) all become the color, in this example, the first sentence is The gradient direction rotates 180 degrees, that is, from top to bottom (the default is 0 degrees from bottom to top), the gradient starts with red, the position is still red at 50%, and then the gradient inherits the parent element color. [disadvantages] because each border is a linear gradient color implementation, the fillet cannot be achieved.

5. Box-shadow scheme

Shadows can also be used, but the advantage is that there is no fillet problem, and the disadvantage is that the color is not easy to control.

Div {- webkit-box-shadow: 0 1px 1px-1px rgba (0,0,0,0.5);}

[understanding] let's review the use of the box-shadow attribute.

Box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]

The parameters are: horizontal shadow position, vertical shadow position, blur distance, shadow size, shadow color, change external shadow to internal shadow, the last four are optional. Why is the shadow size set to a negative number in this example? Set to-1px so that the shadow size is slightly smaller than the div element size, so that the shadows on the left and right sides are not exposed, so that only the bottom side has a shadow effect. In order to achieve the split line effect (one-sided border).

6. Transform: scale (0.5) solution-recommendation: very flexible

In the above usage, there is no escape from the idea that 1px is reduced to 0.5px to show, however. 0.5px is not supported by all devices or browsers, so consider using media queries or viewport to scale it. In fact, the 1-pixel problem basically occurs when setting borders or split lines, and the scene does not cover the global style. therefore, directly scaling the elements that need to be set is what we really need. Tranform can fulfill this requirement.

Set height: 1px and zoom to the corresponding size according to the media query and transform.

Div {height:1px; background:#000;-webkit-transform: scaleY (0.5);-webkit-transform-origin:0 0; overflow: hidden;}

two。 With:: after and:: befor, set border-bottom:1px solid # 00000, and then zoom-webkit-transform: scaleY (0.5); you can achieve the need for two edges

Div::after {content:'';width:100%; border-bottom:1px solid # 000; transform: scaleY (0.5);}

3. Use:: after to set border:1px solid # 000; width:200%; height:200%, and then zoom scaleY (0.5); the advantage can achieve fillet, JD.com is so achieved, the disadvantage is that the button to add active is more troublesome.

.div:: after {content:'; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid # bfbfbf; border-radius: 4px;-webkit-transform: scale (0.5); transform: scale (0.5);-webkit-transform-origin: top left;} 7. Media query + transfrom optimizes scenario 1 / * 2x screen * / @ media only screen and (- webkit-min-device-pixel-ratio: 2.0) {.border-bottom::after {- webkit-transform: scaleY (0.5); transform: scaleY (0.5) }} / * 3x screen * / @ media only screen and (- webkit-min-device-pixel-ratio: 3.0) {.border-bottom::after {- webkit-transform: scaleY; transform: scaleY (0.33);}} so far, I believe you have a deeper understanding of "what are the CSS interview questions". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.