Front-end css interview questions (1)

How to center the box vertically and horizontally

text-align:center + vertical-align: middle horizontally and vertically centered layout

 <div> text-align:center + vertical-align: middle水平垂直居中布局</div>
    <div class="text-align-outter">
      <div class="text-align-center"></div>
    </div>
.text-align-outter {
    
    
  background-color: plum;
  text-align: center;
  vertical-align: middle;
  /** 要配合table-cell一起使用 */
  display: table-cell;
  width: 300px;
  height: 300px;
}

.text-align-center {
    
    
  display: inline-block;
  background-color: pink;
  width: 50%;
  height: 50%;
}

position+margin horizontal and vertical centered layout

The advantage is that it has better compatibility, but the disadvantage is that you must know the width and height of the subcomponent.

 <div>position + margin水平垂直居中</div>
    <div class="position-outter">
        <div class="position-center"></div>
    </div>
.position-outter {
    
    
  position: relative;
  width: 300px;
  height: 300px;
  background-color: plum;
}

.position-center {
    
    
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: pink;
}

Of course there are more ways. I have previously written an article about commonly used CSS layout https://dengxi.blog.csdn.net/article/details/114955202 , which details horizontal centering, vertical horizontal centering, Holy Grail and other layout methods.

Grid layout and its compatibility

Container (Grid Container): Set an element as a grid container through the display: grid; attribute.
Item (Grid Item): The elements within the grid container are called grid items, and their positions in the grid can be defined through attributes such as grid-column and grid-row.
Grid Row and Grid Column: The grid is divided into rows and columns. You can define their number and size by setting the position of the grid lines.
Grid Line: Horizontal and vertical lines form the divisions of the grid. You can adjust the size of rows and columns by setting the position of the grid lines.

The compatibility of CSS Grid is not very good, and mainstream modern browsers already support it. The following are some common browsers' support for CSS Grid:
Chrome: Starting from Chrome 57, CSS Grid is supported.
Firefox: CSS Grid is supported starting with Firefox 52.
Safari: CSS Grid is supported starting with Safari 10.1.
Edge: CSS Grid is supported starting from Edge 16.
Opera: CSS Grid is supported starting from Opera 44.

However, lower version browsers and IE browsers do not support it.

More introduction about grid layout: https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Introduce BFC

BFC, or Block Formatting Context, is an important concept in CSS layout. The BFC forms an independent rendering area that affects how elements are placed, positioned, and interact with other elements.

Conditions that trigger BFC include:

The float property is not none.
The position attribute is absolute or fixed.
The display attribute is one of inline-block, table-cell, table-caption, flex, and inline-flex.
The overflow attribute is not visible.

Common uses include:

Clear the float to prevent the height of the parent element from collapsing.
Prevents the margins of adjacent block-level elements from collapsing.
Create an adaptive two-column layout.
Control the layout and size of floating elements.

Written animation effects

This is an introduction based on my own project situation, mainly to examine the ways to implement animation and their differences.
I have summarized some ways to implement animation before, you can refer to https://dengxi.blog.csdn.net/article/details/116102127

What properties does overflow have?

visible：

By default, overflow content will be displayed outside the container and will not be truncated.
May cause content to overflow on top of other elements.

hidden：

Overflow content will be hidden and will not be displayed outside the container.
Cropped content will not be visible.

scroll：

Display vertical and horizontal scroll bars whether scrolling is required or not.
Even if the content does not overflow, the scrollbar position will be displayed but scrolling will not be disabled.

auto：

If the content overflows, scroll bars will automatically appear.
If the content does not overflow, no scroll bars will be displayed.

overlay：

Similar to auto, if the content overflows, scroll bars will be automatically displayed.
However, the scrollbar will appear above the content in a way that takes up less space.

How to make scroll bars appear in a box

If it is a y-axis scroll bar, the height of the box must be fixed. The scroll bar may appear beyond this height.
Therefore, it must be an inline-block or a block box, and finally the overflow attribute is used.

.block-scroll {
    
    
	display: block;
	height: 200px;
	overflow: auto;
}

In the same way, if you want a scroll bar to appear on the x-axis, you need to fix the width of the box, and finally do not allow line breaks.

.block-scroll {
    
    
	display: block;
	width: 200px;
	overflow: auto;
}

Box model introduces border-box and content-box

content-box box model:

The width and height of an element include only the dimensions of the content area, not padding and borders.
For example, if you set the width of an element to 200px and have a 10px padding and a 2px border, the actual occupied width will be: 200px (content) + 20px (padding) + 4px (border), for a total of 224px.

border-box box model:

The width and height of an element include the dimensions of the content area, padding, and borders.
This means that the width and height you set are the actual dimensions occupied by the element, including the internal space.
Using border-box makes it easier to control the overall size of elements, especially when designing layouts.

Box model settings

Among them, content-box is the standard box model of browsers. Developers can use the box model uniformly according to their own development habits and project requirements.

* {
    
    
	box-sizing：content-box;
	// box-sizing：border-box;
}

What properties does flex stand for and what are their uses?

flex-grow:

Determines the proportion by which items in a flex container expand when remaining space is allocated.
The default is 0, which means the project will not be expanded and the remaining space will be evenly distributed to other expansion projects.
Larger values ​​mean the project expands more.

flex-shrink:

Determines how much items in a flex container shrink when space is insufficient.
The default is 1, which means the project will shrink proportionally to accommodate lack of space.
0 means the item will not shrink.

flex-basis:

Define the initial dimensions of the project.
Can be set to a specific length value or percentage.
The default is auto, which automatically determines the size based on the project content.

flex: flex-grow flex-shrink flex-basis;

