CSS3 Interview Questions

What is CSS3?

CSS3 is a markup language used to describe the styles of web pages.

What are the new features introduced in CSS3?

CSS3 introduces many new features to enhance style control and interactivity. Here are some of the major new features added in CSS3:

Transitions: Allow smooth transitions between element states. By specifying the starting and ending values for a CSS property, you can create smooth animation effects.
Animations: Define an animated sequence using Keyframes rules to create more complex and refined animation effects. You can control properties such as duration, delay, repeat count, etc.
2D Transforms: Provide attributes that allow transforming elements in 2D space, such as Translate (平移), Rotate (旋转), Scale (缩放), etc., achieving deformation effects within a plane.
3D Transforms: Provide attributes that allow transforming elements in 3D space, such as Translate (平移), Rotate (旋转), Scale (缩放), etc., achieving deformation effects in three-dimensional space.
Filters: Offer a series of image processing filter effects, such as Blur (模糊), Brightness (亮度), Contrast (对比度), etc., allowing for special visual and processing effects on images.
Multi-column Layout: Allows text content to be laid out in multiple columns, similar to newspaper formatting. You can control the number of columns, spacing, dividers, etc.
Media Queries: Allow applying specific styles based on device characteristics and screen size. Page layout and style adjustments can be made based on conditions such as screen width, device type, orientation, etc.
Flexbox: Provides a flexible layout model for creating adaptive and responsive layouts. It conveniently controls the position, size, and order of elements within a container.
Grid Layout: Introduces a two-dimensional grid layout model to create complex grid structures. You can define rows and columns and control element positioning and alignment within the grid.
Custom Fonts (@font-face): Allows using custom font files to display text content on web pages without relying on fonts installed on the user's device.

What are the selectors in CSS3?

Selectors in CSS3 include Element Selectors, Class Selectors, ID Selectors, Attribute Selectors, Pseudo-class Selectors, and Pseudo-element Selectors. Some commonly used selectors include: Universal Selector (*), Descendant Selector (space), Child Selector (>), Adjacent Sibling Selector (+), General Sibling Selector (~`), Class Selector (.class), ID Selector (#id), Attribute Selector ([attr]), etc.

What is the difference between pseudo-classes and pseudo-elements in CSS3?

Pseudo-classes in CSS3 are used to select elements based on their state or position, such as :hover, :active, :visited, :first-child, etc., whereas pseudo-elements are used to select a specific part of an element, such as ::before, ::after, ::first-line, ::selection, etc.

Styling

Explain the transforms and their uses in CSS3.

Transforms in CSS3 are used to implement changes in shape, position, size, and other attributes of elements, including rotation, scaling, translation (移动), skewing (倾斜), distorting (扭曲), etc. They can be utilized for creating animations, implementing responsive design, optimizing user experience, and more.

What is animation in CSS3?

Animations in CSS3 are used to implement dynamic effects on elements, such as gradients, rotation, scaling, movement, etc. Common animation properties include: animation-name, animation-duration, animation-delay, animation-fill-mode, animation-iteration-count, animation-direction, etc.

What is gradient in CSS3?

Gradients in CSS3 are used to implement color transition effects for elements, including linear gradients and radial gradients. Common gradient properties include: background-image, background-repeat, background-position, background-size, etc.

What is transition in CSS3?

Transitions in CSS3 are used to achieve the effect of transitioning an element from one style state to another, such as transitions for color, size, position, and more. Common transition properties include: transition-property, transition-duration, transition-timing-function, transition-delay, etc.

Layout

Explain the box model and its attributes in CSS3.

The Box Model in CSS3 is used to describe element layout and sizing, including content area, padding (内边距), border (边框), and margin (外边距). Common box model properties include: width, height, padding, border, margin, etc.

Explain responsive design and its uses in CSS3.

Responsive Design in CSS3 is a technology used to achieve adaptation of web pages across different devices, adjusting the layout and style based on characteristics such as screen size and resolution. It can improve usability and user experience for mobile devices while also increasing development efficiency by reducing redundant code.

Explain Flexbox Layout (弹性盒子布局) and its uses in CSS3.

Flexbox Layout is a technology used to achieve adaptive layouts, automatically adjusting the position and size of child elements based on container size and content. It can be utilized for implementing responsive design, optimizing user experience, etc.

Others

What are Reflow (回流) and Repaint (重绘)?

Reflow (reflow) and repaint (repaint) are two key processes involved in browser page rendering.

Reflow refers to the process where the browser needs to recalculate element positions and sizes when layout or geometric properties of a page change, followed by rebuilding the document's layout tree. This involves recalculating the entire page or part of it, resulting in a larger scope of impact and higher performance overhead. Common operations that trigger reflow include changing window size, modifying element dimensions, position, content, styles, etc.

Repaint refers to when an element's visible style (such as color, background, border, etc.) changes; the browser redraws the affected portion without altering the layout structure. This involves painting new styles onto the screen but does not involve recalculating positions or sizes. Repaint overhead is relatively smaller since it only requires redrawing the affected parts rather than recalculating layouts. However, frequent repainting can still impact page performance.

What are the differences between Device Pixels (设备像素), CSS Pixels (CSS 像素), Device-independent pixels (设备独立像素), DPR, and PPI?

Device Pixels: Physical layer pixels representing the smallest display unit of a display device.
CSS Pixels: Virtual pixel units used in web page layout and CSS styling.
Device-independent pixels: An abstract pixel unit independent of device display density, used to maintain consistent visual sizes across devices.
DPR (Device Pixel Ratio): Represents the ratio between Device Pixels and Device-independent pixels, used to adapt to different device display densities.
PPI (Pixels Per Inch): The number of pixels per inch, describing the resolution of a display device.

Introduce `em`, `px`, `rem`, `vh`, `vw`

em, px, rem, vh, and vw are common length units used to specify element sizes in web development. They have different characteristics and uses:

px (Pixel): The most common unit, representing physical pixels on the screen. It is fixed and does not change based on other factors. In responsive design, px is typically used for specific dimensions like font size or border width.
em: A relative unit based on the parent element's font size. For example, if an element has a font size of 16px, then 1em equals 16px. If the parent element's font size changes, the child elements' em values change accordingly. The em unit is useful for nested elements to adjust sizes relative to their parents.
rem: Also a relative unit but based on the root element (i.e., <html>)'s font size. Unlike em, it is not affected by parent element font sizes, making it more convenient for responsive design since adjusting only the root element's font size changes dimensions across the entire page.
vh (Viewport Height): A unit relative to viewport height, representing a percentage of the viewport height. For example, 10vh represents 10% of the viewport height. It is often used for elements that should adapt to the viewport, such as full-screen backgrounds or fixed-proportion elements.
vw (Viewport Width): A unit relative to viewport width, representing a percentage of the viewport width. For example, 5vw represents 5% of the viewport width. It is also commonly used for adapting elements to the viewport, such as horizontal scrollbar widths.