Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the main points of CSS interview?

2025-01-26 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly introduces "what are the main points of CSS interview". In the daily operation, I believe that many people have doubts about the main points of CSS interview. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the main points of CSS interview?" Next, please follow the editor to study!

1. Px,em,rem, vw, vh

1.px (pixel, pixels):

It is a virtual length unit, which is the digital image length unit of the computer system. If you want to convert px to physical length, you need to specify the precision DPI (Dots Per Inch, pixels per inch). DPI is generally optional when scanning and printing. The Windows system defaults to 96dpi.Apple defaults to 72dpi.

2.em (relative unit of length, relative to the font size of the text within the current object):

Is a unit of relative length, originally referring to the width of the letter M, hence the name em. Now it refers to the multiple of the width of the character, using a similar percentage, such as: 0.8em, 1.2empendi2em and so on. Usually 1em=16px.

3.rem (root em, root em):

Rem is a relative unit, and 1rem equals the size of the font set on the html element. As long as we set the size of the font-size on html, we can change the size represented by the rem. In this way, we have a controllable unified reference system. We now have two goals:

The size represented by the rem unit is proportional to the screen width.

That is, setting the font-size of the html element to be proportional to the screen width of the rem unit and the px unit is easy to convert, so it is convenient for us to follow the difference between cssrem and em:

Rem is the font size relative to the root element (html), while em is relative to the font size of its parent element

Em gets the last three decimal places at most

4.vw 、 vh:

A new unit vw/vh is introduced in css3, which is related to the view window. Vw represents the width of the view window, and vh represents the height of the view window. In addition to vw and vh, there are two related units, vmin and vmax. The specific meanings of each unit are as follows:

Here we find that the width and height of the window are all 100vw/100vh, so vw or vh, hereinafter referred to as vw, is very similar to the percentage unit.

The difference between vw and% is:

II. Holy Grail layout-double flying wing layout

The Grail layout and the double wing layout are all aimed at the adaptive web layout with three columns, left and right columns, fixed middle column frame.

Three-column layout with adaptive width in the middle and fixed width on both sides

The middle bar should give priority to rendering in the browser.

Allow the highest height of any column

Reminder: in the relative layout of the Grail layout, the main element must be the first element of container

Html code

Main left right

1. Relative layout:

.container {width: 100%; min-height: 300px; padding: 060px; box-sizing: border-box;}. Container > div {position: relative; float: left;} .left, .right {width: 60px; height: 100%;} .left {left:-60px; margin-left:-100%;} .right {right: 0; margin-right:-100%;} .main {width: 100%; height: 100% }

2.flex layout:

.container {width: 100%; min-height: 300px; display: flex;}. Main {flex-grow: 1;} .left {order:-1; flex-basis: 60px;} .right {flex-basis: 60px;}

3. Absolute layout:

.container {width: 100%; min-height: 300px; position: relative;}. Container > div {position: absolute;} .left, .right {width: 60px; height: 100%;} .main {width: calc (100%-120px); height: 100%; left: 60px;} .left {left: 0;} .right {right: 0;}

III. Streaming layout and responsive layout

Streaming layout

Use non-fixed pixels to define web page content, that is, percentage layout, according to the width of the screen by setting the width of the box to a percentage.

The row is scalable, free from the restriction of fixed pixels, and the content is filled to both sides.

Responsive development

Using Media Query (Media query) in CSS3, the web page layout of a width interval is specified by querying the width of screen.

Ultra-small screen (mobile device) below 768px

Small screen device 768px-992px

Medium screen 992px-1200px

Widescreen device 1200px or above

Because responsive development is more tedious, third-party responsive frameworks are generally used, such as bootstrap to complete part of the work, of course, you can also write your own responsive framework.

4. CSS priority algorithm

Element selector: 1

Class selector: 10

Id selector: 100

Element tag: 1000

! the style declared by important has the highest priority and will be calculated if there is a conflict.

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

Inherited styles have the lowest priority.

5. What are the new pseudo-classes in CSS3?

P:first-of-type selects the first element that belongs to its parent element

P:last-of-type selects the last element that belongs to its parent element

P:only-of-type selects the element that is unique to its parent element

P:only-child selects the only child element that belongs to its parent element

P:nth-child (2) selects the second child element that belongs to its parent element

: enabled: the disabled state of the disabled form control

The checked radio box or check box is selected.

VI. New features of CSS3

1.RGBA and transparency

2.background-image background-origin (content-box/padding-box/border-box) background-size background-repeatword-wrap (wrapping long indivisible words)

3.word-wrap:break-word

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

5.font-face property: define your own font

6. Fillet (border radius): the border-radius property is used to create the fillet

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

8. Box Shadow: box-shadow: 10px 10px 5px # 888888

9. Media query: define two sets of css that will use different attributes when the size of the browser changes

What are the ways to optimize and improve the performance of CSS?

