Front-end CSS test and interview summary

How should I put it, I did ask a lot of test questions during the interview, but there are only so many css to master~

Table of contents

1. Margin collapse phenomenon (common)

2. What are the main types of positioning on the page, and what are their characteristics?

3. Interviews are rarely asked, but you need to understand

4. Flexible Box (elastic layout)

5. What are the new features of Css3?

6. The method of centering the child box horizontally and vertically

Summarize

---

1. Margin collapse phenomenon (common)

reason:

• When the two boxes are siblings and displayed vertically, the lower box is margin-top, the upper box is margin-bottom, and the outer margin is based on the set maximum value (the first case of outer margin merging)
• When two boxes are nested, if margin-top is set for the box inside, the parent box will move down at the same time (the second case of collapse)

Solution:

• Set a border for the parent box
• Set overflow:hidden for the parent box;

2. What are the main types of positioning on the page, and what are their characteristics?

Answer: 4 types Static positioning Relative positioning Absolute positioning Fixed positioning

1. position: static; Static positioning (ordinary stream positioning) -------------- Default positioning
2. position: relative; relative positioning is positioned relative to the upper left corner of the element, top, left, bottom, right can all have values. Although the position may move after being positioned, this element does not break away from the document flow , and still occupies the original page space
3. position: abosolute; Absolute positioning , relative to the upper left corner of the element that has relative (relative positioning) in the ancestor and is closest to this element in terms of hierarchy. If there is no relative positioning in the ancestor element, it will be relative by default Positioning on the body, away from the standard flow
4. position: fixed; Fixed positioning is based on the window . Objects don't scroll when scrollbars appear

Note: Students who don’t remember relative positioning and absolute positioning can remember a formula :

3. Interviews are rarely asked, but you need to understand

• Let the text be displayed as a single line, and the ellipsis css style will appear on the overflow

overflow:hidden ；
white-space:nowrap;
text-overflow:ellipsis；

•  Let the text be displayed as multiple lines, and an ellipsis appears when overflowing

.center_top .center_top_txt .txt {
	font-weight: normal;
	height: 290px;
	overflow-y: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 10;
	/*10表示只显示10行*/
	-webkit-box-orient: vertical;
}

• The background of the parent block does not appear due to the floating of the child block (note: the height of the parent does not exist), the solutions are:

// 浮动块 结束后，加
<div style=“clear:both”> 

• There are four ways to introduce styles in CSS, namely embedded style, import style, link style, and inline style
• The actual width of the W3C box model includes width, border-left, border-right, padding-left, padding-right, and their sum.
• Use box-sizing: border-box to convert the box model into an inner subtraction type , and the width is the actual width.
• CSS3 introduces a new layout pattern—Flexbox layout, namely the flexible layout box model (Flexible Box) , which is used to provide a more efficient way to formulate, adjust and distribute the layout of items in a container, even if their sizes are unknown or Dynamic, referred to here as Flex.

4. Flexible Box (elastic layout)

Commonly used:

How to assign elastic elements	note
justify-content: space-between	Evenly arrange each element The first element is placed at the starting point, and the last element is placed at the end point
justify-content:space-around	Arrange each element evenly Allocate the same space around each element
justify-content: space-evenly	Arranges each element evenly with equal spacing between each element
justify-content: stretch	Arrange each element evenly 'auto'-sized elements will be stretched to fit the size of the container
justify-content:center	Centered.

learn:

/* alignment */	note
justify-content: center	centered
justify-content: start	Sort from the beginning of the line
justify-content: end	Sort from the end of the line
justify-content: flex-start	Start sorting from the beginning of the line
justify-content: flex-end	Sort from the end of the line
justify-content: left	One next to the left edge of the alignment container
justify-content: right	Elements are aligned next to each other based on the right edge of the container

case:

.box{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

Effect:

Last month's sales performance | Today's sales performance | Yesterday's sales performance

5. What are the new features of Css3?

answer:

(1) New Selector (New Selector) (2) Web Fonts (Web Fonts)

(3) Text Styles Text Styles (4) Opacity Opacity

(5) Color HSL Color (6) Rounded Corners

(7) Gradients (8) Box shadow Shadows

(9) Background size, background cropping, background drawing

(10) Border Image (11) Flexible Box Model

(12) Transform Transforms (13) Filter Transitions

(14) (Animation) Animations

6. The method of centering the child box horizontally and vertically

• Use text-align: center and line-height to realize horizontal centering of text;
• Realize by using parent-child and margin margin ; (first set relative positioning for the parent box, then set absolute positioning for the child box, and set the displacement in four directions of absolute positioning to 0, and then set the margin property value Just set it to auto .)

• Realize by using parent-child and left and top margins ; (first set relative positioning for the parent box, then set absolute positioning for the child box, and move the child box to the right and down by half of the parent box, and then use the margin margin moves the subbox halfway to the left and up, respectively .)

    <style>
        .father {
            position: relative;
            height: 300px;
            width: 300px;
            border: 1px solid #000;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
    </style>

•  use transform

 <style>
        .father {
            position: relative;
            height: 300px;
            width: 300px;
            border: 1px solid #000;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
    </style>

• Implemented with flex layout

 <style>
        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            width: 300px;
            border: 1px solid #000;
        }
        .son {
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
    </style>

Summarize

The above is what I want to talk about today. This article only briefly introduces the common CSS interview questions. I hope it can help you. Please leave a like and leave~~~