Summary of CSS2023 interview questions ~~~~Continuously updated! ! ! !

1. What are the methods of horizontal and vertical centering of elements?

1. Use positioning +margin:auto
2. Use positioning + margin: negative value
3. Use positioning + transform
4. table layout
5. flex layout
6. grid layout

Two of 2，4the solutions need to know the width and height of the centered element to realize
the specific implementation method. Due to space limitations, please move to ☞my other article and click Jump ☞ .

2.flex layout

Flex layout has two important concepts: 容器and 项目. The container refers to the flex layout applied 父元素, and the item refers to the layout in the container 子元素.

The implementation of Flex layout is mainly to control the arrangement of items by applying or display:inline-flex attribute on the container , and by setting attributes such as , etc. display:flex on the container .justify-contentalign-items

The container properties are:

1. flex-direction: determines the direction of the main axis (that is, the direction in which items are arranged)
2. flex-wrap: Elastic elements are always arranged along the main axis, so if the main axis cannot be arranged, use flex-wrap to determine whether the items in the container can wrap
3. flex-flow: is the short form of flex-direction attribute and flex-wrap attribute, the default value is row nowrap
4. justify-content: defines the alignment of the item on the main axis
5. align-items: defines how items are aligned on the cross axis
6. align-content: defines the alignment of multiple axes. This property has no effect if the item has only one axis

The container member attributes are as follows:

1. order: Defines the sort order of the items. The smaller the value, the higher the arrangement, the default is 0
2. flex-grow: Define the magnification ratio of the item (how to stretch when the container width > the total width of the element)
3. flex-shrink: Defines the reduction ratio of the item (how to shrink when the container width < the total width of the element)
4. flex-basis: sets the initial size of the element on the main axis
5. flex: The flex property is shorthand for flex-grow, flex-shrink and flex-basis, the default value is 0 1 auto
6. align-self: allows a single item to have a different alignment from other items, which can override the align-items property

In general, the flex layout is very flexible and can meet different arrangement requirements, and it is also more convenient and easy to use than the traditional layout

3. Position positioning

Due to space limitations, please move to ☞my other article for a more detailed explanation, click to jump ☞
1.relative positioning
相对于元素原本的位置进行定位, the characteristics of relative positioning are不会影响其他元素的位置

2. Absolute positioning
相对于其最近的已定位父元素进行定位, if there is no positioned parent element, it will be positioned relative to the body element.
是会影响其他元素的位置, to position the element 与文档流无关so it doesn't take up space.

3.fixed positioning
The element is positioned relative to the browser window, which is characterized by 滚动页面时元素位置不变. Position the element 与文档流无关so it doesn't take up space and overlap other elements.

3. Sticky positioning
Sticky positioning: positioning based on the user's scroll position.
Sticky positioned elements are dependent on the user's scrolling, at position:relative 与 position:fixed 定位之间切换.
Element positioning behaves in 跨越特定阈值前为相对定位，之后为固定定位.

4. The difference between display:none and visibility:hidden

1. The display:none
attribute will cause the element to be removed from the document flow 完全消失, that is, the space originally occupied by the element will also be released. This means that if you use display:none to hide an element, it won't take up any space anymore and other elements will automatically move to fill its place. This way you can completely hide the element, however 会影响页面布局.

2. The
attribute visibility:hidden will make the element hidden, but the occupied space of the element will not be released, that is, the original space occupied by the element will still be reserved. This means that if you use visibility:hidden to hide an element, it will no longer be displayed, however 其他元素不会自动移动来填补它的位置, because the element's footprint still exists. This way 不会影响页面布局, however, it might 导致页面出现空白区域.

Summarize
因此，如果你需要完全隐藏元素并影响页面布局，可以使用 display:none。如果你只需要隐藏元素但不影响页面布局，可以使用 visibility:hidden。