The difference between rem, em, px, vh, vw units

1rem = font-size parameter set on the html tag of the document root node
. For example: 1rem = 16px

<html style="font-size: 16px;">
...
</html>

1em = font-size parameter set by the parent node.
For example, for the p tag, 1em = 16px

<html>
	<div style="font-size: 16px;">
		<p style="margin: 1em;"></p>
	</div>
</html>

1px is a pixel coordinate, you can also refer to the screen resolution

1vh is one percent of the full screen height of the browser.
1vw is one percent of the full screen width of the browser.

What attributes does position have and what are the differences?

static:

By default, elements are laid out according to normal document flow.
The top, right, bottom, and left properties are ignored.

relative:

The element is positioned relative to its normal position.
Other elements are still laid out according to normal document flow, but their position can be fine-tuned using the top, right, bottom, and left properties.
The element still occupies the space of its original position and does not affect the layout of other elements.

absolute:

The element is detached from the normal document flow and positioned relative to its nearest positioned (non-static) ancestor element.
If there is no positioned ancestor element, the element will be positioned relative to the element.
The element no longer occupies the space of its original position and floats above other elements.

fixed:

The element is positioned relative to the viewport and does not move as the page scrolls.
Commonly used to create fixed navigation bars or floating elements.

sticky:

The element is positioned according to normal document flow until scrolling reaches a certain threshold, then becomes fixed positioning until another threshold is reached, and then returns to normal positioning.
The element remains visible inside the viewport while it is within the threshold.

achieve 0.5px

If you write 0.5px directly in the style, it is basically impossible to achieve it, but you can save the country by shrinking the box.
For example, I want to implement a line 10px long and 0.5px high

div {
    
    
	width: 20px;
	height: 1px;
	background: #000;
	transform: scale(0.5);
}

There is another way to achieve it, through the style gradient color, half of which is set to transparent and half to the desired color.

Of course, the above methods only achieve 0.5px visually, not 0.5px in the true sense.

There may be gaps in the box when inline-blocking, how to solve it?

Add a line of attributes:

font-size: 0

The difference between inline-block and block and inline

Block element:

Occupying an entire row of space will automatically fill the width of its parent container.
You can set width, height, margins and padding.
By default, a block-level element creates a new line before and after it, so that its content starts on the new line.

Inline elements:

It only takes up the space of the content it contains and does not force line breaks.
The width and height cannot be set, the outer margins are invalid for top and bottom (valid for left and right), and the inner margins are valid for top, bottom, left and right.
Appears on a single line, allowing other elements and text to be on the same line.

Inline-block elements:

Similar to inline elements, but can set width, height, margins, and padding.
Line breaks are not forced and can share a line with other elements while controlling their size and spacing.

Main differences:

1. Layout: block elements occupy one line, inline elements are displayed on one line, and inline-block elements are also displayed on one line, but the size can be set.
2. Size settings: block and inline-block elements can set width and height, but inline elements cannot.
3. Margins and padding: Both block and inline-block elements can set margins and padding, while the upper and lower margins of inline elements will not affect the layout.
4. Line break behavior: block elements will force line breaks, and each block-level element starts on a new line. Inline elements will not force line breaks, and inline-block elements will not force line breaks, and multiple elements can be displayed on the same line.

Can inline boxes have upper and lower margins and left and right margins set?

You can set the left and right margins, but it will not take effect even if the upper and lower margins are set.

Which features of css3 do you often use?

The main test is the familiarity with CSS3. Generally speaking, the commonly used CSS3 attributes are as follows

border-radius: Used to create a rounded border for the element.

box-shadow: Add the shadow effect of the element, you can set the horizontal offset, vertical offset, blur radius and color.

text-shadow: Adds a shadow effect to text, with horizontal offset, vertical offset, blur radius and color properties.

background-size: Control the size of the background image, you can use keywords (such as cover and contain) or specific sizes.

Opacity: Set the transparency of the element. You can adjust the visibility of the element with a value between 0 and 1.

transition: used to add transition effects when the state changes, and can control the change time, type and delay of attributes.

transform: 2D or 3D transformation of elements, including rotation, scaling, translation and other effects.

animation: Create animation effects for elements, and you can define attributes such as keyframes, duration, and delay.

@keyframes: Defines the keyframes of the animation for use in the animation attribute.

box-sizing: Controls the calculation method of the box model. You can select content-box (default) or border-box.

Flexbox: used to build flexible layout, enabled by display: flex, you can use flex-direction, justify-content, align-items and other attributes to control the layout.

grid: used to create complex grid layouts, enabled by display: grid, you can use grid-template-columns, grid-template-rows, grid-gap and other attributes to define the grid structure.

@media: Used to apply different styles based on different media queries (such as screen size, resolution, etc.).

nth-child and nth-of-type: used to select elements at specific positions in a group of elements, and can be used to achieve effects such as odd-even row styles.

flex-grow and flex-shrink: used to control the scalability of items in flexible layout to adapt to different spaces.

gradient: Create a gradient background, which can be a linear gradient or a radial gradient.

filter: Apply image filter effects to elements, such as blur, contrast adjustment, etc.

user-select: Controls whether users can select text content.

column-count and column-gap: Control the number of columns and the gap between columns in a multi-column layout.

outline: similar to a border, but does not occupy space. It is often used to style when an element receives focus.

flex layout

There are many test points for flex layout. Some commonly used attributes, layout methods, and compatibility issues require everyone's attention.
Check out the Flex Layout Tutorial: Grammar Author: Ruan Yifeng

The common css exam questions will be introduced here first, and the second phase of css common interview questions will be arranged as soon as possible.