1. Avoid excessive constraints

two。 Avoid descendant selectors

3. Avoid chained selector

4. Use compact syntax

5. Avoid unnecessary namespaces

6. Avoid unnecessary repetition

7. It is best to use a name that represents semantics. A good class name should describe what it is rather than something like

8. Avoid! Important, you can choose another selector

9. To simplify the rules as much as possible, you can merge repetitive rules from different species.

8. CSS animation

Transform,transition and animation in CSS are three separate parts, in which transfrom is mainly to control the deformation of elements, and there is no concept of time control, while transition and animation are the part of animation, they can control the effect of switching elements in two or more states in one time period.

1.transition

Transition attribute: how long does the transition-delay delay before the animation starts

A duration of transition-duration transition animation

Transition-property executes the properties corresponding to the animation, such as color,background, etc. You can use all to specify all the attributes

Transition-timing-function over time, animation changes the trajectory of the calculation method, the common are: linear,ease,ease-in,ease-out,cubic-bezier (...) Wait.

Transition related events

The transitionend event is triggered at the end of the transition animation.

Usually we perform some methods after the end of the animation, such as moving on to the next animation effect or something else.

The animation methods in Zepto.js are handled using the CSS animation attribute, and the callback after the animation is run should be handled with this event.

2.animation

Although transition has provided great animation effects, but we can only control from one state to another state, there is no way to control the continuous change of multiple states, and animation has helped us achieve this. The premise of using animation is that we need to use @ keyframes to define an animation effect. The rules defined by @ keyframes can be used to control each state in the animation process. The syntax looks like this:

@ keyframes W {from {left: 0; top: 0;} to {left: 100%; top: 100%;}}

The @ keyframes keyword is followed by the name of the animation, followed by a block with each selector for the progress of the animation, and the block after the selector is still our common CSS style attribute.

Animation attribute:

Animation-name the name of @ keyframes of the animation you need.

Animation-delay is the same as transition-delay, the time the animation is delayed.

Animtaion-duration, like transition-duration, the duration of the animation. One direction control of animation-direction animation.

The default is normal, and if the above left ranges from 0% to 100%, the default is from left to right. If the value is reverse, then it is from right to left

Because animation provides loop control, two other values are alternate and alternate-reverse, which reverse the direction of the animation at the beginning of each loop, but in a different direction.

Because animation provides loop control, two other values are alternate and alternate-reverse, which reverse the direction of the animation at the beginning of each loop, but in a different direction.

Animation related events

You can listen to several states of animation by binding events, which are:

The animationstart animation start event, if there is a delay attribute, will not be triggered until the animation actually starts. If there is no delay, then this event will be triggered when the animation effect is applied to the element.

The event at the end of the animationend animation, similar to transitionend. If there are multiple animations, then this event will be triggered multiple times, as in the above example, this event will be triggered three times. If animation-iteration-count is set to infinite, then this event will not be triggered.

Animationiteration Animation cycle an event at the end of a life cycle, unlike the previous event, which is triggered at the end of an animation at the end of each loop, not at the end of the entire animation. In an infinite loop, this event will trigger infinitely unless duration is 0.

IX. BFC

The full name of BFC is Block Formatting Context, or block formatting context. It is a concept of CSS rendering positioning defined by the CSS2.1 specification. To understand what BFC really is, first take a look at what a visual formatting model is.

Visual formatting model

Visual formatting Model (visual formatting model) is a mechanism used to process documents and display them on visual media, and it is also a concept in CSS.

The visual formatting model defines the generation of boxes (Box), which mainly include block boxes, inline boxes, anonymous boxes (boxes with no names that cannot be selected by selectors) and some experimental boxes (which may be added to the specification in the future). The type of the box is determined by the display property.

How to form BFC

