Editing typesetting | Song Dashi
Platform Operation |
1. Tell me about the composition of the box model?
The box model consists of four parts: margin, border, padding, and content
Weird box model:
box-sizing:border-box;
The set width is content+padding+border
Standard box model:
box-sizing:content-box;
The set width is content
Second, what are the ways to center vertically and horizontally?
row element:
1、text-align + line-height
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* child element */
.sonDiv {
background-color: pink;
display: inline;
}
2、display: table-cell;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* child element */
.sonDiv {
background-color: pink;
display: inline;
}
3. display: flex; [easy to use]
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
4. display: flex; [easy to use]
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
margin: auto;
}
5、position: absolute;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、position: absolute;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7. position: absolute; [easy to use]
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、display: grid;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
margin: auto;
}
9、display: grid;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
Line block element:
1、text-align + line-height + vertical-align
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
vertical-align: middle;
}
2、display: table-cell;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* child element */
.sonDiv {
background-color: pink;
display: inline-block;
}
3. display: flex; [easy to use]
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
4. display: flex; [easy to use]
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
margin: auto;
}
5、position: absolute;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、position: absolute;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7. position: absolute; [easy to use]
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、display: grid;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
margin: auto;
}
9、display: grid;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
block element:
1、display: table-cell;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
vertical-align: middle;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
2. display: flex; [easy to use]
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
3. display: flex; [easy to use]
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
4、position: absolute;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
5、position: absolute;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
6. position: absolute; [easy to use]
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
7、display: grid;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
8、display: grid;
/* parent element */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* child element */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
3. Tell me about your understanding of rem?
Overview:
Responsive pages are implemented with rem [change the root element fontsize according to the device screen width], and device adaptation is implemented with media queries [control which style classes take effect according to the device screen width]
Media query implementation: [use when the page structure needs to change]
1. CSS media query in the link element [generally used in Js projects]
<!-- On the PC side, when the screen width of the device is greater than or equal to 901px, the style file class on the PC side takes effect, controlling the display and hiding of some elements, changing the font rem value, etc. -->
<link rel="stylesheet" media="(min-width:901px)" href="./css/pc/index.css">
<!-- On the mobile terminal, when the screen width of the device is less than or equal to 900px, the mobile terminal style file class takes effect, controlling the display and hiding of some elements, changing the font rem value, etc. -->
<link rel="stylesheet" media="(max-width:900px)" href="./css/pe/index.css">
2. CSS media queries in the style sheet [generally used in Vue projects]
<!-- pc端 -->
@media screen and (min-width:901px){
body {
background-color: red;
}
}
<!-- Mobile terminal-->
@media screen and (max-width:900px){
body {
background-color: green;
}
}
rem principle:
Percentage layout enables responsive layout, and rem is equivalent to percentage layout. No matter how the visible window of the device changes, always set rem to 1/n of width, that is, the percentage layout is realized.
rem formula:
Option 1: 1rem=100px【Convenient calculation】
html.fontSize = 1rem = device screen width/(design draft width/100),
1. Analysis stage --- Make the screen width of the device equal to the width of the design draft, then 1rem=100px. At this time, it is convenient to calculate and write the rem corresponding to the element width of the design draft.
2. Execution stage --- Make the device screen width equal to the device screen width obtained by Js
Solution 2: 1rem = design draft width/number of copies [need to use cssrem plug-in to facilitate calculation]
1. Analysis stage --- html.fontSize = 1rem = design draft width/number of copies
2. Execution stage --- html.fontSize = 1rem = device screen width/number of copies
3. Rem of page elements: nrem = design draft element width/1rem
rem implementation:
1. In the analysis stage, first calculate 1 rem according to the width px of the design draft, and then calculate and write the rem of the page element according to the width px of the design draft elements
2. In the execution stage, Js first automatically calculates 1rem according to the width of the device screen, then assigns the px corresponding to 1rem to the fontsize of Html, and then calculates the px of the actual page element according to the rem of the written page element
rem tool:
Analysis stage: the cssrem plug-in automatically calculates page element px into rem. First, in the VSCode configuration file, calculate 1rem according to the design draft width px.
Execution stage: flexible.js library divides the device screen width into 10 parts, and automatically calculates 1rem according to the device screen width. [Js project is introduced in head, Vue project is introduced in main.js]
4. Tell me about the method of clearing the float? [Solution to the problem that the height of the parent element collapses due to floating]
1. Set the height directly to the parent
2. Partition wall method: After the last floating label, add a new label and set clear: both for it
3. overflow:hidden;: By triggering BFC, clear the floating
4. Pseudo class removal method: recommended
.clearfix:after{
// the content is empty
content: "";
// convert to block element
display: block;
//Clear left and right floating
clear: both;
}
5. Tell me about the new features of CSS3?
Special selectors: attribute selectors, form pseudo-class selectors, structural pseudo-class selectors, pseudo-element selectors
Special effects: gradient, rounded border-radius, text shadow text-shadow/box shadow box-shadow, filter filter
Special effects: transition transition, transformation transform (tilt skew, translation translate, zoom scale, rotation rotate), animation animation
6. Tell me about your understanding of BFC?
Page [equivalent to html root element]: a 3D model, divided into X, Y, and Z axes; each internal sub-element is also a 3D model, with its own X, Y, and Z axes
The FC formatting context [manages the X and Y axes of the page], which is a container in the page that determines how the elements are laid out inside. It determines the internal layout of the elements, and the internal child elements will not affect the layout outside the container.
SC stacking context [manage the Z axis of the page], it is a container in the page that determines how the elements are layered inside, and determines the hierarchical relationship inside the elements. Each element has its own stacking context.
Document flow [manage the X and Y axis of the page]: the default layout characteristics of all elements in the page. Block elements occupy one line exclusively, arranged vertically, line elements do not occupy one line exclusively, arranged horizontally, automatically wrap horizontally, and overflow vertically.
The relationship between FC, SC, and document flow:
The outermost and bottom end of the page is the HTML root element; [Z-axis aspect] there are many layers stacked inside the root element, and each layer has many child elements; [X, Y-axis aspect] the root element has its own FC layout format-BFC , each internal block element is constrained by the root element FC layout format, and other aspects still follow the document flow characteristics
[Aspects of X and Y axis] By triggering FC, some layout characteristics of the document flow inside the element itself can be changed. [Aspect of Z axis] By triggering SC, the element itself can be separated from the layout characteristics of the document flow of the parent element.
There are four types of FCs:
BFC block-level formatting context, only block elements participate, it specifies how the internal block elements are laid out.
IFC Inline formatting context, only row elements participate, it specifies how the internal row elements are laid out.
FFC flexbox formatting context
GFC grid formatting context
BFC：
Trigger method:
root element: html
Float: the value of float is not none
Positioning: the value of position is not static or relative
Block-level container: the value of display is inline-block, table-caption, table-cell
overflow: The value of overflow is not visible
effect:
Avoid overlapping top and bottom margins
Clear floating to solve the height collapse of floating elements
IFC：
Trigger method:
Block-level elements contain only inline elements
FFC：
Trigger method:
display: container for flex / inline-flex
GFC：
Trigger method:
display: container for grid / inline-grid
7. Tell me about your understanding of flex?
Container: The element that enables the flex layout
Items: child elements within the container
The container is divided into main axis and side axis, and the items are arranged from left to right and top to bottom by default
Properties of the container:
flex-direction sets the direction of the main axis
justify-content sets the arrangement of the child elements of the main axis
align-items sets the alignment of child elements on the cross axis (single line)
align-contnet sets the alignment of child elements on the cross axis (multiline)
flex-wrap sets whether the child element wraps
flex-flow is a compound property of flex-direction and flex-wrap properties
Properties of the project:
flex is a compound property of flex-grow, flex-shrink and flex-basis properties
(1) flex-grow: Define the expansion ratio of the item
(2) flex-shrink: Define the shrinkage ratio of the project
(3) flex-basis: Define the default baseline value of the project
align-self sets the alignment of the item on the cross axis, which can override the align-items property
order Sets the order in which items are sorted
8. Tell me about the problems related to margins and their solutions?
Sibling top and bottom margins overlap:
1. Put a parent element with BFC enabled outside an element
2. Add content between sibling elements
Parent and child top and bottom margins overlap:
1. Enable BFC for the parent element
2. Add content to the first or last line in the parent element
3. Add Padding to the parent element
4. Add Border to the parent element
Nine, talk about what is the reflow and redrawing of the page?
Page rendering process: parsing the DOM tree - parsing the style structure - building the Render rendering tree - drawing the Render rendering tree
Reflow (page layout change): The current element has changed its width, height, layout, display and hiding, and the rendering tree needs to be rebuilt
Redrawing (element appearance change): the current element changes its appearance, but does not change the page layout, does not need to rebuild the rendering tree, only needs the browser to redraw, for example: changing the background color
Reflow must cause redraw, but redraw does not necessarily cause reflow.
How to optimize:
1. [Multiple Operations Merge] Merge multiple operations of operating nodes and changing style attributes into one operation.
2. [Out of the document flow] The elements that need to be rearranged multiple times are separated from the document flow, so that its changes will not affect other elements.
3. [Hide first and then operate] Since the element whose display attribute is none is not in the rendering tree, the operation on the hidden element will not cause the rearrangement of other elements. If you want to perform multiple operations on an element, you can hide it first, and then display it after the operation is completed.
Ten, talk about css priority?
From the aspect of introduction: inline style > embedded <style> > linked into <link>
In terms of selector weights:
! important > inline selector 1000 > Id selector 100 > class selector = attribute selector = pseudo class selector 10 > label selector = pseudo element selector 1 > inheritance = wildcard selector 0
When the weights are equal, according to the principle of proximity
Prioritize the resolution of selectors with high weights, and there will be no weight carry: for example, when 11 class selectors and 1 Id selector are together, the Id selector will be parsed first, and the so-called 11 class selectors will not appear The problem that the selector is larger than the Id selector
When using a compound selector, the weight calculation method: offspring, parent-child, brother, intersection, weights are added; union, weights are calculated separately
11. Tell me which attributes can be inherited?
color
font-xxx
line-xxx
text-xxx
12. Tell me how to draw a triangle?
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-left-color: red;
}
Thirteen, talk about how to achieve 6px font?
.font{
font-size: 12px;
transform: scale(.5);
}
14. Tell me how to draw a 0.5px border on the mobile terminal?
1. By scaling 0.5 times
border: 1px solid red;
transform: scaleY(.5);
2. Realized by 50% background gradient
height: 2px;
background-image: linear-gradient(0deg, red 50%, transparent 50%);
- END -