Root element or other element that contains it; * floating (element's float is not none); * absolute positioning element (element's position is absolute or fixed); * inline block inline-blocks (element's display: inline-block); * table cell (element's display: table-cell,HTML table cell default attribute); * element whose overflow value is not visible; * resilient box flex boxes (element's display: flex or inline-flex)

But among them, the most common ones are overflow:hidden, float:left/right and position:absolute. That is, every time you see these attributes, you represent the element and a BFC is created.

Browser constraint rules for BFC areas:

The child elements of the generated BFC element are placed one after another.

Vertically, their starting point is the top of a containing block, and the vertical distance between two adjacent child elements depends on the margin property of the element. The outer margins of adjacent block-level elements in BFC collapse (Mastering margin collapsing).

In the child elements that generate the BFC element, the left margin of each child element touches the left boundary of the containing block (for right-to-left formatting, the right margin touches the right boundary), even if the floating element (although the content area of the child element is compressed due to floating), unless the child element also creates a new BFC (such as it is also a floating element).

BFC is an isolated container on the page, and the child elements inside the container do not affect the outer elements, and vice versa. We can use this feature of BFC to do a lot of things.

10. Flex layout

Basic concept

Elements that use Flex layouts are called Flex containers (flex container), or "containers" for short. All its child elements automatically become container members, called Flex projects (flex item), or "projects" for short.

By default, the container has two axes: a horizontal principal axis (main axis) and a vertical cross axis (cross axis). The start position of the spindle (the intersection with the border) is called main start, and the end position is called main end;. The start position of the cross axis is called cross start, and the end position is called cross end.

Projects are arranged along the principal axis by default. The spindle space occupied by a single project is called main size, and the cross-axis space occupied by a single project is called cross size.

Properties of the container:

1.flex-direction: the attribute determines the direction of the principal axis (that is, the direction of the arrangement of items)

Row (default): the principal axis is horizontal and the starting point is at the left end.

Row-reverse: the principal axis is horizontal, and the starting point is at the right end.

Column: the principal axis is vertical, and the starting point is along the upper edge.

Column-reverse: the principal axis is vertical, and the starting point is at the lower edge.

2.flex-wrap: by default, projects are arranged on a single line (also known as "axis")

Nowrap (default): no line wrapping.

Wrap: line break, the first line is at the top.

Wrap-reverse: wrap, the first line is at the bottom.

3.flex-flow: shorthand for flex-direction attribute and flex-wrap attribute

4.justify-content: defines the alignment of the project on the spindle

Flex-start (default): align left

Flex-end: align to right

Center: Center

Space-between: both ends are aligned and the spacing between items is equal.

Space-around: the intervals on both sides of each item are equal.

Therefore, the interval between items is twice as large as the interval between the project and the border.

5.align-items: defines how the project is aligned on the cross axis

Flex-start: the start point of the cross axis is aligned.

Flex-end: the end point of the cross axis is aligned.

Center: the midpoint alignment of the cross axis.

Baseline: the baseline alignment of the first line of text of the project.

Stretch (default): if the project is not set to height or is set to auto, it will occupy the height of the entire container.

6.align-content: defines the alignment of multiple axes.

If the project has only one axis, this property does not work flex-start: align with the start point of the cross axis.

Flex-end: aligns with the end of the cross axis.

Center: aligns with the midpoint of the cross axis.

Space-between: aligned with both ends of the cross axis, the spacing between the axes is evenly distributed.

Space-around: the intervals on both sides of each axis are equal. Therefore, the interval between the axis is twice as large as the interval between the axis and the frame.

Stretch (default): the grid line occupies the entire cross axis.

The order property of the project defines the order in which the items are arranged.

The lower the number, the higher the arrangement, and the default is 0.

The flex-shrink property defines the reduction of the project, which defaults to 1, that is, if there is not enough space, the project will shrink.

The flex-basis attribute defines the principal axis space (main size) occupied by the project before allocating excess space.

The flex attribute is an abbreviation for flex-grow, flex-shrink, and flex-basis, and the default value is 0 1 auto.

The align-self property allows a single project to be aligned differently from other items, overriding the align-items property.

This attribute may take six values, all of which are exactly the same as the align-items property except auto.

Summary of Grid layout

Grid layout is a new layout in css, which has a strong ability to control the location and size of boxes and box contents. Unlike flex, flex focuses on single axis, while grid adapts to multi-axis, so here's a brief introduction.

Flex layout schematic

Grid layout schematic

Basic concept

The element that sets the display: grid; is called a container, and its immediate child element is called a project, but note that the descendant element is not a project.

Grid line: gridlines that make up the structure of a grid layout, divided into horizontal and vertical types. Grid track: the space between two adjacent grid lines, which can be thought of as a row or a column.

Grid cell: the space formed by dividing lines between two adjacent rows and columns, which is a unit in the grid layout.

Grid area: all the space wrapped by four grid lines, and any number of grid cell make up a grid area.

Container Properti

The grid container still has a lot of properties, a total of 18, but many can be done by shorthand, so don't be too nervous.

Grid-template series

Grid-template-columns

Grid-template-rows

Grid-template-areas

Grid-gap series

Grid-column-gap

Grid-row-gap

Place-items series

Justify-items

Align-items

Place-content series

Justify-content

Align-content

Grid series

Grid-auto-columns

Grid-auto-rows

Grid-auto-flow

12. Box-sizing

Set the CSS box model to the standard model or the IE model. The width of the standard model includes only content, while the two IE model includes border and padding.

The box-sizing property can be one of three values:

Content-box, the default value, only calculates the width of the content. Border and padding are not counted in width.

Padding-box,padding is calculated into the width

Border-box,border and padding are calculated into the width

XIII. Hardware acceleration

Sometimes animation can lead to stutters on the user's computer, and you can use hardware acceleration in specific elements to avoid this problem:

Block {transform: translateZ (0);} at this point, the study of "what are the main points of the CSS interview" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.

Views: 225

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report